Vue指令（在学习的过程中会继续补充）

Vue指令

1.v-text和mustache
v-text是将数据文本化，会把字符串变量的内容原封不动的显示在页面上。
mustache中可以写JavaScript表达式。
1.1相同点：
把数据原封不动的显示在页面上。
1.2不同点：
v-text会把标签里的所有内容用数据替换；
mustache语法只会把双花括号里的内容替换；
v-text使用的是自定义属性，如果说出错了，不会再页面上有莫名其妙的输出(双花括号的代码)。
2.v-html
将数据转为可被渲染在页面上的html元素。
3.v-bind
为dom元素绑定属性。

<div id="app">
        <p v-bind:id="val"></p>
        <p v-bind:style="ps">这是一个样式</p>
        <p v-bind:[a]="b"></p>
        <p :[a]="b"></p>
        <input type="button" value="测试" v-bind:disabled="isDis" >
    </div>

let vm = new Vue({
    el:"#app",
    data:{
       val:"hp",
       ps:"background-color: pink",
       a:"class",
       b:"cls",
       isDis:false
    }
});

4.v-once
数据只驱动一次。
5.v-show
将元素隐藏方式为dispaly，多使用在切换频繁的功能元素中。
6.v-if
第一个功能同样可以把元素隐藏或显示，不过其方式主要为删除或添加该元素，多使用在不频繁的功能中。
7.v-if,v-else-if，v-else
主要用于逻辑判断，可以试用行如下代码，体验效果。

<div id="app">
        <input type="button" value="涨一岁" v-on:click="fn()"><br/>
        <p>今年：{{age}}</p>
        <p v-if="age<18" >少年</p>
        <p v-else-if="age<=30" >青年</p>
        <p v-else-if="age<=50" >中年</p>
        <p v-else >老年</p>
    </div>

let vm = new Vue({
    el:"#app",
    data:{
        age:12
    },
    methods:{
        fn:function(){
            this.age++;
        }
    }
});

8.v-for
其主要功能是循环遍历：
(item,index) in arr如此遍历一个数组，可以获得数组内的值item，以及下标index；
(value,key) in obj如此遍历一个对象，可以获得对象的值value，以及键key；
(value,key,index) in obj如此遍历一个对象，可以获得对象的值value，以及键key和下标index；
遍历数组中的对象时，可在遍历后对mustach进行相关数据的选择和操作参考如下代码：

<div id="app">
      <ul>
            <li v-for="(goods,index) in goodslist">
                    <p>第{{index+1}}个商品：</p>
                    <p>商品编号：{{goods.id}}</p>
                    <p>商品名称：{{goods.name}}</p>
                    <p>商品价格：{{goods.price}}</p>
            </li>
        </ul>
    </div>

let vm = new Vue({
    el:"#app",
    data:{
        goodslist:[
                {
                    "id":"01002",
                    "name":"干脆面",
                    "price":2.5
                },
                {
                    "id":"01003",
                    "name":"火腿肠",
                    "price":1
                },
                {
                    "id":"01004",
                    "name":"卤蛋",
                    "price":2
                }
        ]
    },
    methods:{
        fn:function(){
            this.goodslist.push({
                    "id":"01005",
                    "name":"辣条",
                    "price":3
                });
        }
    }
});

9.v-on
用来绑定事件。