VUE的基础语法（二）

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

　　例如{{name}}，如果只想插入一次就用<span v-once>{{name}}</span>;

每个通过vue绑定的属性都是返回json，所以这里面可以写表达式，但是不能写语句。

一.VUE指令

1.v-text    更新元素的textcontent

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2.v-html　　更新元素的innerhtml。（内容按普通html插入，不会作为Vue模板进行编译，只在可信内容上使用，永不用在用户提交的内容上）

<div v-html="html"></div>

3.v-show　值为布尔值true或false，来切换元素的display值

4.v-if   v-if与v-show的区别在于v-if的元素及数据绑定/组件被销毁并重建，而v-show只是改变display值，v-else以及v-else-if同上

5.v-for   基于源数据多次渲染元素或模板块，必须使用特定语法alias in expression，为当前遍历的元素提供别名。

    <div id="app">
        <div v-for="(item,index) in list">{{item.name}}--{{index}}</div>
　　　　　<--这里面item代表源数据里面的每个数据，这里支持第二个参数为当前项的索引,这里也可以用of来替代in           in是代表遍历属性，of表示遍历值-->
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                list:[
                    {name:"bgg"},
                    {name:"xiongmao"}
                ]
            }
        })
    </script>

 6.v-on　　绑定监听事件，事件类型由参数指定，用在普通元素上面只能监听原生DOM事件，用在自定义组件上面可以监听子组件触发的自定义事件，在监听原生Dom事件时，方法以事件为唯一的参数，如果使用内联语句，只可以访问一个$event属性v-on:click="handle('ok', $event)"         ------------重点--------------

-------------------修饰符--------------------------------

.stop    调用event.stoppropagation()事件

.prevent    阻止默认事件，调用event.preventdefault();

.capture       添加侦听事件的时候使用capture模式

.self 　　　　只当事件是从侦听器绑定的元素本身触发时才回调

.{keyCode |keyalias}　　　只当事件是从侦听器绑定的元素本身触发时才回调　

.native 　　　　监听组件根元素的原生事件

7. v-bind　　　　我们主要是使用v-bind来绑定标签的属性。

<div :style="{color:'red',fontSize:'100px'}">123</div>

注意style里面是一个json对象，所以一定要加花括号

<div id="app-1" v-bind:style="[bgg,name]">
            {{some}}
            <div :style="{color:isred}">123</div>
           <p :style="{color:'red'}">这是一个p标签</p>
            
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1=new Vue({
                el:"#app-1",//注意Vue注册要写在前面，实例化要写在后面，要不会报错
                data:{
                    some:"这是一个div",
                    bgg:{
                        fontSize:"100px",
                        color:"red"
                    },
                    name:{
                        fontSize:"20px"
                    },
                    isred:'blue'          //这里是字符串拼接的方式，所以一定要注意单引号跟双引号的区别
                }
            })
        </script>

 8.v-model     属于表单的双向绑定，主要用在input，select，textarea，components上面

1.     .lazy取代input的监听change事件

2.     .number将字符串转化为数字

3.     .trim输入首尾空格过滤

 9.v-pre　　　　跳过这个元素和它的子元素的编译过程。可以用来现实原始的Mustache标签，跳过大量的没有指令的节点会加快编译

<span v-pre>{{ this will not be compiled }}</span>

 10.v-cloak　　这个指令保持在元素上直到关联实例结束编译。如果和css规则一起使用，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。可以用来调试

<div v-cloak>
  {{ message }}
</div>
[v-cloak] {
  display: none;
}

11.v-once　　　只渲染元素和组件一次。随后的重新渲染元素/组件及其所有的子节点将被视为静态内容并跳过。可以优化更新性能。