VUE的模板采用DOM模板，也就是说它的模板可以当做DOM节点运行，在浏览器下不报错，绑定数据有三种方式，一种是插值，也就是{{名称}}的形式，一种是v-绑定，还有一种是v模型{{名称}}的形式比较好理解，就是以文本的形式和实例数据中对应的属性进行绑定比如。：

var app = new Vue（{el：'#app'，template：'<div @ click =“toggleName”> {{name}} </ div>'，data：{name：'tom'，}，method： {toggleName（）{this.name = this.name ==='tom'？'sony'：'tom'}，}，}）

上面的字符串模板中，有一个{{名}}，它和data.name是绑定的，当data.name发生变化时，视图也发生变化。

但是V-绑定和V型这两种绑定比较难区分，特别是在表单元素中，刚开始会混淆到底应该怎么使用。

V-绑定

首先来看下V-绑定，它的用法是后面加冒号，跟上HTML元素的归属，例如：

<p v-bind：class =“classed”>

这里的v-bind：class会产生什么效果呢？实际上，首先你可以看下如果不加v-bind:，也就是：<p class="classed">，这只是一个普通的p元素，含有一个.classed的类，没有任何数据参与进来。

当加上V-绑定：之后，就不一样了它的值归类不是字符串，而是VUE实例对应的data.classed的这个变量也就是说data.classed是什么值，它就会给类。属性传递什么值，当data.classed发生变化的时候，阶级属性也发生变化，这非常适合用在通过CSS来实现动画效果的场合，除了类，其他大部分HTML原始的属性都可以通过这种方式来绑定，而且为了方便，它可以直接缩写成冒号形式，例如：

var app = Vue（{el：'#app'，template：'<img ： src =“ src ”>'，data：{src：''，}，beforeMount（）{fetch（...）。then ...）。then（res => this.src = res.src）//这里修改了data.src}，}）

上面这段代码中，默认情况下data.src是空字符串，也就说不会有图片显示出来，但是当从远端获取到图片地址之后，更新了data.src，图片就会显示出来了。

V模型

V模型主要是用在表单元素中，实现它了双向绑定，双向绑定大家都非常熟了，简单的说就是默认情况下，它跟上面两种情况的数据绑定是一样的，实例的data.name发生变化的时候，对应的试图中也会发生变化。但是v-模型绑定后，它还会反过来，在输入中手动输入新的内容，会反过来修改data.name的值，如果在视图中其他地方使用到了data.name ，那么这个地方就会因为data.name的变化而变化，从而实现关联动态效果下面来举个栗子：

var app = Vue（{el：'#app'，template：'<label> <input v-model =“name”> {{name}} </ label>'，data：{name：''，}， }）

上面<输入>中绑定了名称，那么当输入的值发生变化时，data.name就会跟着发生变化，而data.name变化了{{名称}}的地方也会跟着变化。

v-model是一种双向绑定，那么也就是说，你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input，textarea，select这些表单元素上。

V-绑定和V型混用

有一些情况我们需要V-绑定和V-模型一起使用这个时候如果不留神，就会搞乱状况，分不清哪里应该怎么控制举个栗子。：

<input：value =“name”v-model =“body”>

上面就是一个栗子.data.name和data.body，到底谁跟着谁变呢？甚至，它们会不会产生冲突呢？

实际上它们的关系和上面的阐述是一样的，V-结合产生的效果不含有双向绑定，所以：值的效果就是让输入的值属性值等于data.name的值，而V模型的效果是使输入和data.body建立双向绑定，因此首先data.body的值会给输入的值属性，其次，当输入中输入的值发生变化的时候，data.body还会跟着改变。

现在的问题是，当这两个一起使用的时候，谁都优先级高？谁会无效？实验证明，V模型将会被使用，V绑定这个时候无效了，因为它正好绑定在值属性上，如果绑在其他属性上v-绑定是不受影响的。在这种情况下，v-绑定失效，即使你修改data.name，输入里面不会有任何变化。

这也说明，v-model建立的双向绑定对输入型元素输入，textarea，选择等具有优先权，会强制实行双向绑定，如果你愿意的话。

这说明，在单独的输入中，同时使用v型绑定和V-模型是没有必要的，虽然不会造成冲突。

注意上面我说道“单独”，也就是说，在一组输入中，它们又要另当别论。一组输入包括单选组，复选组，下拉选项，下拉选项组。

<label for =“value in options”> <input type =“checkbox”：value =“value”v-model =“selected”> </ label>

在数据中，它们是这样的：

数据：{选项：[1，2，3，4，5]，选中：[]，}

一组复选框，或者一组下拉选项组，也就是select mutiple =“true”的情况，它们的结果是一个数组，而非单个值，因此data.selected是一个数组，当一个选项被选中之后，这个选项的值值会被加入到data.selected中（不是按选项里面的顺序，而是操作过程中的逻辑）这个时候：值就是有效的，因为它表示把选项数组中对应的选项值传递给值，并不是双向绑定的意思，而只是传值过去（当然，当选项中对应的值发生变化时，值值也会变化）。相当于说，v-绑定负责值的值，v -model负责选中状态。当然，v模型是双向绑定，界面上你去勾选会影响data.selected的值，你在程序中操作了data.selected，也会反过来影响界面.V模型影响的是勾选效果，而v-绑定影响的是值（实际上，v绑定虽然只是影响值，但是也会影响勾选效果，比如本来一个选框是被勾选的，通过V-绑定绑 值发生了变化，那么新来的值就不会在data.selected中，这个选项就不会被勾选。如果没有被勾选，改变后的值又在data.selected中，那又会被勾选上。）

注意，只有当类型= “复选框” 是确定的情况下，才会让上述情况生效，类型值不能是动态值，因为V型模型被多次绑定同一个变量时，需要去检查输入值，而如果这个时候类型是动态的，比如用：类型= “类型” 进行动态绑定，就会导致模板编译报错。

V模型其实是V-绑定和V系列的语法糖

这是VUE官方文档中特别指出的，在阅读到这一句之前，我还对此很模糊，当阅读到：

<input v-model =“something”>其实是<input v-bind：value =“something”v-on：input =“something = $ event.target.value”>的语法糖

时，这种认识上的模糊就被消除了。

我们这篇文章没有讲到v型上，它其实就是一个事件绑定器我们仔细阅读一下。<input v-bind:value="something" v-on:input="something = $event.target.value">，发现它由两部分组成：V-绑定：值和V-上：输入，必须是值属性和输入事件，否则也不会等价于v型，而且输入事件里面，正好是东西等于当前输入值。

真因为这一原理，V模型瞬间就不再难理解了。

小结

总之，要区分V-绑定和V型，只需要记住三句话：

1. v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用;

2. v-model是双向绑定，基本上只用在表单元素上;

3.当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需要区分这个元素是单个的还是一组出现的。