一、什么是双向数据绑定
双向数据绑定是Vue的核心功能之一。所谓双向数据绑定是指：HTML标签上的数据绑定到Vue对象上，反过来Vue对象上的数据也会绑定到HTML标签上。再通俗一点来说：Vue对象的改变会导致HTML标签上的改变，而HTML标签上的变化，也会同样造成Vue对象的变化。
而在此之前，以DOM驱动的开发方式，尤其是以jQuery为主的开发时代，都是在DOM变化之后，触发JS事件，之后再在事件中通过JS代码取得标签的变化，最后再通过与后台交互，通过后台返回的结果，更新HTML标签，这个过程非常地繁琐。而有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue会自动映射到HTML上，而且HTML的变化也会映射回JS对象上，开发方式直接变革成了前端由数据驱动的开发时代，而抛弃了以DOM开发主导的时代了。
vue双向数据绑定，典型的MVVM框架.png
二、Vue绑定文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。创建Vue对象中的data属性，就是用来绑定数据到HTML的。
<div id="app">
<span>{{ msg }}</span>
</div>
<script>
var app = new Vue({ // 创建Vue对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg: 'Hello Vue' // msg 自定义的数据
}
});
</script>
三、绑定数据中使用JavaScript表达式
对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。
<div id="app">
<span>{{ msg1 + '-' + msg2 }}</span>
</div>
<script>
var app = new Vue({ // 创建Vue对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg1: 'Hello' , // msg1 自定义的数据
msg2: 'Vue' // msg2 自定义的数据
}
});
</script>
最后的结果为：
Hello-Vue
当然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>
<div id="app">
<span>{{ msg1 + ' - ' + msg2 }}</span>
<p>
{{ isOk ? '123' : '456' }}
</p>
<p>我的年龄是： {{ age*2 }}</p>
</div>
<script>
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg1: 'Hello', // msg1 自定义的数据
msg2: 'Vue',
isOk: true,
age: 18
}
});
</script>
</body>
</html>
四、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>
<div id="app">
<div 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>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
MenuClass: 'top-menu',
MenuContaineId: 'sitemenu'
}
});
</script>
</body>
</html>
而由于v-bind指令非常繁琐，所以Vue中提供了简便的写法，直接使用:即可：
<div :id="MenuContaineId">
等价于
<div v-bind:id="MenuContaineId">
五、输出纯HTML
Vue提供了v-html指令，显示原生的HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯HTML</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :id="menuContaineId" v-html="menuBody">
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
menuContaineId: 'menu',
menuBody: '<p>菜单内容</p>'
}
});
</script>
</html>
六、绑定样式
对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。
- 绑定样式对象
我们经常需要对样式进行切换，比如一个div的显示与隐藏或者某些标签的active等。Vue提供的绑定样式对象的方式，就可以让我们很轻松地做到这些。
//当使用v-bind来操作class属性时，Vue内部提供了特殊的用法
//以下代码中，当active的值为true时，div就会有相应的样式
//而且，不论写多少属性，只要值为true，对应的属性就会添加到class上去
代码：
<div v-bind:class="{ active: isActive }"></div>
解释：
当 isActive为 true时， div就会具有了active样式类，如果 isActive为false，那么div就去掉active样式类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定样式对象</title>
<style>
.active {
background-color: #ccc;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:id="MenuContainerId" v-bind:class="{ active: isActive }">
绑定颜色类
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue对象中绑定的数据
MenuContainerId: 'menu',
isActive: true
}
});
</script>
</body>
</html>
- 混合普通的HTML标签样式类及绑定样式对象
v-bind:class 指令可以与普通的 class 属性共存。
<body>
<div id="app">
<div class="static" v-bind:class="{ active: isActive,hide:hasError }">
混合普通的HTML标签样式类及绑定样式对象
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
});
</script>
</html>
结果：
<div id="app">
<div class="static active">
</div>
</div>
- 绑定data中的样式对象
直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。
Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，既可以有智能提示，而且不用担心烦人的""了。
<div id="app">
<div class="static"
v-bind:class="classObject">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': false
}
}
});
</script>
结果：
<div id="app">
<div class="static active">
</div>
</div>
- 绑定样式数组
其实绑定数组，就是绑定样式对象的延续，看官网的例子代码吧。
// html
<div v-bind:class="[activeClass, errorClass]">
// JS
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
- 内联样式绑定
内联样式的绑定，非常类似于样式类的操作。v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。
看个例子：
<!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>
<div id="app">
<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
vue 入门
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 19,
width: 200,
bgcolor: 'red'
}
});
</script>
</body>
</html>
七、双向数据绑定
上面的例子我们大多讲的是单向的 JS对象向 HTML数据进行绑定，那HTML怎样向JS进行反馈数据呢？
最简单的演示双向绑定的就是文本框了。
Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。
<!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>
<div id="app">
<!-- v-model可以直接指向data中的属性，双向绑定就建立了 -->
<input type="text" name="txt" v-model="msg">
<p>您输入的信息是：{{ msg }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '双向数据绑定的例子'
}
});
</script>
</body>
</html>
最终的结果就是：你改变input文本框的内容的时候，p标签中的内容会跟着进行改变！
网友评论