第五节:Vue指令:基本认识使用/v-text/v-html/v-cloak/v-once/v-pre

vue的指令directive只是dom的行间属性,vue给这类属性赋予了一定的意义, 来实现特殊的功能,所有的指令都以v-开头

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

那么接下来我们好好看看Vue给我们提供了那些指令

1. v-text 指令

1.1 v-text指令的基本用法

1. v-text 能展示对应data中数据内容，也能在数据基础上做运算
2. v-text 会把标签中的内容替换,类似于innerText

<div id="app">
    <!-- 将data 中的数据渲染在页面上-->
    <div v-text='msg'></div>

    <!-- v-text可以对data数据内容做简单的运算-->
    <div v-text='msg + "world"'></div>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:"hello"
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意指令(属性)的值虽然加了引号, 但是引号内不是字符串,而是表达式, msg是表达式中的变量,如果需要在表达式中使用字符串,需要再次添加引号, 但是要注意引号的冲突

所以第二个div的v-text指令是变量msg和字符串world做了一个简单的字符串拼接

显示结果:

1.2 v-text指令覆盖标签嵌套内容

我们有讲到v-text指令有点类似于innerText,所以在使用v-text指令的标签内不要添加任何内容, 因为会被覆盖,
示例如下:

<div id="app">
    <!-- 使用v-text标签中不能添加内容,会被覆盖 -->
    <!-- 使用v-text指令标签中添加普通字符 -->
    <div v-text='msg'>
        你好! 中国
    </div>

    <!-- 使用v-text指令标签中添加标签 -->
    <div v-text='msg +" " + "world"'>
        <h2>我就是一个标题</h2>
    </div>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:"hello"
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

显示结果

通过示例,发现使用v-text标签内的数据全被覆盖了

v-text可以取代{{}} 它也有不好的地方就是会替换标签内的所有的内容,无论普通字符还是标签

Mustache语法只会在指定的地方编译内容

2. v-cloak 指令

{{}}这种插值符号在页面刷新的时候,会出现在页面上, {{}}插值表达式会闪烁,

v-cloak 解决闪烁(块)问题

2.1 v-cloak 指令的使用

第一步要给元素添加v-cloak

<div v-cloak></div>
1

第二步: 手动的给这个元素添加display:none;

[v-cloak]{
    display:none;
}
1
2
3

了解一下,后期用不到

3.v-html 指令

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

3.1 v-html指令的基本使用

把html字符串当成html渲染.类似于innerHTML

<div id="app">
    <!-- v-text无法解析数据中的标签 -->
    <div v-text="msg"></div>

    <!-- v-html可以解析数据中的标签 -->
    <div v-html="msg"></div>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:"<h2>hello wrold</h2>"
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示结果

通过示例结果, 我们发现红色使用v-text指令的div并没有解析出数据中的h2标签

蓝色使用v-html指令的div,将数据中的h2解析成了标签

但是一定要注意,v-html指令一定要慎用, 可能会攻击,如果在数据里添加一个script标签也能识别,那么script里面就可能会添加攻击你的脚本.

所以如果要使用v-html指令,一定要是可信任的.不信任的会有问题

3.2 总结三种将数据渲染的页面的方法

1. 虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是{{}}
2. {{}} 最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，无法将html格式数据渲染，只能当字符串展示
3. v-text 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。
4. v-html 谨慎使用会出现xss攻击的风险

4.v-once指令,

平时我们使用Mustache语法,包括v-text,v-html指令渲染的页面都是具有响应式的, 当数据发生变化, 视图也会跟着改变

v-once属性不用设置值,使用{{}}插值符号插值,v-once值得是只会初始化插值一次;当数据发生变化是,页面视图不会发生改变

<div id="app">
    <!-- 使用v-once指令 -->
    <div v-once>{{msg}}</div>

    <!-- 未使用v-once指令 -->
    <div>{{msg}}</div>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello wrold'
        }
    })

    //  就是3秒以后  数据发生了变化,页面视图也不会有任何改变,
    setTimeout(() => {
        vm.msg = "你好 "
    }, 3000)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

示例在开始时,两个div显示的都是hello wrold,

但是3秒钟以后显示的结果如下

我们会发现未使用v-once指令的div在数据发生变化以后, 页面显示的结果也跟随数据发生了变化,但是使用了v-once指令的div只会在初始化的时候显示,显示之后就不会再随着页面的变化而变化了

5. v-pre指令

不编译指令,这个指令不需要表达式

用法：

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

示例:

正常编译示例

<div id="app">
   <span>{{ msg }}</span>
</div>

<script>
   var vm = new Vue({
       el: '#app',
       data: {
           msg:"hello world"
       }
   })
</script>
1
2
3
4
5
6
7
8
9
10
11
12

显示结果:

使用v-pre指令

<div id="app">
    <!-- v-pre指令不需要值 -->
    <span v-pre>{{ msg }}</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:"hello world"
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

显示结果: