前言

Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。

常用的Vue.js内置指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令
• v-model指令
• v-once指令

v-if指令

——条件渲染指令，根据表达式的真假删除和插入元素。

基本语法：

v-if="expression"

例：

       <div id="app">
        <h2>Hello Vue!</h2>
        <p v-if="flag1">Hello World!</p>
        <p v-if="flag2">Not Found 404</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag1: true,
                flag2: false
            }
        })
    </script>

页面显示：

 

v-show指令

——条件渲染指令，根据表达式的真假删除和插入元素。

同为条件渲染指令，它和v-if指令的区别见 v-if和v-show指令及其区别 。

基本语法：

v-show="expression"

例：

  <div id="app">
        <h2>Hello Vue!</h2>
        <p v-show="flag1">Hello World!</p>
        <p v-show="flag2">Not Found 404</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag1: true,
                flag2: false
            }
        })
    </script>

页面显示结果：

 

v-else指令

——使用v-else指令可以为v-if或v-show添加一个“else块”。

————v-else元素必须跟在v-if元素后面，否则它不能被识别。

例：

    <div id="app">
        <h2>Hello Vue!</h2>
        <p v-if="flag1">Hello World!</p>
        <p v-else="flag2">Not Found 404</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag1: true,
                flag2: true
            }
        })
    </script>

页面显示结果：

 

v-for指令

——基于一个数组渲染一个列表。

基本语法：

v-for="item in items"

其中，items是一个数组，item是当前被遍历的数组元素。

遍历数组示例：

<!-- 遍历数组 -->

    <div id="app">
        <!-- 1、在遍历过程中，没有使用索引值 -->
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>

        <!-- 2、在遍历过程中，获取索引值 -->
        <ul>
            <li v-for="(item,index) in items">{{ index }}-{{ item }}</li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: ['Tom','Jerry','Tomas','Jack']
            }
        })
    </script>

页面显示：

遍历对象示例：

<!-- 遍历对象 -->

    <div id="app">
        <!-- 1、在遍历过程中，如果只是获取一个值，那么获取到的是value -->
        <ul>
            <li v-for="value in obj">{{ value }}</li>
        </ul>
        <hr>

        <!-- 2、在遍历过程中，获取key和value -->
        <ul>
            <li v-for="(value,key) in obj">{{ value }}-{{ key }}</li>
        </ul>
        <hr>

        <!-- 3、在遍历过程中，获取key、value和index -->
         <ul>
            <li v-for="(value,key,index) in obj">{{ value }}-{{ key }}-{{ index }}</li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                obj: {
                    id: 1001,
                    name: 'Tom',
                    age: 18
                }
            }
        })
    </script>

页面显示：

v-bind指令

——绑定元素的属性并执行相应的操作，动态绑定。

v-bind:style示例：

    <div id="app">
        <p v-bind:style="{fontSize:'40px',color:'red'}">{{ message }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'v-bind:style用法'
            }
        })
    </script>

页面显示结果：

动态绑定a元素的href属性示例：

​
    <div id="app">
        <a v-bind:href="link">点击前往Vue官网</a>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                link: "Vue.js"
            }
        })
    </script>​

页面显示结果：

动态绑定img元素的src属性示例：

    <div id="app">
        <img v-bind:src="imgUrl">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                imgUrl: '../images/01.png'
            }
        })
    </script>

页面显示结果：

v-on指令

——监听DOM事件，并执行相应的操作。

————有两种调用方法：绑定一个方法或使用内联语句。

v-on绑定一个事件示例：

      <div id="app">
        <h2>{{ counter }}</h2>
        <button v-on:click="increase" style="font-size: 30px;">&nbsp;+&nbsp;</button>
        <button v-on:click="decrease" style="font-size: 30px;">&nbsp;-&nbsp;</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: {
                increase: function(){
                    if(this.counter<5)
                    this.counter++;
                },
                decrease: function(){
                    if(this.counter>0)
                    this.counter--;
                }
            }
        })
    </script>

页面显示结果：

 

v-on绑定多个事件示例：

     <div id="app">
        <div v-on="{
                    click: myClick,
                    mouseenter: mouseIn,
                    mouseleave: mouseOut
                }"
              style="width: 150px;height: 150px;background-color: darksalmon;"
        ></div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                myClick: function(){
                    console.log('鼠标点击该区域')
                },
                mouseIn: function(){
                    console.log('鼠标进入该区域');
                },
                mouseOut: function(){
                    console.log('鼠标离开该区域');
                }
            }
        })
    </script>

页面显示结果：

v-model指令

——实现数据和视图的双向绑定。

v-model其实是一个语法糖，本质上它包含两个操作：v-bind绑定一个value属性和v-on给当前元素绑定input事件。

例：

    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message" />
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            }
        })
    </script>

页面显示结果：

从页面显示结果可以看出，当改变文本框中的值时，p标签内容也会被相应地更新。

反之同理，如果通过浏览器控制台改变p标签内容的值，文本框中的值也会被相应更新，页面显示结果如下：

v-once指令

——让元素或组件只渲染一次，一旦绑定，数据就不会改变。

例：

    <div id="app">
        <p v-once>{{ message }}</p>
        <p>{{ message }}</p>
        <input type="text" v-model="message" />
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            }
        })
    </script>

页面显示结果：

通过和v-model指令的对比可以看出v-once指令的作用。