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 接口实现了与父单元很好的解耦