今天主要讲vue中的属性绑定和双向数据绑定
属性绑定：
例如：<div title="所有过往，皆为序章">所有过往，皆为序章</div>
在项目开发中，这个title属性值并不是固定的，而是变化的动态的。想想我们前几节的知识点就很容易的知道，把title里的属性值指向data里的变量，只要改变这个变量，我们就可以达到目的。所以我们把data改成如下：
data() {
return {
title: "所有过往，皆为序章",
}
}
只要将dom里的title属性值指向data里的title就OK了！很简单是不是？可是问题来了，这个data里的title如何写在dom里呢？似乎直接嵌入或者以{{}}的形式都不行。怎么办？
这次出场的救星就是“v-bind:”，这位也是一个模板指令，意是将属性值与data里的变量进行绑定。那么我们在dom中，就该这样改一下：
<div v-bind:title="title ">所有过往，皆为序章</div>
这下我们要的效果就出来喽！
PS：v-bind:title的简写形式是:title 所以上面那段代码还可以写成
<div :title="title ">所有过往，皆为序章</div>
讲完属性绑定，我们讲下双向数据绑定
双向数据绑定为何物呢？要明白这个概念，我们需要先了解一下单向绑定。
单向绑定：只有data里的数据能够决定dom里的数据显示，而不能反过来。就拿上面的例子举例：data里的变量值决定着dom里的title属性值，但dom里的title值决定不了data里的title值。
那么双向绑定就顾名思义--双方可以互相决定对方的值！
举例喽：
html里：
<input :value="content" /> //input标签既可以显示内容，也可以输入内宾，value值与data里的数据单向绑定
<div>{{ content }}</div> //与data里的数据进行单向绑定，这里的数据可以反映data里的数据
js部分：
data() {
return {
content: "所有过往，皆为序章"
}
}
我们可以看下页面效果，超初input里的显示的是data里的数据"所有过往，皆为序章"，但当我改变input里的值时，data里的数据没有改变。怎么看出来的呢？div里的内容和data里的数据绑定，如果div里的内容没有变化说明data里的数据没有变化。如果我想改变input里的值，data里的数据也跟着变化，如何做呢？这就用到了另一个常用的模板指令“v-model”。我们把上面的html代码改成如下形式：
<input v-model="content" />
<div>{{ content }}</div>
我们再看下页面效果，是不是我们在改变input的值时，data数据也变化了呢？
总结一下：我们今天讲到了两个小家伙：
1. v-bind: 或者缩写成 ：=> 属性绑定，属性值可以跟着data里的数据的变化而变化
2. v-model => 双向数据绑定。dom里和data里的数据可以互相改变
微信公众号：duzhan99
