打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app-2"> <span v-bind:title="message">hello vue!</span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { message : 'vue.js' } }) </script> </body>将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致（打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。）
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app-3"> <span v-if="seen">你可以看到我</span> </div> <script> var app3 = new Vue({ el: '#app-3', data: { seen : true } }) </script> </body>控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <ul id="app-4"> <li v-for="todo in todoList"> {{ todo.text }} </li> </ul> <script> var app4 = new Vue({ el: '#app-4', data: { todoList : [ {text: '学习 ps'}, {text: '学习 html'}, {text: '学习 css'}, {text: '学习 js'} ] } }) </script> </body>在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app-5"> <span>{{message}}</span> <button v-on:click = 'reverseMessage'>逆转消息</button> </div> <script> var app5 = new Vue({ el: '#app-5', data: { message: '明天你好' }, methods: { reverseMessage : function(){ this.message = this.message.split('').reverse().join(''); } } }) </script> </body>用户和你的应用进行交互，可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app-6"> <span>{{ message }}</span> <input type="text" v-model="message"> </div> <script> var app6 = new Vue({ el: "#app-6", data: { message: 'hello vue' } }) </script> </body> Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <ul id="app-7"> <ol> <todo-item v-for="item in dataList" v-bind:todo="item" > </todo-item> </ol> </ul> <script> Vue.component('todo-item',{ props: ['todo'], template: '<li v-bind:id="todo.id">{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { dataList: [ { id: 'li1', text: 'ps'}, { id: 'li2', text: 'html'}, { id: 'li3', text: 'css'}, { id: 'li4', text: 'js'} ] } }) </script> </body>子单元通过 props 接口与父单元进行了良好的解耦
具体文档 可参考 https://cn.vuejs.org/v2/guide/
