0
点赞
收藏
分享

微信扫一扫

Vue中的内置指令+自定义指令

醉东枫 2022-04-28 阅读 62
Vuevue.jsvue

一、内置指令

我们已经学习了
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 总结在这里插入图片描述

举报

相关推荐

0 条评论