2023年7月18日发(作者：)

数据绑定的⽅法（单向、双向和⼀次性绑定）这两天学习了数据绑定这个地⽅知识点挺多的，⽽且很重要，所以，今天添加⼀点⼩笔记。前⾔感觉 vue 的很多⽅⾯的内容，都参考了 angular 的东西，数据绑定⽅⾯，更是⾚裸裸的“抄袭”。对照来看，更有助于我们学习和理解框架本⾝透露出来的思想，⽽⾮框架本⾝。⼀、单向绑定（⼀）Mustache 语法，双⼤括号 {{}}（html 内字符串绑定）

但是，这种双⼤括号语法，只能⽤于 html 内部的字符串，不能⽤于绑定 html 的属性（如 title、disabled、checked等），angular亦如是。（⼆）v-bind 指令（html 属性绑定）某些框架如 ⽀持在 html 属性上⾯使⽤双⼤括号语法，如 title={{title}}，但是如果像上⾯，在 的 html 属性上使⽤这种语法，框架本⾝就会报错，如下图所⽰：上⾯的报错，除了提⽰不能使⽤双⼤括号语法以外，还告诉我们可以使⽤ v-bind 或者 shorthand，也就是 v-bind 的缩写 :。这⼀点上，vue 还是和 angular 的 ng-bind ⾮常相似。⼀次性绑定原本 angular 不⽀持⼀次性绑定的，⽽过分的使⽤数据绑定，将严重影响应⽤性能，angular 中 bindonce 这个第三⽅模块解决了这个问题。⽽ vue 通过 v-once 实现了框架本⾝对⼀次性绑定的原⽣⽀持。## 不进⾏ html 转义出于安全考虑，默认的数据绑定，会进⾏转义操作，屏蔽掉 html 标签。使⽤ v-html 指令，可以实现对⽂本内容不转义输出。这⾥的输出会替换掉⽬标标签的 innerHTML 代码中 p 标签中原本的⽂本将被替换，angular 中也有类似的 ng-bind-html。双向绑定跟 angular ⼀模⼀样，双向绑定依赖于 v-model 指令。修改 textarea 中的内容的时候， {{input}} 将让内容同步更新到对应的div 元素中。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。