IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue中的内置指令+自定义指令 -> 正文阅读

[JavaScript知识库]Vue中的内置指令+自定义指令

一、内置指令

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-29 12:02:02  更:2022-04-29 12:03:14 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 1:10:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码