盘点Vue基础指令

Vue.js 指令

本质上就是 HTML 自定义属性
Vue.js 的指令就是以 v- 开头的自定义属性

内容处理

v-once 指令

使元素内部的插值表达式只生效一次

<div id="app">
    <p>此内容会自动更改：{{ content }}</p>
    <p v-once>此内容不会随数据变化自动更改：{{ content }}</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        content: "内容文本"
    }
})
</script>

v-text 指令

元素内容整体替换为指定纯文本数据

<div id="app">
    <p v-text="content">此内容会被覆盖</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        content: "内容文本"
    }
})
</script>

v-html 指令

元素内容整体替换为指定的 HTML 文本

<div id="app">
    <p v-html="content">此内容会被覆盖</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        content: "<span>内容文本</span>"
    }
})
</script>

属性绑定

v-bind 指令

v-bind 指令用于动态绑定 HTML 属性

<div id="app">
    <p v-bind:title="title">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        title: "这是title属性内容"
    }
})
</script>

Vue.js 还为 v-bind 指令提供了简写方式

<div id="app">
    <p :title="title">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        title: "这是title属性内容"
    }
})
</script>

如果需要一次绑定多个属性，还可以绑定对象

<div id="app">
    <p v-bind="attrObj">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        attrObj: {
            id: 'box',
            title: '示例内容'
        }
    }
})
</script>

与插值表达式类似，v-bind 中也允许使用表达式

<div id="app">
    <p :class=" 'demo' + 3 ">标签内容</p>
    <p :class=" prefix + num ">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        prefix: 'demo',
        num: 5
    }
})
</script>

Class 绑定

class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存

<div id="app">
    <p v-bind:class="cls">标签内容</p>
    <p class="a" :class="cls">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        cls: 'x'
    }
})
</script>

对于 class 绑定，Vue.js 中还提供了特殊处理方式

<div id="app">
    <p :class="{ b: isB, c: isC, 'class-d': true }">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        isB: true,
        isC: false
    }
})
</script>

对于 class 绑定，Vue.js 中还提供了特殊处理方式

<div id="app">
    <p :class="[ 'a', {b: isB}, 'c' ]">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        isB: true
    }
})
</script>

Style 绑定

style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存
对于 class 绑定，Vue.js 中还提供了特殊处理方式

<div id="app">
    <p :style="styleObj">标签内容</p>
    <p style="width:100px;" :style="styleObj">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        styleObj: {
            width: "200px",
            hetght: "100px",
            border: "1px solid #ccc"
        }
    }
})
</script>

当我们希望给元素绑定多个样式对象时，可以设置为数组

<div id="app">
    <p :style="[ styleObj1, styleObj2 ]">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        styleObj1: {
            width: "200px",
            hetght: "100px"
        },
        styleObj1: {
            border: "1px solid #ccc",
            color: "bule"
        }
    }
})
</script>

渲染指令

v-for 指令

用于遍历数据渲染结构，常用的数组与对象均可遍历

<div id="app">
    <ul>
        <li v-for="item in arr"> {{ item }} </li>
    </ul>
    <ul>
        <li v-for="value in obj"> {{ value }} </li>
    </ul>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        arr: ["内容1", "内容2", "内容3"],
        obj: {
            content1: "内容1",
            content2: "内容2",
            content3: "内容3"
        }
    }
})
</script>

使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题

<div id="app">
    <ul>
        <li v-for="item in arr" :key="item.id"> {{ item }} </li>
    </ul>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
    el: "#app",
    data: {
        arr: [
            {
                id: 1,
                content: "内容1"
            },
            {
                id: 2,
                content: "内容2"
            }
        ]
    }
})
</script>

通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作

<div id="app">
    <template v-for="item in items">
        <span>标签内容</span>
        <span>标签内容</span>
    </template>
</div>

v-show 指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用

<div id="app">
    <p v-show="true">这个元素会显示</p>
    <p v-show="false">这个元素会隐藏</p>
</div>

<template> 无法使用 v-show 指令

v-if 指令

用于根据条件控制元素的创建与移除

<div id="app">
    <p v-if="false">这个元素不会创建</p>
    <p v-else-if="true">这个元素会创建</p>
    <p v-else="else">这个元素不会创建</p>
</div>

给使用 v-if 的同类型元素绑定不同的 key

处于性能考虑，应避免将 v-if 与 v-for 应用于同一标签