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

认识vue指令

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

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

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

1. v-text 指令

1.1 v-text指令的基本用法

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

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

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

显示结果:

v-text.png

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

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

    
    
    

        你好! 中国
    

    
    

        
我就是一个标题
    

显示结果

v-text2.png

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

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

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

2. v-cloak 指令

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

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

2.1 v-cloak 指令的使用

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

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

[v-cloak]{
    display:none;
}

了解一下,后期用不到

3.v-html 指令

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

3.1 v-html指令的基本使用

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

显示结果

v-html.png

通过示例结果, 我们发现红色使用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值得是只会初始化插值一次;当数据发生变化是,页面视图不会发生改变

    
    
{{msg}}

    
    
{{msg}}

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

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

v-once.png

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

5. v-pre指令

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

用法：

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

示例:

正常编译示例

   {{ msg }}

显示结果:

非v-pre.png

使用v-pre指令

    
    {{ msg }}

显示结果:

v-pre指令.png