上面的字符串模板中，有一个{{name}}，它和data.name是绑定的，当data.name发生变化时，视图也发生变化。
但是v-bind和v-model这两种绑定比较难区分，特别是在表单元素中，刚开始会混淆到底应该怎么使用。
v-bind
首先来看下v-bind，它的用法是后面加冒号，跟上html元素的attributions，例如：
这里的v-bind:class会产生什么效果呢？实际上，首先你可以看下如果不加v-bind:，也就是：
当加上v-bind:之后，就不一样了。它的值classed不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。除了class，其他大部分html原始的属性都可以通过这种方式来绑定，而且为了方便，它可以直接缩写成冒号形式，例如：
varapp=Vue({
el:'#app',
template:'',
data:{
http://dh.wk163.comsrc:'',
},
beforeMount(){
fetch(...).then(...).then(res=>this.http://dh.wk163.comsrc=res.http://dh.wk163.comsrc)//这里修改了data.http://dh.wk163.comsrc
},
})
上面这段代码中，默认情况下data.http://dh.wk163.comsrc是空字符串，也就说不会有图片显示出来，但是当从远端获取到图片地址之后，更新了data.http://dh.wk163.comsrc，图片就会显示出来了。
v-model
v-model主要是用在表单元素中，它实现了双向绑定。双向绑定大家都非常熟了，简单的说就是默认情况下，它跟上面两种情况的数据绑定是一样的，实例的data.name发生变化的时候，对应的试图中也会发生变化。但是v-model绑定后，它还会反过来，在input中手动输入新的内容，会反过来修改data.name的值，如果在视图中其他地方使用到了data.name，那么这个地方就会因为data.name的变化而变化，从而实现关联动态效果。下面来举个栗子：
varapp=Vue({
el:'#app',
template:'',
data:{
name:'',
},
})
上面中绑定了name，那么当input的value发生变化时，data.name就会跟着发生变化，而data.name变化了{{name}}的地方也会跟着变化。
v-model是一种双向绑定，那么也就是说，你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input,textarea,select这些表单元素上。
v-bind和v-model混用
有一些情况我们需要v-bind和v-model一起使用。这个时候如果不留神，就会搞乱状况，分不清哪里应该怎么控制。举个栗子：
上面就是一个栗子。data.name和data.body，到底谁跟着谁变呢？甚至，它们会不会产生冲突呢？
实际上它们的关系和上面的阐述是一样的，v-bind产生的效果不含有双向绑定，所以:value的效果就是让input的value属性值等于data.name的值，而v-model的效果是使input和data.body建立双向绑定，因此首先data.body的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body还会跟着改变。
现在的问题是，当这两个一起使用的时候，谁都优先级高？谁会无效？实验证明，v-model将会被使用，v-bind这个时候无效了，因为它正好绑定在value属性上，如果绑在其他属性上v-bind是不受影响的。在这种情况下，v-bind失效，即使你修改data.name，input里面不会有任何变化。
这也说明，v-model建立的双向绑定对输入型元素input,textarea,select等具有优先权，会强制实行双向绑定，如果你愿意的话。
这说明，在单独的input中，同时使用v-bind和v-model是没有必要的，虽然不会造成冲突。
注意上面我说道“单独”，也就是说，在一组输入中，它们又要另当别论。一组输入包括单选组、复选组、下拉选项、下拉选项组。