1, 单向绑定
单向数据绑定的实现思路:
1 所有数据只有一份
2 一旦数据变化, 就去更新页面 (只有 data-->DOM, 没有 DOM-->data)
3 若用户在页面上做了更新, 就手动收集 (双向绑定是自动收集), 合并到原有的数据中.
2, 双向绑定
数据的双向绑定是 vue 实现的一大功能.
使用 v-model 指令, 实现视图和数据的双向绑定.
所谓双向绑定, 指的是 vue 实例中的 data 与其渲染的 DOM 元素的内容保持一致, 无论谁被改变, 另一方会相应的更新为相同的数据. 这是通过设置属性访问器实现的.
v-model 主要用在表单的 input 输入框, 完成视图和数据的双向绑定.
v-model 只能用在 < input>,<select>,<textarea > 这些表单元素上.
双向绑定的缺点: 不知道 data 什么时候变了, 也不知道是谁变了, 变化后也不会通知, 当然可以 watch 来监听 data 的变化, 但这复杂, 还不如单向绑定.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- </head>
- <body>
- <div id="app">
- <input type="text" v-model="message">
- <p>
- {{message}}
- </p>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- message: ''
- } // 欢迎加入全栈开发交流圈一起学习交流: 864305860
- }); // 帮助突破技术瓶颈, 提升思维能力
- </script>
- </body>
- </HTML>
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/d9203e92e438878a65f5beb63cf0e75b.html