Vue中的模板语法

Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。

一，插值的几种方式
1，文本插值，使用双大括号{{}}

 js代码：
                    var vm = new Vue({
                        el:"#app",
                        data:{
                            text:"文本"
                        }
                    })
  html代码：
                    <div id="app">{{text}}</div>  // 文本

2，原始html
双大括号会将数据解析成普通文本，而不是html代码。为了输出真正的html，需要使用 v-html指令
举例：

                js代码：
                    var vm = new Vue({
                        el:"#app",
                        data:{
                            orihtml:"<span style='color:red'>红色</span>"
                        }
                    })
                html代码：
                    <div id="app" v-html="orihtml"></div>  // 红色
                    <div id="app">{{orihtml}}</div>  // <span style='color:red'>红色</span>

3，属性
双大括号语法不能作用到属性上，这种情况使用指令:v-bind
举例：

                <ul v-for="item in category" v-bind:key="item.id">
                    <li>{{item.name}}</li>
                    <li>{{item.description}}</li>
                </ul>
               // 动态的为key绑定一个属性，这个属性为item.id 
                //v-bind具有简写形式
                //    <ul :key="item.id"></ul>

4，事件
html代码：

<div v-on:click="foo">点击执行</div>
//v-on具有缩写形式 <div @click="foo">点击执行</div>

js代码：

                methods:{
                    foo(){
                        console.log("hello vue")
                    }        
                }

JavaScript表达式

            {{1+1}}
            {{num + 1}}
            {{ ok ? 'YES' : 'NO' }}

二，指令
带有v-前缀的特殊属性。指令的职责是：当表达式的值发生改变时，将其产生的连带影响，响应式的作用于dom。

         v-for
            遍历渲染
            举例
        <div v-for="item in list"></div>
       
           
          v-if v-else v-else-if
            条件渲染
            举例：
            <h1 v-if="exp">Vue is awesome!</h1>
           <h1 v-else>Oh no</h1>
                **注意**：是否能看到文本内容，取决于exp值的真假,
                当exp返回true时h1的内容会被渲染，否则渲染v-else指令中的内容
                v-if可以单独使用

      v-show:
          条件性渲染某块内容，但是v-show仅仅是切换元素的display属性，
          元素始终都会被渲染，v-show不支持template元素 

     **注意：**：
          v-if 与 v-show
            v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
            v-if是惰性的，如果在初始渲染时条件为假，他就什么也不做，直到条件第一次变为真的时候，才会渲染条件块。
            v-show不管初始条件是真是假，元素总会被渲染，并且只是简单的基于css进行切换；
            v-if的切换开销高，v-show的初始渲染开销高

            注意： 频繁的切换，使用v-show比较好，条件很少改变时，使用v-if比较好。


                
        v-bind
            v-bind指令可以用来响应式更新html属性，属性绑定
            v-bind:key='item.id'
            v-bind:title='title'
            **注意**： v-bind可以简写
            :key='item.id'
            :title='title'
            
        v-on
            事件绑定，用于监听dom事件
            举例：
            
                <a v-on:click="handler">百度</a>
            **注意**：v-on可以简写
                <a @click="handler">百度</a>

           v-model
                 双向数据绑定，一般应用在表单元素上
            举例：
                v-model="form.title"