位置: 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)

  • 华为手表闹钟与手机同步哪里设置(华为手表闹钟与小米手机同步哪里设置)

    华为手表闹钟与手机同步哪里设置(华为手表闹钟与小米手机同步哪里设置)

  • qq空间怎么封锁动态(qq空间怎么封锁留言不让人看)

    qq空间怎么封锁动态(qq空间怎么封锁留言不让人看)

  • 红米k40pro的后盖是什么材质的(红米k40pro后盖是用什么做的)

    红米k40pro的后盖是什么材质的(红米k40pro后盖是用什么做的)

  • rj45网线是几类线(rj45接口用几类网线)

    rj45网线是几类线(rj45接口用几类网线)

  • 苹果手机qq群课堂为什么看不到画面(苹果手机qq群课堂在哪里打开)

    苹果手机qq群课堂为什么看不到画面(苹果手机qq群课堂在哪里打开)

  • 无法访问个人文件夹(无法访问个人文件夹是否自动修复个人文件夹权限)

    无法访问个人文件夹(无法访问个人文件夹是否自动修复个人文件夹权限)

  • iphonexr充电时漏电麻手(iphone xr充电漏电)

    iphonexr充电时漏电麻手(iphone xr充电漏电)

  • 手机充电充满了继续充有影响吗(手机充电充满了一直充有影响吗)

    手机充电充满了继续充有影响吗(手机充电充满了一直充有影响吗)

  • 小米手环能回微信吗(小米手环回微信账号能看到记录吗)

    小米手环能回微信吗(小米手环回微信账号能看到记录吗)

  • 添加联系人失败是什么意思(为什么会显示添加联系人失败)

    添加联系人失败是什么意思(为什么会显示添加联系人失败)

  • 淘宝预计送达时间准吗(淘宝预计送达时间是怎么算的)

    淘宝预计送达时间准吗(淘宝预计送达时间是怎么算的)

  • 如何将一个微信上的好友转移到另一个微信上(如何将一个微信的聊天内容迁移到另一个微信)

    如何将一个微信上的好友转移到另一个微信上(如何将一个微信的聊天内容迁移到另一个微信)

  • 荣耀20pro多重(荣耀20pro有多重)

    荣耀20pro多重(荣耀20pro有多重)

  • cpu后面带h代表什么(cpu后边带h)

    cpu后面带h代表什么(cpu后边带h)

  • 苹果支持多少w快充(苹果支持多少瓦无线快充)

    苹果支持多少w快充(苹果支持多少瓦无线快充)

  • iphone主题商店在哪里(苹果手机主题商店)

    iphone主题商店在哪里(苹果手机主题商店)

  • 手机积分清零吗(手机积分清0)

    手机积分清零吗(手机积分清0)

  • 手机卡注销退话费吗(注销手机卡退话费嘛)

    手机卡注销退话费吗(注销手机卡退话费嘛)

  • 智伴机器人叫什么(智伴机器人叫什么名字好听)

    智伴机器人叫什么(智伴机器人叫什么名字好听)

  • 腾讯家长监护平台怎么解除(腾讯家长监护平台 已经成年)

    腾讯家长监护平台怎么解除(腾讯家长监护平台 已经成年)

  • 华为畅享9s有红外线功能吗(华为畅享9s有红外线遥控吗)

    华为畅享9s有红外线功能吗(华为畅享9s有红外线遥控吗)

  • CMOS电池失效引起黑屏故障(cmos电池耗尽)

    CMOS电池失效引起黑屏故障(cmos电池耗尽)

  • 东方蝾螈怎么养(东方蝾螈怎么养吃什么)

    东方蝾螈怎么养(东方蝾螈怎么养吃什么)

  • 计算机视觉竞赛技巧总结(二):图像分割基础篇(计算机视觉竞赛很重要吗)

    计算机视觉竞赛技巧总结(二):图像分割基础篇(计算机视觉竞赛很重要吗)

  • 可明确区分的商品
  • 赠送代金券的广告语
  • 一般纳税人10万以下免什么税
  • 出库单上面的单位写谁的
  • 社保缴费基数的组成部分
  • u8反记账操作步骤
  • 银行日记账写错了怎么改
  • 房产租金收入房产税
  • 物业电费加价如何举报
  • 高新企业帐务流程
  • 企业缴纳房产税的依据
  • 免抵退税系统操作流程
  • 企业所得税季度申报填写示例
  • 小规模纳税人增值税怎么算
  • 所得税不能税前扣除项目
  • 租金一次性付清的账务处理
  • 行政单位缴纳罚款如何记账
  • 资产负债中应交税费怎么算
  • 少计提增值税0.01计入营业外
  • 客户退回货物会计分录
  • 收到工伤保险怎么做分录
  • 如何将旧版本软件卸载
  • 穿越火线刷枪视频教程
  • 企业会计师证是咋回事
  • 收到人才引进补助会计分录
  • java开发主流框架
  • 个人承包建筑工程转让协议
  • 辅导期一般纳税人可以抵扣进项吗
  • 桔梗的功效与作用吃法
  • 审核原始凭证应注意
  • 供水公司与用户合作协议
  • 归还本金和利息的分录
  • formdata方法
  • uniapp和mpvue比较
  • 免费赠送的产品报关金额
  • 房地产企业的开发成本和开发费用有什么区
  • 期末调整汇兑损益计算
  • 暂估库存商品计算怎么算
  • 织梦网站怎么改logo
  • php定义变量的方法
  • 织梦网站怎么添加关键词
  • 生产工人工资属于生产过程中发生的费用吗
  • Windows下Postgresql数据库的下载与配置方法
  • db2数据库安装服务器的环境
  • 购车的车辆购置税计入固定资产可以所得税一次性扣除吗
  • 消费税是怎样征收的
  • 成本核算的意义与作用
  • 长期的待摊费用包括哪些
  • 合适的库存产品包括
  • 应收账款冲销是什么意思
  • 营改增税法
  • 预缴的税款抵扣有时间限制吗
  • 商业企业销售摩托车需不需要征收消费税
  • 财务人员需要填报的报表有哪些
  • sql简单教程
  • xp系统怎么添加ip地址
  • 苹果系统怎么修改语言
  • linux jack
  • centos5.5网络配置
  • windows7怎么打开记事本
  • mini programes
  • win7开机黑屏只有一个鼠标箭头
  • linux中sudoers
  • iptables -l -n
  • 微软发布ChatGPT功能
  • jquery插件使用教程
  • shell脚本实现文件移动、复制等操作
  • 字符串转enum
  • 鼠标焦点离开触发查询
  • jquery 定位
  • nodejs跳转到指定页面
  • unity3d控制物体移动
  • android 实例教程
  • 用python简单代码
  • js function函数
  • android获取手机的基本信息
  • js实现表格动态合并单元格
  • jquery导入
  • js获取鼠标点击位置
  • 国家税务总局石棉县税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设