MVVM模式其自身是实现了数据的双向绑定的,在Vue.js中我们可以通过指令v-model来实现数据双向绑定。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> v-model </title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"> </div> <script> // 创建Vue的实例 let app = new Vue({ el: '#app', data: { message: 'Hello Vue !' } }) </script> </body> </html>
新东西v-model,在Vue中这被称为指令,指令带有前缀v-表示它们是Vue.js提供的特殊属性。它们会在渲染过的DOM上应用特殊的响应式行为。当然,我们就把这指令当做是特殊的HTML特性(attribute)。