再回顾下vue的常见指令吧

873 阅读2分钟
v-pre

v-pre可以使页面元素不经过vue语法处理,直接输入到页面上

 <div v-pre>{{'a'}}</div>

如果没有添加该指令,显示应该是 a , 添加后显示为{{ 'a' }}

v-cloak

Vue页面的加载次序是先加在页面的dom,然后直接js脚本,js告诉页面被哪些dom被接管,挂载,然后对dom进行值的更新,那么在js接管dom之前, 页面上vue的标签会存在一个空档期,这个时候页面上显示的是vue的信息将原本的输出,这样会显得不太友好,即使这段时间很短。

解决办法:通过v-clock配合style使用,

[v-cloak] { display:none;}

初始化的时候将v-cloak的标签隐藏,当js接管页面后,v-clock会消失, 不会影响数据的加载

这个属性一般用的不是太多,当使用单文件.html时候会用到v-once

数据永远显示第一次获取的值,后面不对该值进行更改

v-html

后台给的如果是html,可以通过v-html来渲染 ,等价于innerHTML

使用v-html和innerHTML一样, 需要注意值的来源,必须是可信任的值,防止XSS攻击

比如提交一段代码

<img src="" onerror="while(1){alert(1)}" >

比如上面的代码被提交到服务端, 然后渲染到页面, 页面将死循环,无法打开

v-text

将文字插入到dom元素中等价于 innerText,不同于插值表达式的地方, v-text将dom元素中的内容直接替换而不是追加内容。

v-if

用于dom元素的条件判断

<template v-if="flag">
  <div>content1</div>
  <div>content2</div>
</template>

template 标签🏷️,在渲染后不会存在

v-else

配合v-if用于对于dom元素的判断,比如用于显示隐藏,注意在v-if和v-else中间不要放其他的dom元素, 否则不生效。

v-else-if

配合v-if,v-else使用,用于多条件判断,中间也不能放其他dom元素

v-show

功能和v-if差不多,可以用来控制显示和隐藏,本质上还是有区别的,v-show是控制的css的style是显示还是隐藏,但v-if是如果是隐藏,被控制的那个dom是会消失掉的变成一个注释, 而不是

display:none;

第二个区别:如果v-show用在template上是不生效的!

🚬每天分享一点点, 欢迎大家讨论, 共同学习, 有不对的地方,欢迎指出🚬