vue中的指令——内置指令

什么是指令

指令是带 v- 前缀的特殊属性，其值限定为单个表达式。

vue提供了少量指令供大家使用，在一定程度上简化了开发过程。当然除了内置指令，还有自定义指令，本篇就是只对内置指令进行讲解。

内置指令

v-show指令

v-show指令的作用是根据表达式的值的真假，来显示和隐藏HTML元素

    <div id="father">
        <!-- v-show -->
        <p v-show='flag'>这个是v-show指令</p>
        <p v-show='flag1'>这个是v-show指令</p>
    </div>
     <script>
        let vm = new Vue({
            el: "#father",
            data: {
                flag: true,
                flag1:false
            }
        })
    </script>

在使用v-show指令时，当表达式的值为true时则表示显示HTML元素，当表达式的值为false时则表示隐藏HTML元素运行，效果图如下：

v-if/v-else-if/v-else指令

v-if/v-else-if/v-else指令是用于实现条件判断的

    <div id="father">
        <!-- v-if/v-else-if/v-else  -->
        <div>
            <p v-if=" a === 'a'">这个是v-if指令</p>
            <p v-else-if="a === 'b'">这个是v-else-if指令</p>
            <p v-else>这个是v-else指令</p>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                a: 'c'
            }
        })
    </script>

在使用v-if等指令时，根据表达式进行判断，当表达式的值为true时才会执行，效果图如下：

v-for指令

v-for指令是通过循环的方法渲染一个列表，循环对象可以是对象和数组

    <div id="father">   
        <!-- v-for -->
        <ul>
            <li style="color:red">通过v-for指令遍历数组</li>
            <li style="color:red">只获取数据</li>
            <li v-for="item in arr">{{ item }}</li>
            <li style="color:red">获取数据和循环次数</li>
            <li v-for="(item,index) in arr">下标{{ index }}，对应的数据{{ item }}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                arr: [1, 2, 3, 4, 5, 6, 7, 8]
            }
        })
    </script>

上列实例是为数组进行循环，v-for指令的表达式中可以有两个参数，分别表示数据和索引，效果图如下：

    <div id="father">   
        <!-- v-for -->
        <ul>
            <li style="color:red">通过v-for指令遍历对象</li>
            <li style="color:red">获取数据</li>
            <li v-for="item in obj">{{ item }}</li>
            <li style="color:red">获取数据，属性名，循环次数</li>
            <li v-for="(value,key,index) in obj">属性名：{{ key }}，对应的数据：{{ value }}，第{{ index+1 }}次循环</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                obj: {
                    name: "admin",
                    sex: "男",
                    age: 18
                }
            }
        })
    </script>

上述实例是对对象进行循环，表达式中可以有三个参数，分别表示属性值、属性名和索引，效果图如下：

v-bind指令

v-bind指令是更新HTML元素的属性。

    <div id="father">   
        <!-- v-bind -->
        <a v-bind:href="url">跳转到百度</a>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                url: "http://baidu.com"
            }
        })
    </script>

在页面上点击a标签就会跳转到百度首页，因为v-bind指令更新的a标签中href属性的值

v-model指令

v-model指令是用在表单、和元素上创建双向数据绑定

    <div id="father">   
        <!-- v-model -->
  <input type="text" v-model="input_value" name="" id="">
        <p>
            当修改input输入框值时，input_value的值也被修改为 <span style="background-color: red;">{{ input_value }}</span>
        </p>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                input_value: "v-model指令"
            }
        })
    </script>

在上述实例中，输入框的值随input_value值的改变，而input_value值也随输入框的值改变，这就是双向的数据绑定，它们相互影响，

v-on指令

v-on指令是用于监听DMO事件，并在触发的时候运行一些JavaScript代码

    <div id="father">   
        <!-- v-on -->
        <input type="button" value="单击事件" @click="greet('普通单击事件')">
        <input type="button" value="鼠标左键单击事件" @click.left="greet('鼠标左键单击事件')">
        <input type="button" value="鼠标中键单击事件" @click.middle="greet('鼠标中键单击事件')">
        <input type="button" value="鼠标右键单击事件" @click.right="greet('鼠标右键单击事件')">
        <input type="button" value="鼠标右键单击事件" @click.right="greet('鼠标右键单击事件')">
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            methods: {
                greet(event) {
                    console.log(event);
                }
            }
        })
    </script>

这个v-on指令只写一点比较基础的部分，其实v-on的用法不止这些，我们在这里就不一一讲解了，大家有需要可以自己去了解

v-text指令和v-html指令

v-text指令是用于更新元素的文本内容

v-html指令是更新元素的innerHTML

    <div id="father">   
        <!-- v-text -->
        <p v-text="p_text"></p>

        <!-- v-html  -->
        <p v-html="p_html"></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                p_text: "这是v-text指令",
                p_html: "<span style='color:red'>这是v_html指令</span>",
            }
        })
    </script>

我们通过v-text和v-html显示内容，并且在页面中通过控制台更新了页面元素，看具体效果图

v-pre指令和v-once指令

v-pre指令是跳过这个元素和它的子元素的编译过程，当子元素也挂载了vue实例则该子元素不受影响，该指令不需要表达式。

v-once指令是让元素或组件值渲染一次，该指令不需要表达式

    <div id="father">   
        <!-- v-pre -->
        <p v-html="p_html" v-pre></p>

        <!-- v-once -->
        <p v-once v-text="p_once"></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#father",
            data: {
                p_html: "<span style='color:red'>这是v_html指令</span>",
                p_once: "这是v_once指令"
            }
        })
    </script>

当元素被v-pre修饰时，该元素的所有操作都会跳过，不会进行任何处理。而被v-once指令修饰时，该元素只会渲染一次，当值有所改变时也不会重新渲染