v-model 指令

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
v-bind:title = “message” 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”
v-if 控制切换一个元素是否显示
v-for 指令可以绑定数组的数据来渲染一个项目列表
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定(改变其中一个值，另一个值也一起同步更新)

数据类是 data，动作类似 methods

相关组合代码demo：

<div id="app" v-bind:title="titleMsg" v-if="display">
        <label>{{ message }}</label>
        <input v-model="message">
        <ol>
            <li v-for="todo in todos"><span v-on:click="liclick">{{ todo.text }}</span></li>
        </ol>
    </div>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '字段名称',
            titleMsg : '页面加载于 ' + new Date().toLocaleString(),
            display:true,
            todos: [
              { text: '学习 JavaScript' },
              { text: '学习 Vue' },
              { text: '整个牛项目' }
            ]
        },
        methods:{
            liclick:function() {
                this.display = false
                // body...
            }
        }
    })  
    </script>

控制台模拟应用场景动态操作app对象即可实现dom变化：
输入 app.message = “123” ，message和绑定的input内容马上变成 123；
输入 app. display = false ，整个# app 的dom就被移除了；
输入 app.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。