Vue的几个内置指令

H-jing 2022-09-23 08:09:00 阅读数:487

vueCSDN指令内置technology-development

Vue的几个常见内置指令

准备的vue实例

<script> new Vue({
 el:'#root', data:{
 name:'卢洋洋', str:'<h3>你好呀!</h3>', n:1 } }) </script>

v-text

<div>哈哈哈!{
{name}}</div>
<div v-text="name">哈哈哈</div>

v-text 也可以实现把数据挂载到相应位置内,不同的是,它不好拼接字符串,使用v-text会把该节点内所有内容替换掉, 还是推荐使用插值语法。
效果如图:

在这里插入图片描述

v-html

<div v-text="str"></div>
<div v-html="str"></div>

效果如图:
在这里插入图片描述

v-html 是可以解析 html 标签的,但是v-text就不行
v-html 也是会把节点中内容全部替换的,与v-text类似

一般情况下尽量不要使用v-html,这是个危险的行为,vue也不希望你这么干
主要就是因为——XSS攻击,恶意网站服务器获取到cookie,相当于拿到了你的账号密码。

v-cloak

<style> [v-cloak]{
 display: none; } </style>
<h2 v-cloak>{
{name}}</h2>

样式锁
v-cloak配合CSS

可以解决js阻塞问题,例如网络较慢时
访问在线的 js 文件,网速慢,容器结构已经显示,却还没有被渲染
可以通过这个 v-cloak 属性,该属性没有值
设置属性样式,结构实际上已经有了,但是没有被渲染,此时样式把结构隐藏
当挂载上内容之后,标签内的v-cloak会被自动移出,自然就失去了display:none的样式
最终效果就是:无论网络多慢,都能做到,只有当被渲染的时候,才显示结构内容,
否则就是一片空白,不会给用户看到一堆没有被渲染的结构语法,然后又突然刷出一堆内容(闪屏)

v-once

<h2 v-once>n的值是:{
{n}}</h2>
<h2>n的值是:{
{n}}</h2>
<button @click="n++">点我n+1</button>

v-once 没有值
使用这个内置指令的节点:初次渲染后,就视为静态内容
即使该节点的数据改变,也不会引起内容的改变

例如:
我点击 按钮——效果就是,写了v-once指令的节点,始终不变,没有使用的则正常显示

如图:

在这里插入图片描述

v-pre

<h2 v-pre>Vue其实很简单</h2>
<h2 v-pre>n的值是:{
{n}}</h2>
<button @click="n++">点我n+1</button>

这个指令就很简单了
v-pre 它也是没有值的指令

作用:

  1. 跳过其所在节点的编译过程
  2. 利用它跳过一些不需要编译,渲染的节点,不含有指令语法,插值语法的节点,可以加快编译

所以:

插值语法未编译,而不需要编译的字符串,完全不受影响
在这里插入图片描述

版权声明:本文为[H-jing]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/weixin_45840857/article/details/126926894