#49 · open · 3 comments
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="ie=edge" http-equiv="X-UA-Compatible"> <title>Document</title> </head> <body> <div id="app"> {{message}} </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }) </script> </html> ```
`v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
```html <body> <div id="app"> <p>{{message}}</p> <input type="text" v-model="message"> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }) </script> ```
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="ie=edge" http-equiv="X-UA-Compatible"/> <title>Document</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <ol> <todo-item v-bind:key="item.id" v-bind:todo="item" v-for="item in groceryList"></todo-item> </ol> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } }) </script> </html> </body> </html> ```