声明与渲染

1.简洁的模板语法来声明式地将数据渲染进 DOM 的系统

    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'I like Vue',
            }
        })
    </script>

2.绑定元素特性

    <div id="app">
        <!-- 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致 -->
        <span v-bind:title="message"> 
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message: '页面加载于' + new Date().toLocaleString()
            }
        })
        app.message = '新消息'; /* 绑定了 title 特性的 HTML 已经进行了更新 */
    </script>

条件与渲染

1.v-if 指令控制切换一个元素是否显示

    <div id="app2">
        <!-- 不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构 -->
        <p v-if="seen">现在你看到我了</p>
    </div>
    <script type="text/javascript">
        var app2 = new Vue({
            el:'#app2',
            data:{
                seen: true
            }
        })
        // app2.seen = false 隐藏
    </script>

2.v-for 指令可以绑定数组的数据来渲染一个项目

    <div id="app-2">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app-2',
            data: {
                todos:[
                    {text: '学习JavaScript'},
                    {text: '学习vue'},
                    {text: '这是个牛项目'}
                ]
            }
        })
        app2.todos.push({ text: '新项目' })
    </script>

处理用户输入

1.v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

    <div id="app-3">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <script type="text/javascript">
        var app3 = new Vue({
            el: '#app-3',
            data:{
                message: 'Hello Vue.js'
            },
            methods:{
                reverseMessage: function(){
                    // 先拆分成字符串数组，再反转，再重组成字符串
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>

Hello Vue.js 变成 sj.euV olleH

2.v-model 指令实现表单输入和应用状态之间的双向绑定

    <div id="app-3">
        <p>{{message}}</p>
        <input v-model="message"/>
    </div>
    <script type="text/javascript">
        var app3 = new Vue({
        el: '#app-3',
        data: {
            message: 'Hello Vue!'
            }
        })
    </script>

组件化应用构建

任意类型的应用界面都可以抽象为一个组件树。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

    <!-- 1.在 Vue 中注册组件 -->
    <script type="text/javascript">
        Vue.component('todo-item',{
            template: '<li>这是一个代办项</li>'
        })
        var app = new Vue(...);
    </script>
    <!-- 2.用它来创建一个组件模板 -->
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item>测试</todo-item>
    </ol>
    <!-- 3.修改一下组件的定义，使之能够接受一个 prop -->
    <script type="text/javascript">
        Vue.component('todo-item',{
            // todo-item 组件现在接受一个"prop",类似于一个自定义特性。
            // 这个prop名为todo
            props: ['todo'],
            template: '<li>{{todo.text}}</li>'
        })
    </script>
    <!-- 4.使用 v-bind 指令将待办项传到循环输出的每个组件中 -->
    <div id="app-4">
        <ol>
            <!-- 现在我们为每个 todo-item 提供 todo 对象,todo 对象是变量,即其内容可以是动态的。我们也需要为每个组件提供一个“key”。 -->
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>
    <script type="text/javascript">
        Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{todo.text}}</li>'
        })
        var app4 = new Vue({
            el:'#app-4',
            data:{
                groceryList:[
                    {id:0, text:'蔬菜'},
                    {id:1, text:'奶酪'},
                    {id:2, text:'其他食物'}
                ]
            }
        })
    </script>

结语：应设法将应用分割成更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。