认识vue指令
vue的指令directive只是dom的行间属性,vue给这类属性赋予了一定的意义, 来实现特殊的功能,所有的指令都以v-开头
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
那么接下来我们好好看看Vue给我们提供了那些指令
1. v-text 指令
1.1 v-text指令的基本用法
- v-text 能展示对应data中数据内容，也能在数据基础上做运算
- 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>
注意指令(属性)的值虽然加了引号, 但是引号内不是字符串,而是表达式, msg是表达式中的变量,如果需要在表达式中使用字符串,需要再次添加引号, 但是要注意引号的冲突
所以第二个div的v-text指令是变量msg和字符串world做了一个简单的字符串拼接
显示结果:
image
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>
显示结果
image
通过示例,发现使用v-text标签内的数据全被覆盖了
v-text可以取代{{}} 它也有不好的地方就是会替换标签内的所有的内容,无论普通字符还是标签
Mustache语法只会在指定的地方编译内容
2. v-cloak 指令
{{}}这种插值符号在页面刷新的时候,会出现在页面上, {{}}插值表达式会闪烁,
v-cloak 解决闪烁(块)问题
2.1 v-cloak 指令的使用
第一步要给元素添加v-cloak
<div v-cloak></div>
第二步: 手动的给这个元素添加display:none;
[v-cloak]{
display:none;
}
了解一下,后期用不到
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>
显示结果
image
通过示例结果, 我们发现红色使用v-text指令的div并没有解析出数据中的h2标签
蓝色使用v-html指令的div,将数据中的h2解析成了标签
但是一定要注意,v-html指令一定要慎用, 可能会攻击,如果在数据里添加一个script标签也能识别,那么script里面就可能会添加攻击你的脚本.
所以如果要使用v-html指令,一定要是可信任的.不信任的会有问题
3.2 总结三种将数据渲染的页面的方法
- 虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是
{{}} -
{{}}最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，无法将html格式数据渲染，只能当字符串展示 -
v-text虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。 -
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>
示例在开始时,两个div显示的都是hello wrold,
但是3秒钟以后显示的结果如下
image
我们会发现未使用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>
显示结果:
image
使用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>
显示结果:
image
网友评论