插值，v-bind，v-model的区别

使用Vue框架可以专注于数据，专注于逻辑层面的问题。Vue通过 {{}} 插值 、v-bind和v-model 指令来控制数据。

{{}} 插值

插值经常用在标签之间需要改变的html内容上

<div id='app'>
	<p>{{message}}</p>
</div>
...
const vm = new Vue({
	el:'#app',
	data:{
		message:'<a href="https://baidu.com">百度</a>'
	}
})

可见插值作为一串字符串被直接输出了，并不会渲染。

修改下代码：

<div id='app'>
	<p v-html='message'>{{message}}</p>
</div>
...
const vm = new Vue({
	el:'#app',
	data:{
		message:'<a href="https://baidu.com">百度</a>'
	}
})

由上图可见，v-html会直接在p上渲染，并把{{message}}给删了。

v-bind

强制绑定，v-bind经常用在属性值或类名上，将一个属性的值绑定到一个变量上，更改变量来更改属性值

<div id="app">
	<button v-bind:title='mes'></button>
</div>
...
const vm = new Vue({
	el:'#app',
	data:{
		mes:'111',
	}
})

v-bind必须要放在属性或者类的前面，或者说，v-bind后需要加一个对象，如果直接给data对象中的一个属性的值将会报错。
此外v-bind可以省写为：

...
	<button v-bind:title='mes'></button>
	<button :title='mes></button>
...

v-bind所绑定的数据是不可以影响 data 内部的变量的，但data内部的变量变化时，可以影响v-bind所绑定的内容。

v-model

v-model是双向绑定，不同于v-bind将值链接到所选的属性上，v-model所绑定的值是可以改变data中的属性的。

<div id="app">
 	<span>Change Name:</span>
    <input type="text" placeholder="Name" v-model="name2">
</div>
...
const app = new Vue({
   el:'#app',
   data:{
      name:'',
   }
})

v-model之所以为双向绑定，是因为v-model所绑定的内容会影响到data内部的数据，同理data内部数据的更改也会影响v-model绑定的内容。