一、内置指令
我们已经学习了
v-bind
v-on的指令,
他们都是内置指令
1、回顾
2、v-text
注意1:v-text会替换掉标签里的内容
注意2:
v-text不能解析标签
v-text总结
3、v-html指令
3.1 简介
3.2 安全性问题
使用cookie-editor从Google浏览器偷取cookie信息 来到火狐浏览器,再通过cookie-editor导入,刷新页面,即可登录进去了
伪造两个cookie来演示安全性问题
然后在代码里实现一下攻击
点击之后:
可以看到cookie已经被窃取了
实际上,很多网站都有HttpOnly的功能,勾选后,只有http协议可以识别,js代码和其他手段不能在获取
3.3 总结
4、v-cloak指令
4.1 入门案例
开启服务
设置5s后,请求会回来
js阻塞
4.2 代码实现
4.3 JS换一个位置
将引入外部js的位置放到body底部
等5s后
现在不想要用户看到{{name}},要么就展示尚硅谷,要么什么都不展示
4.4 v-cloak
vue介入时会将这个指令删掉
等5s后vue介入
因此可以实现我们想要的效果
4.5 总结
5、v-once指令
6、v-pre指令
只在第17行加一个v-pre
7、once和v-once
二、自定义指令
1、 自定义指令_函数式
完成需求1
2、自定义指令_对象式
完成需求2
3、自定义指令_总结
3.1 指令名
指令名由多个单词组成
3.2 this问题
所有指令相关回调函数里的this都不是vm,而是window
3.3 局部指令
上述big指令和fbind指令都是局部指令
如何设置为全局?与过滤器类似
对象式 函数式
3.4 总结
|