ホームページ > 記事 > ウェブフロントエンド > Vue データ バインディングの詳細な紹介
Vue データ バインディングの詳細な紹介
- 亚连オリジナル
- 2018-06-13 13:51:461670ブラウズ
この記事では主に Vue の高レベル コンポーネントの探索の使用方法を紹介し、参考にしていきます。
1. 双方向バインディングとは何ですか?
Vue フレームワークの中核機能は双方向のデータ バインディングです。 双方向とは、HTML タグ データが Vue オブジェクトにバインドされ、逆方向のデータもバインドされることを意味します。平たく言えば、Vue オブジェクトの変更は HTML タグの変更に直接影響し、タグの変更は Vue オブジェクトのプロパティの変更に影響します。
このように、以前のDom駆動開発手法、特にjQueryベース開発時代は、DOM変更後にjsイベントをトリガーし、jsコードを通じてタグを取得するというやり方でした。イベントが変更されてからバックグラウンドと対話し、バックグラウンドから返された結果に基づいて HTML タグを更新するのですが、これは非常に面倒です。 Vue の双方向バインディングを使用すると、開発者は JSON データの変更のみを気にする必要があり、Vue は自動的に HTML にマッピングし、HTML の変更も JS オブジェクトに直接マッピングされます。ドライバー駆動開発の時代は、Dom 開発が主流だった時代をはるかに放棄しました。
2. Vue バインディング テキスト
データ バインディングの最も一般的な形式は、テンプレート エンジンなどの「Mustache」構文 (二重中括弧) を使用したテキスト補間です。{{ }}。{{}}.
创建的Vue对象中的data属性就是用来绑定数据到HTML的。参考如下代码：
<span>Message: {{ msg }}</span>
<script>
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 p标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg: 'Hello Vue!' // message 自定义的数据
}
});
</script>3. 绑定数据中使用JavaScript表达式
对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。
<span>Message: {{ msg + ' - ' + name }}</span>
<script>
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 p标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg: 'Hi', // message 自定义的数据
name: 'flydragon' // name自定义的属性，vue可以多个自定义属性，属性类型也可是复杂类型
}
});
</script>结果：
Hi - flydragon
当然Vue还可以支持表达中的任何计算、函数处理等。参考下面的综合点的案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之数据绑定-表达式运算</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
{{ msg + ' - ' + name }}
<p>
{{ isOk ? '123' : '456' }}
</p>
<p>我的年龄是： {{ age *2 }}</p>
</p>
<script>
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 p标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg: 'Hi', // message 自定义的数据
name: 'flydragon',
isOk: true,
age: 18
}
});
</script>
</body>
</html>4. Vue属性绑定
Vue中不能直接使用{{ expression }}语法进行绑定html的标签，而是用它特有的v-bind指令（就是一种写法，先按照格式走，具体指令是什么可以后续再了解）。
绑定的语法结构：
<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>参考如下代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之数据绑定--属性绑定</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<p v-bind:id="MenuContaineId">
<a href="#" v-bind:class="MenuClass">首页</a>
<a href="#" v-bind:class="MenuClass">产品</a>
<a href="#" v-bind:class="MenuClass">服务</a>
<a href="#" v-bind:class="MenuClass">关于</a>
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
MenuClass: 'top-menu',
MenuContaineId: 'sitemenu'
}
});
</script>
</body>
</html>5. 属性绑定简写
由于v-bind使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。
例如： <p :id="MenuContaineId"> 等价于 <p v-bind:id="MenuContaineId">
6. 输出纯HTML
由于Vue对于输出绑定的内容做了提前encode，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，我们确保后台数据是安全的，那么我们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。
<p id="app">
<p v-bind:id="MenuContaineId" v-html="MenuBody">
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
MenuContaineId: 'menu',
MenuBody: '<p>这里是菜单的内容</p>'
}
});
</script>结果：
<p id="app"> <p id="menu"> <p>这里是菜单的内容</p> </p> </p>
7. 样式绑定
对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。
7.1. 绑定样式对象
经常我们需要对样式进行切换，比如：p的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情。
代码：
<p v-bind:class="{ active: isActive }"></p>解释：当 isActive为 true时， p就会具有了active样式类，如果 isActive为false，那么p就去掉active样式类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之绑定样式类</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.active {
background-color: #ccc;
}
</style>
</head>
<body>
<p id="app">
<p v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
绑定颜色类
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
MenuContaineId: 'menu',
isActive: true
}
});
</script>
</body>
</html>7.2. 混合普通的HTML标签样式类及绑定样式对象
v-bind:class 指令可以与普通的 class 属性共存。
<p id="app">
<p class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
isActive: true,
hasError: false
}
});
</script>结果：
<p id="app"> <p class="static active"> </p> </p>
7.3. 绑定data中的样式对象
直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。 Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，既可以有智能提示，又可以很复杂进行编辑，不用担心烦人的""
<p id="app">
<p class="static"
v-bind:class="classObject">
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': false
}
}
});
</script>
3. バインディング データでの JavaScript 式の使用
すべてのデータ バインディングについて、Vue.js は完全な JavaScript 式サポートを提供します。<p id="app"> <p class="static active"> </p> </p>結果:
<p v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
} もちろん、Vue は式内の計算や関数処理などもサポートできます。以下の包括的なポイントの例を参照してください。 <p v-bind:class="[isActive ? activeClass : '', errorClass]">
<p v-bind:class="[{ active: isActive }, errorClass]">4.
Vue 属性バインディング
Vue で HTML タグをバインドするために{{expression }} 構文を直接使用することはできませんが、独自の v-bind 命令を使用するだけです。書き方については、まず形式に従ってください。その後、具体的な手順について学ぶことができます)。 バインディング構文構造: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<p v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
vue 入门系列教程
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
size: 19,
width: 200,
bgcolor: 'red'
}
});
</script>
</body>
</html>次のコード例を参照してください: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<table>
<tr>
<!-- computed里面的函数可以直接当成data里面的属性用，非常方便，注意没有括号！！！-->
<td>生日</td><td>{{ getBirthday }}</td>
</tr>
<tr>
<td>年龄</td><td>{{ age }}</td>
</tr>
<tr>
<td>地址</td><td>{{ address }}</td>
</tr>
</table>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
birthday: 914228510514, // 这是一个日期对象的值：1998年11月1日
age: 19,
address: '北京昌平区龙泽飞龙'
},
computed: {
// 把日期换成 常见规格格式的字符串。
getBirthday: function () {
var m = new Date(this.birthday);
return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
}
}
});
</script>
</body>
</html>5. 🎜プロパティ バインディングの略語🎜🎜🎜 v-bind は非常に頻繁に使用されるため、Vue は簡単な記述であれば、v-bind を削除して : を直接使用できます。 🎜{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<p v-bind:id="rawId | formatId"></p>🎜🎜6. 🎜🎜純粋な HTML を出力する🎜🎜🎜Vue は出力バインドされたコンテンツを事前にエンコードするため、表示のためにページにバインドされるときに XSS によって攻撃されないことが保証されます。ただし、シナリオによっては、バックグラウンド データが安全であることを確認してから、Web ページにネイティブ HTML タグを表示する必要があります。 Vue は v-html ディレクティブを提供します。 🎜new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})🎜結果: 🎜{{ message | filterA | filterB }}🎜🎜7. スタイルバインド🎜🎜🎜 通常の属性バインドの場合は、上記の属性バインド方法のみを使用できます。 Vue は、特にクラス属性とスタイル属性のバインドを強化します。複雑なオブジェクト バインディング、配列バインディング スタイルおよびクラスが存在する場合があります。 🎜🎜🎜7.1. スタイルオブジェクトのバインド🎜🎜🎜p、アクティブなラベルなどの表示と非表示など、スタイルを切り替える必要があることがよくあります。 Vue が提供するオブジェクト バインディング スタイル メソッドを使用すると、これらのことを簡単に行うことができます。 🎜🎜コード: 🎜{{ message | filterA('arg1', arg2) }}🎜説明: isActive が true の場合、p はアクティブなスタイル クラスを持ちます。isActive が false の場合、p はアクティブなスタイル クラスを削除します。 🎜<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<table>
<tr>
<!-- computed里面的函数可以直接当成data里面的属性用，非常方便，注意没有括号！！！-->
<td>生日</td><td>{{ getBirthday }}</td>
</tr>
<tr>
<td>年龄</td><td>{{ age }}</td>
</tr>
<tr>
<td>地址</td><td>{{ address }}</td>
</tr>
</table>
</p>
<!-- 添加下面这行代码，动态增加 年龄，页面会有怎样的变化呢？？ -->
<button type="button" onclick="app.age+=1;" >加加</button>
<script>
var app = new Vue({
el: '#app',
data: {
birthday: 914228510514, // 这是一个日期对象的值：1998年11月1日
age: 19,
address: '北京昌平区龙泽飞龙'
},
computed: {
// 把日期换成 常见规格格式的字符串。
getBirthday: function () {
var m = new Date(this.birthday);
return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
}
}
});
</script>
</body>
</html>🎜🎜7.2. 通常の HTML タグスタイルクラスとバインドされたスタイルオブジェクトの混合🎜🎜🎜 v-bind:class ディレクティブは通常のクラス属性と共存できます。 🎜<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<!-- v-model可以直接指向data中的属性，双向绑定就建立了 -->
<input type="text" name="txt" v-model="msg">
<p>您输入的信息是：{{ msg }}</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '双向数据绑定的例子'
}
});
</script>
</body>
</html>🎜結果: 🎜rrreee🎜🎜7.3. データ内のスタイルオブジェクトをバインドする🎜🎜🎜 HTML 属性の二重引用符内にオブジェクトを直接記述するのは依然として非常に不快であり、スマートなプロンプトがないため、簡単に作成できます。間違い。 Vue を使用すると、バインドされたクラス文字列をデータのオブジェクトに直接指定できるため、非常に便利です。スマートなプロンプトを表示できるだけでなく、煩わしい "" を気にせずに複雑な編集を行うこともできます。 🎜rrreee🎜結果: 🎜rrreee🎜🎜7.4. バインディングスタイル配列🎜🎜🎜実際、バインディング配列はバインディングスタイルオブジェクトの続きです。公式ウェブサイトのサンプルコードを参照してください。 🎜rrreee🎜もちろん、他にも興味深いサポートがたくさんあるので、詳細は説明しません。 🎜🎜例: 🎜rrreee🎜🎜7.5. インライン スタイル バインディング 🎜🎜🎜インライン スタイル バインディングは、スタイル クラスの操作と非常によく似ています。 v-bind:style のオブジェクト構文は非常に直感的です。CSS に非常によく似ていますが、実際には JavaScript オブジェクトです。 CSS プロパティ名は、キャメルケースまたはケバブケースで命名できます。 🎜🎜例を見てください: 🎜rrreee🎜プレフィックスを自動的に追加する🎜🎜 v-bind:style が、transform などの特定のプレフィックスを必要とする CSS プロパティを使用する場合、Vue.js は対応するプレフィックスを自動的に検出して追加します。 🎜🎜🎜8. 計算されたプロパティ🎜🎜在做数据的绑定的时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求。比如： 把一个日期按照规定格式进行输出，可能就需要我们对日期对象做一些格式化的出来，表达式可能就捉襟见肘了。
Vue对象提供的computed属性，可以让我们开发者在里面可以放置一些方法，协助我们绑定数据操作，这些方法可以跟data中的属性一样用，注意这些方法用的时候不要加()。 例子来了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<table>
<tr>
<!-- computed里面的函数可以直接当成data里面的属性用，非常方便，注意没有括号！！！-->
<td>生日</td><td>{{ getBirthday }}</td>
</tr>
<tr>
<td>年龄</td><td>{{ age }}</td>
</tr>
<tr>
<td>地址</td><td>{{ address }}</td>
</tr>
</table>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
birthday: 914228510514, // 这是一个日期对象的值：1998年11月1日
age: 19,
address: '北京昌平区龙泽飞龙'
},
computed: {
// 把日期换成 常见规格格式的字符串。
getBirthday: function () {
var m = new Date(this.birthday);
return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
}
}
});
</script>
</body>
</html>9. 绑定的数据过滤器
过滤器本质就是数据在呈现之前先进行过滤和筛选。官网上写的不错，我就不再赘述，下面是官网的描述。
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：
{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<p v-bind:id="rawId | formatId"></p>Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。
过滤器函数总接受表达式的值作为第一个参数。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})过滤器可以串联：
{{ message | filterA | filterB }}过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
10. 核心：自动响应对象的变化到HTML标签
上面的例子都是 数据对象是写死在创建的Vue对像上，那如果数据（data）发生改变时会怎样呢？ 让我们用chrome把上面例子的页面打开，并打开发者工具控制台,输入：app.age = 20会有什么情况发生呢？
在页面中添加一个按钮，动态的增加年龄：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<table>
<tr>
<!-- computed里面的函数可以直接当成data里面的属性用，非常方便，注意没有括号！！！-->
<td>生日</td><td>{{ getBirthday }}</td>
</tr>
<tr>
<td>年龄</td><td>{{ age }}</td>
</tr>
<tr>
<td>地址</td><td>{{ address }}</td>
</tr>
</table>
</p>
<!-- 添加下面这行代码，动态增加 年龄，页面会有怎样的变化呢？？ -->
<button type="button" onclick="app.age+=1;" >加加</button>
<script>
var app = new Vue({
el: '#app',
data: {
birthday: 914228510514, // 这是一个日期对象的值：1998年11月1日
age: 19,
address: '北京昌平区龙泽飞龙'
},
computed: {
// 把日期换成 常见规格格式的字符串。
getBirthday: function () {
var m = new Date(this.birthday);
return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
}
}
});
</script>
</body>
</html>11. 双向数据绑定
上面的例子我们大多讲的是单向的 js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？ HTML中只有表达能接受用户的输入，最简单的演示双向绑定的就是文本框了。
Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<!-- v-model可以直接指向data中的属性，双向绑定就建立了 -->
<input type="text" name="txt" v-model="msg">
<p>您输入的信息是：{{ msg }}</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '双向数据绑定的例子'
}
});
</script>
</body>
</html>最终的结果就是：你改变input文本框的内容的时候，p标签中的内容会跟着进行改变，哇是不是很神奇呢...
关于其他表单的绑定的语法我就不赘述了，还是参考官网吧，我这里大部分例子也是来自官网。
12. 数据绑定总结
vue提供了大量的绑定的语法和方法，非常方便我们进行数据的绑定，尤其它是双向的数据绑定，极大的减少了我们dom操作的麻烦程度。可能你越来越喜欢它了吧...
Github地址：源码下载
其他详情请参考：http://aicoder.com/vue/preview/all.html
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上がVue データ バインディングの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。