<div v-once>{{message}}</div> 他也是数据绑定，但是只绑定一次。要注意 v-once是加载div上的，所以整个div的所有绑定数据，都只会加载一次，再更新就不会变了，所以点击 button时，第二个div的数据并没有发生改变。

　　<div v-html="h1"></div> 是绑定HTML标签，注意 他可以直接绑定 HTML模板，但是这一堆HTML标签不能是多层嵌套的。什么意思呢，就是你之间绑定一段标签可以，绑定一个模板也可以，但是如果绑定一个模板，那这个模板内部不能再嵌套模板了。否则无法渲染的。上述代码就是直接导入了一个加了行内样式的h1标签，功能十分强大，比直接操作dom节点强太多了，效率是几何倍的增长。

　　（2） 其次是 v-bind

数据绑定篇 .aaa{ margin width height background-color .bbb{ margin width height background-color 数据绑定篇 ------------------------------------------------------------------------------------- Vue({ el:, data:{ myColor:, myWidth:100, myHeight:100, myClass:, mySrc:, func1:function(){ ) { ; , }else{ ; , } }, func2:function(){ ) { ; }else{ ; } }, func3:function(){ ) { ; }else{ ; } } } });

　　然后看一下效果：

　　那我们解析一下上面的代码。

　　v-bind 他是专门用来绑定属性的 ，主要用来操作元素的 class 列表和它的内联样式。这一点和AnjularJs的 ng-bind 是完全不同的，要注意！！！

　　<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div>  这是在直接绑定行内样式style。然后通过绑定点击函数，为各个比那两赋值，达到点击更改div样式的目的。

　　<div v-bind:class="myClass" onclick="app1.func2()"></div>  这个是直接绑定修改 class类名，在页内样式表中有我定义的 .aaa 和 .bbb 两个类名，通过动态修改class名修改样式，这也比 JQuery 直接操作dom节点快捷不少。

 　　<img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> 这是直接绑定属性，动态修改 img 的src 属性。达到点击图像显示不同的图像的效果。

这里要特别强调一下，v-bind 直接绑定的是属性，而不是样式 ，对于 img ，他的src是属性，但是对于 div ，width 啥的是样式，不是属性，所以 v-bind:width="100+'px'" 不好使.

　　至于 v-bind 属性绑定，也就常用用法也就这么多了。

　　（3）   v-model

　　用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

　　下面我们看一段代码：

数据绑定篇 .aaa{ margin width height background-color .bbb{ margin width height background-color 数据绑定篇 {{ myText }} ------------------------------------------------------------------------------------- 男女您选择了: {{ picked }} ------------------------------------------------------------------------------------- 好帅！你是我的男神！我爱你，飞哥！您对飞哥的评价: {{ names }} -------------------------------------------------------------------------- 亲飞哥向飞哥表白请飞哥吃饭真心话大冒险: {{ selected1 }} ------------------------------------------------------------------------------ 亲亲抱抱举高高你想和飞哥偷偷干些啥: {{ selected22 }} Vue({ el:, data:{ myText:"", picked:"", selected1:"", //这是复选列表的变量，函数 selected2:[], selected22:"", funcselected22:function(){ 　"); }, //复选框的函数,及其相关变量 checkedNames:[], names:"", funcCheckedNames:function(){ 　"); }

　　然后看一下效果：

　　然后解析一下这段代码。这里就不一一详细解释代码了，挑几个典型的详解，其他的便很简单了。

　　我们就以 多选按钮为例：

好帅！你是我的男神！我爱你，飞哥！

//这是复选列表的变量，函数 selected2:[], selected22:"", funcselected22:function(){ this.selected22 = this.selected2.join("　"); },