`v-` 指令

在vue中，指令是带有“v-”前缀的特殊特性，作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM；将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。对于页面、数据的更为方便的输出。

1. 内容绑定 v-text、v-html

v-html 将内容以 html标签的形式渲染到页面（设置元素的 innerHTML），且会覆盖元素中内容。

v-text 将内容以普通文本的形式渲染到页面（设置标签内容 textContent），且会覆盖元素中内容。

二者的区别： v-text 指令无论内容是什么，都只会解析成文本；v-html 指令如果内容中有 html 结构，则会自动解析为标签。

<div id="app">
    <!-- 插值表达式 -->
    <div>{{msg}}123</div>
       <!-- v-text -->
    <div v-text="msg">123</div>
       <!-- v-html -->
    <div v-html="msg">123</div>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        msg:"<h1>h1标签</h1>",
    }
})

v-text与插值表达式 {{}} 的区别： v-text 会覆盖元素中原本的内容；而插值表达式只有{{}}内部的值会被替换，其它内容则原封不动保留下来。

2. 事件绑定 v-on

Vue提供了 v-on: 事件绑定机制，可以简写为 @ 符号。

以click点击事件为例：通过 v-on 给按钮绑定点击事件，点击按钮调用show方法（方法后可带小括号，也可没有）。方法写在vue的 methods 属性中，methods 属性可以自定义当前vue实例所有可用方法。

<input type="button" value="按钮" v-on:click="show">
//简写
<input type="button" value="按钮" @click="show">

//methods属性
methods: {
    show: function () {
        alert("hello");
    }
}

3. 属性绑定 v-bind

v-bind vue提供的用于绑定属性的指令,绑定的属性中可以含有表达式，可简写为 :。

<input type="button" value="按钮" :title="msg+'123'">

常用来绑定 class 样式

3.1 数组形式 -类名以引号包裹，多个类以逗号拼接。

<div :class="['red','tw']">123456</div>

3.2 对象形式

<!-- 1.对象形式，对象属性的引号，可有可无 -->
<div :class="{'red':cl,tw:true}">123456</div> -->
<!-- 2.将样式定义到data中，通过属性绑定的形式，应用到元素 -->
<div :class="clObj">123456</div>

data: {
    cl:true,
    clObj:{'red':true,tw:true}
}

3.3 在数组中实现三元表达式

<div :class="['red',cl?'tw':'tlg']">123456</div>

3.4 数组中嵌套对象

<div :class="['red',{tw:cl}]">123456</div>

在数组中使用对象代替三元表达式，提高代码可读性

4. 表单元素绑定 v-model

使用 v-model 指令，可以便捷的设置和获取表单元素的值,实现表单元素和 Model 中数据的双向绑定。

    <div id="app">
        <input type="button" value="修改数据" @click="set">
        <input type="text" v-model="msg">
        <span>{{msg}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg:"vue",
            },
            methods:{
                set:function(){
                    this.msg="message";
                }
            }
        })
    </script>

如上图，初始数据为 msg:"vue"，通过 v-model 将数据绑定给输入框，输入框内的值也就变成了vue。

在改变输入框内的值时，span 标签内的 msg 数据也会跟着改变。

现在添加一个“修改数据”按钮，给按钮添加点击事件，在点击按钮时将数据的内容改为 message，点击按钮:

可以看到输入框中的数据也跟着变成了 message。上面的一系列操作就证明了，v-model 可以实现数据的双向绑定的，无论修改谁，都可以同步的更新。

5.显示切换 v-show v-if

v-if ：条件渲染。条件为真渲染元素，条件为假则不销毁。有较低的初始开销，较高的切换开销。v-if 可以和 v-else 组合进行使用。

v-show ：控制元素的 display 属性。有较高的初始开销,较低的切换开销。

如果涉及频繁的切换，推荐使用 v-show ，如果元素可能永远也不会被显示出让用户看到，则推荐使用 v-if 。

<div v-if="cl">v-if操控</div>
<div v-show="cl">v-show操控</div>

当 cl 值为 true 时

，当 cl 值为 false 时

6.列表渲染 v-for

data: {
    //数组
    list:[1,2,3],
    // 对象数组
    listo:[
        {id:001,name:"张三"},
        {id:002,name:"李四"}
    ],
    // 对象
    obj:{
        id:1,
        name:"Tom",
        gender:"男"
    }
}

在数据中有一个数组 list ，该然后获取数组中的第一个元素呢，可以使用{{this.list[0]}} ，但是如果要获取数组中的所有元素，就要

<span>{{this.list[0]}}{{this.list[1]}}{{this.list[2]}}...</span>

这样一遍又一遍的写是很麻烦的，vue 提供了一个 v-for 指令，可以用来循环遍历。它的语法结构是 v-for="item in items" ,其中 items 指的是源数据数组，item 是数组中每一个元素迭代的别名。

<span v-for="item in list">{{item}}</span>

数组中可以支持第二个参数，表示为索引。

<p v-for="(item,idx,i) in list">索引：{{idx}}---值：{{item}} </p>

v-for 也可以用来循环对象，循环对象时可以支持三个参数，分别为：值（item），键（key），索引（idx）。

<p v-for="(item,key,idx) in obj">索引:{{idx}} -- 键:{{key}} -- 值:{{item}} </p>

v-for 的循环对象还可以是数字

<span v-for="item in 3">这是第{{item}}次循环 </span>

vue的指令

v- 指令