位置: IT常识 - 正文

Vue|内置指令(vue内置指令实验总结)

编辑:rootadmin
原力计划Vue|内置指令

推荐整理分享Vue|内置指令(vue内置指令实验总结),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue内置指令实验总结,vue内置指令主要内容有哪些,vue内置指令实验总结,vue内置指令有哪些构成,Vue内置指令通常以t-开头,vue内置指令有哪些,vue内置指令主要内容有哪些,vue内置指令有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

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中定义字段如下

Vue|内置指令(vue内置指令实验总结)

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.jiuchutong.com/zhishi/297752.html 转载请保留说明!

上一篇:3D相机获取点云信息的几种方法(3d点云处理算法)

下一篇:vue2配置cesium详细教程(vue2 mixin)

  • 成立蔬菜公司免税吗
  • 居民个人取得境内、境外所得,如何计算应纳税额?
  • 未取得房屋产权证租赁
  • 最新劳务报酬的个税计算方法?
  • 公司的软件服务包括哪些
  • 单位买绿植可以报销吗
  • 进项税转出的发票怎么认证
  • 终止销售关系怎么处理
  • 进项税未抵扣完怎么结转
  • 资产负债表的应付职工薪酬怎么填
  • 回迁房的交易流程
  • 资金账簿印花税每年都要交吗?
  • 消费税的计税方法
  • 制造费用包括哪三类
  • 固定资产汽车抵扣新政策
  • 银行抵债资产怎么管理
  • 营改增怎么还有机打发票吗
  • 项目部管理人员及作业人员的
  • 普票每季度开多少免税
  • 开汽车租赁发票需要什么资料?
  • 小规模怎样计算进项税额
  • 零申报的资产负债表不能为0
  • 第二个季度
  • 累计折旧费用
  • 公账转私账用途怎么写
  • 个体工商户生产经营所得税税率表2021
  • 不动产测绘费谁交
  • 购买方取得专票会计分录
  • 施工项目直接成本和间接成本
  • 退休人员返聘工资怎么发放
  • 债券分期还本利息怎么算
  • 专票一年可以抵扣吗
  • 我想测试一下网速
  • 不要运行指定的Windows应用程序怎么设置win10教程
  • php文本转数字
  • php教程视频
  • 进项税额的账务处理
  • 建筑业预缴增值税
  • 圣安德鲁斯市
  • svc语法
  • 作为大学生你能为国家安全贡献哪些力量论文
  • 微信小程序支付接口调用
  • 建筑工程收到材料发票怎么做账
  • 发票过期未认证可以用吗
  • 增值税免税收入账务处理
  • 养老保险产生的利息怎么入账
  • dedecms51
  • python 概率分布函数
  • 银行结算方式有哪几种?其具体内容是什么
  • 坏账准备的账务处理例题视频讲解
  • 库存商品可以领用加工吗
  • 现时社保缴费
  • 融资租入固定资产改建支出计入
  • 专项应付款如何冲减
  • 明细分类账三栏式
  • 两家公司
  • 房地产企业会计处理
  • mac截图清晰度设置方法
  • win7桌面图标无法拖到任务栏
  • ubuntu安装quagga
  • xp系统桌面图标大小怎么调整
  • Windows Server 2012服务器管理器的详细介绍
  • windows defender 图标怎么从任务栏删除
  • win10正版授权图标
  • red hat linux安装
  • linux计划任务如何设置
  • unity接入安卓sdk
  • [OpenGL ES 04]3D变换实践篇:平移,旋转,缩放
  • perl的chomp
  • cocos2dx4.0教程
  • android网络编程题库
  • 手把手教你用python破解wifi
  • python的例子
  • jquery iframe写入内容
  • 快速排序的算法流程图
  • python通过编程求权重
  • 设计费需要交税吗
  • 北京通州国税局进面分数2022
  • 在电脑上怎样做word的文档
  • 广州市地方税务局 社保费申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设