vue.js数据绑定方法(单向、双向、一次性绑定)

这两天学习了很多vue.js数据绑定的知识，非常重要，今天就补充一点注意。

序

感觉vue很多方面都是指棱角分明的东西，数据绑定是赤裸裸的抄袭。相比之下，更有助于我们学习和理解框架本身所揭示的思想，而不是框架本身。

第一，单向绑定

(1)小胡子语法，双大括号{ { } }(HTML中的字符串绑定)

div id=' app ' p { { text } }/p/div script var app=new Vue({ El : ' # app '，data : { text : ' text content ' } })；/script但是，这种双大括号语法只能用于html内部的字符串，不能用于绑定html属性(如标题、禁用、选中等)。)，所以可以棱角分明。

(2) v-bind指令(html属性绑定)

div id=' app ' p title={ { title } }/p p v-bind : title=' title ' title属性绑定，html属性不能绑定在双花括号中。您只能使用v-bind指令/p p: title=' title' ": "是" v-bind"/p/div脚本var app=newvue ({el:' # app '，data : { title 3360 ' title content ' } })的快捷方式；/script有些框架，比如Ember.js，支持在html属性上使用双大括号语法，比如title={{title}}，但是如果像上面这样在vue.js的html属性上使用这个语法，框架本身就会报错，如下图所示：

上面的错误，除了暗示不能使用双大括号语法外，还告诉我们可以使用v-bind或者速记，也就是v-bind :的缩写。在这方面，vue与angular ng-bind非常相似。

一次性装订

div id=' app ' p v-once { { once } }/p/div script var app=new Vue({ El : ' # app '，data : { once : ' once content ' } })；app.once=“已更改内容”；/script原本在angular中不支持一次性绑定，但是过度使用数据绑定会严重影响应用性能。angular中的第三方模块bindonce解决了这个问题。Vue通过v-once实现了框架本身对一次性绑定的原生支持。

# #不要转义html div id='app' p v-html='html '不要转义绑定(直接输出html)/p/div脚本var app=newvue ({el:' # app '，data : { html 3360 ' div div element/div ' } })；/script出于安全考虑，默认数据绑定，会进行转义操作，屏蔽html标签。使用v-html指令，可以输出文本内容而不需要转义。这里的输出将替换目标标签的innerHTML代码中p标签中的原始文本，angular中有一个类似的ng-bind-html。

双向绑定

div id=' app ' div { { input } }/div text area v-model=' input '/text area/div script var app=new Vue({ El : ' # app '，data: { input: '双向绑定' } })；/script与angular完全相同，双向绑定依赖于v-model指令。在textarea中修改内容时，{{input}}会将内容同步更新到对应的div元素。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。