Vue｜内置指令

清疚 2023-09-27 19:26 10阅读 0赞

![968f4c3a9001403aaa609f4e85ac2933.gif][]

> Vue的内置指令是带有v-前缀的特殊属性，它的作用是当表达式的值改变时将其一系列连带影响，响应地作用于DOM元素。  
> [推荐专栏：微信小程序实战开发专栏][Link 1]

###  ###

*  内置指令
 *   *  v-text指令
     *  v-html指令
     *  v-cloak指令
     *  v-once指令
     *  v-pre指令

# 内置指令 #

> 开始前的准备，在目录下创建文件夹及对应的页面如下

![在这里插入图片描述][29cb5f973a454065b0f11f52db380787.png]

> 创建好页面容器及对应的Vue实例

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>内置指令</title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>
    <body>
        
        <div id="root">
        </div>
        <script type="text/javascript">
            //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
            // 创建vue实例
            const vm = new Vue({
                el: '#root',
                //函数式
                data: function () {
                    return {
                        name: '摔跤猫子'
                    };
                }
            });
        </script>
    </body>
    </html>

## v-text指令 ##

> v-text指令作用是用于向其所在的节点标签渲染文本内容，使用方式如下

> 可以看到能够直接将在data中定义的name进行展示，但是原有标签中的hi，这个内容被直接覆盖

![在这里插入图片描述][feb149d46a92459f9e64fa5ac576842f.png]

> 它与差值语法的区别在于，v-text会将节点中的内容全部替换,而差值语法可以进行拼接

<div>hi，{
       {name}}</div>
            
            <div v-text="name">hi,</div>

![在这里插入图片描述][8caa64f2e9d04827a3fcbe93addeb2c2.png]

## v-html指令 ##

> v-html指令用于将html结构进行渲染，使用上述的v-text以及差值语法是不支持的，它只会将其通过字符的方式进行解析展示  
> 在data中定义字段如下

![在这里插入图片描述][f682c7aae39b4ca59deb750a47942902.png]

htmlStr: '<h2 style="color:red;">摔跤猫子</h2>',

> 在html中通过差值语法或v-text渲染，节点标签以及样式都无法识别

<div>{
       {htmlStr}}</div>

![在这里插入图片描述][0e3fce45571647788476080129b48c2c.png]

> 使用v-html渲染

![在这里插入图片描述][7c6927ccc31d4187a0df2dc2606fd9d1.png]

> 注意事项：v-html可以识别html结构，但是使用v-html时需要注意安全性问题，需要建立在内容可信任的基础上渲染数据随意渲染HTML是非常危险的操作，容易遭受XSS攻击  
> 具体XSS攻击方式可参考此文章：[点了下链接信息就泄露了，ta们是怎么做到的？][ta]

## v-cloak指令 ##

> v-cloak指令没有特定的值,不用给它指定等于号以及后面的数据,它只是一个特殊属性,等vue实例加载创建完成并接管指定的容器后,该属性会自动被剔除

> 类似于当页面因为网速过慢或页面加载内容过多等原因导致Vue实例无法迅速将节点内容渲染，那么页面上就会直接显示双括弧等标签，这种情况是不友好的，v-cloak属性即可解决这种问题，等渲染加载完成后再将其进行展示

![在这里插入图片描述][54cda94e1ec94880a7ee68f22eebf461.png]

## v-once指令 ##

> v-once指令用于对该属性所在的标签节点在vue实例进行初次渲染后，就将其标记为静态内容，屏蔽双向绑定及其效果；后续一系列对该数据的操作都不会更新，常用于优化性能或数据标记

![在这里插入图片描述][3061176ee3e94879a03daf5a6cabf262.gif]

> 使用v-once指定可以用最简单的方式实现效果，不用定义其他函数或字段进行记录

![在这里插入图片描述][911e9b22242945398fe5ebfd95d6f190.gif]

<h2 v-once>初始访问量:{
       {TrafficVolume}}</h2>
      <h2>当前访问量:{
       {TrafficVolume}}</h2>
      <button @click="TrafficVolume++">点击增加访问量</button>

## v-pre指令 ##

> v-pre指令会直接跳过带有该指令的节点标签，直接忽视，拿来就用。可以在没有使用差值语法的标签使用该指令，用于提升页面编译渲染速度，Vue在渲染时会直接忽略带有此指令的标签

<h2 v-pre>你好,{
       {name}}</h2>
     <h2 v-pre>当前访问量:{
       {TrafficVolume}}</h2>

![在这里插入图片描述][0aea1a78775a462d80faa918b1dc56f8.png]

[968f4c3a9001403aaa609f4e85ac2933.gif]: https://img-blog.csdnimg.cn/968f4c3a9001403aaa609f4e85ac2933.gif
[Link 1]: https://blog.csdn.net/weixin_42794881/category_10483785.html?spm=1001.2014.3001.5482
[29cb5f973a454065b0f11f52db380787.png]: https://img-blog.csdnimg.cn/29cb5f973a454065b0f11f52db380787.png
[feb149d46a92459f9e64fa5ac576842f.png]: https://img-blog.csdnimg.cn/feb149d46a92459f9e64fa5ac576842f.png
[8caa64f2e9d04827a3fcbe93addeb2c2.png]: https://img-blog.csdnimg.cn/8caa64f2e9d04827a3fcbe93addeb2c2.png
[f682c7aae39b4ca59deb750a47942902.png]: https://img-blog.csdnimg.cn/f682c7aae39b4ca59deb750a47942902.png
[0e3fce45571647788476080129b48c2c.png]: https://img-blog.csdnimg.cn/0e3fce45571647788476080129b48c2c.png
[7c6927ccc31d4187a0df2dc2606fd9d1.png]: https://img-blog.csdnimg.cn/7c6927ccc31d4187a0df2dc2606fd9d1.png
[ta]: https://blog.csdn.net/weixin_42794881/article/details/130366166
[54cda94e1ec94880a7ee68f22eebf461.png]: https://img-blog.csdnimg.cn/54cda94e1ec94880a7ee68f22eebf461.png
[3061176ee3e94879a03daf5a6cabf262.gif]: https://img-blog.csdnimg.cn/3061176ee3e94879a03daf5a6cabf262.gif
[911e9b22242945398fe5ebfd95d6f190.gif]: https://img-blog.csdnimg.cn/911e9b22242945398fe5ebfd95d6f190.gif
[0aea1a78775a462d80faa918b1dc56f8.png]: https://img-blog.csdnimg.cn/0aea1a78775a462d80faa918b1dc56f8.png