v-text,v-html,v-cloak,v-once
v-text ,接收到的一律处理为字符串,同于覆盖inneContent中的内容,不会进行解析
<div v-text="daydayup">123</div> 结果为daydayup ,
<div>{{daydayup}}123</div> 结果为daydayup123
v-html 更新innerHTML,会进行解析
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html
,永不用在用户提交的内容上
关于XSS,跨站脚本攻击XSS,是最普遍的Web应用安全漏洞。这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中,当正常用户访问该页面时,则可导致嵌入的恶意脚本代码的执行,从而达到恶意攻击用户的目的。当动态页面中插入的内容含有这些特殊字符如<时,用户浏览器会将其误认为是插入了HTML标签,当这些HTML标签引入了一段JavaScript脚本时,这些脚本程序就将会在用户浏览器中执行。当这些特殊字符不能被动态页面检查或检查出现失误时,就将会产生XSS漏洞。
HttpOnly
设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,只有http协议可以读取与携带,避免了恶意脚本代码获取用户信息。
v-cloak 不需要表达式
v-cloak属性是没有值的,当vue接管后,会删除标签中的v-cloak属性,所以要与css配合使用。
这个指令保持在元素上'<h2 v-cloak>等一会解析</h2>'直到关联实例结束编译,即Vue开始接管h2标签就变成了'<h2>等一会解析</h2>'。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
可以解决当网速慢的时候,body的内容为解析就被暴露在窗口中的问题。
v-once 不需要表达式
只渲染元素和组件一次--初次的页面渲染。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过,以后关联数据改变,他也不会变了
v-pre 不需要表达式
跳过这个元素和它的子元素的编译过程。vue不会去解析他了。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
a9d3b85f7dde00826c126e402e8f290.png
自定义命令--通过自定义命令对底层dom进行操作
选项:directives
、、、
directives: {
big(element, binding) {
console.log(element, binding);
element.innerText = binding.value * 10; //初始绑定时调用函数,模板被重新解析时也会调用函数
}
}
、、、
指令名为big,使用时使用v-big
接受两个参数,element:是绑定的dom元素名,
binding:{name: 'big', rawName: 'v-big', value: 1, expression: 'n', modifiers: {…}, …}
def: {bind: ƒ, update: ƒ}
expression: "n" //用到值的ming字
modifiers: {}
name: "big"
rawName: "v-big"
value: 1 //为用到的值
[[Prototype]]: Object
网友评论