Vue.js 模版语法

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心只关注视图层。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM，指令带有前缀 v-，以表示它们是Vue 提供的特殊属性。

{{…}}(双大括号) 文本插入值 v-html 输出html 代码 v-bind HTML 属性中的值 v-if true 或false 决定是否插入值 v-on 监听DOM 事件，并对用户的输入进行相应。 v-model 双向数据绑定 {{ message | capitalize }} 过滤器 缩写 a v-bind:href=”url” —-a :href=”url” / v-on:click —@click

    <div id="app" v-bind:title="titleMessage">        {{message}}        <p v-if="seem">如果true 可见，false 隐藏</p>        <label for="r1">change background</label>        <input type="checkbox" id=r1 v-model="check">        <br><br>        <div v-bind:class="{'changeColor':check}">            add background        </div>        <!-- Vue.js 提供完全的JavaScript 表达式支持 -->        {{message.split('').reverse().join('')}}        <!-- v-model 双向绑定 -->        <br>        <input  v-model="modelMessage"><br>        {{modelMessage}}        <button v-on:click="reverseMessage">reverse</button>    </div>    <script>        new Vue({            el: '#app',            data:{                message: "Hello Vue.js",                modelMessage: "hello",                titleMessage: "loding "+new Date(),                seem:true,                check:false            },            methods:{                reverseMessage:function(){                    this.modelMessage = this.modelMessage.split('').reverse().join('')                }            }        })    </script>

组件化应用构建

组件系统是Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含合通常可复用的组建构建大型应用。

    <div id="app">        <ol>            <todo-item            v-for="item in groceryList"             v-bind:todo="item"            b-bind:key="item.id"            ></todo-item>           </ol>    </div>    <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>

props 接口实现了与父单元很好的解耦