首页 前端知识 Vue|内置指令

Vue|内置指令

2024-06-30 21:06:41 前端知识 前端哥 817 63 我要收藏

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

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

内置指令

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

在这里插入图片描述

创建好页面容器及对应的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指令作用是用于向其所在的节点标签渲染文本内容,使用方式如下

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

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

在这里插入图片描述

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

		<!-- 1.差值语法 -->
        <div>hi,{{name}}</div>
        <!-- 2.通过指令 -->
        <div v-text="name">hi,</div>

在这里插入图片描述

v-html指令

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

在这里插入图片描述

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

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

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

在这里插入图片描述

使用v-html渲染

<div v-html="htmlStr"></div>

在这里插入图片描述

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

v-cloak指令

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

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

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

在这里插入图片描述

v-once指令

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

在这里插入图片描述

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

在这里插入图片描述

  <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>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13698.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!