Vue 过滤器 常用相关指令 自定义指令函数式和对象式以及它们的注意事项(六)

{{name}}

111

3.3 v-html指令

---

3.3.1 cookie 工作原理

关于cookie，在登录时，服务器会向浏览器发送cookies，作为判断标识。

我们可以使用Cookie.Editor插件来将cookie导入或者导出。此插件需要去谷歌商店去下载。

我们在浏览器控制台使用：document.cookie，来查看网页目前的cookie。

3.3.2 v-html 安全性（类似XSS攻击）

v-html的安全性问题：（类似XSS攻击）

源码：

{{name}}

3.4 v-clock指令

---

v-clock指令配合CSS可以解决js阻塞问题。

v-cloak属性，一旦被Vue实例对象接管，该属性会被自动删除。

通过这些机制，我们就可以通过属性选择器，来解决js发生阻塞停止了几秒，这时页面也不会显示出未完成的代码块。

总体上，当你的网速过慢时，v-clock指令不会让还没有解析的代码，跑到页面上去。

源码：

{{name}}

总结

3.5 v-once 指令

---

v-once指令就是在初次动态渲染后，就视为静态内容。

源码

初始化值：{{n}}

当前的n值为：{{n}}

<button @click=“n++”>点我加1

3.6 v-pre指令

---

v-pre指令是一个提高Vue编译过程的指令，有一些代码压根就没有应用到Vue中，我们就可以给他设置v-pre指令，Vue解析时直接跳过，节约时间。

源码：

Vue其实很简单

当前的n值为：{{n}}

<button @click=“n++”>点我加1

Vue其实很简单

Vue其实很简单

Vue其实很简单

4. 自定义指令

======================================================================

4.1 判断一个元素是否为真实DOM

---

监测是否为真实DOM的两种方法：

第一种方法：console.dir(object)

//console.dir(object)作用就是打印出该对象的所有属性和属性值.

console.dir(element); //验证a，是否为真实DOM，打印出来的包含许多真实DOM的元素。

第二种方法：instanceof

// instanceof作用就是用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

// HTMLElement 接口表示所有的 HTML 元素

console.log(element instanceof HTMLElement);

4.2 自定义指令(函数定义)

---

自定义指令，direction就有指令的意思。必须理解好element和binding的结构内容。

当前的n值是

放大十倍的n值是

<button @click=“n++”>点我n++

自定义指令什么时候会被调用？

1.指令与元素成功绑定时(一上来)。2. 指令所在的模板重新解析时，打个比方:如果我们在上面定义了name,我们修改name，照样会引起big的调用。

4.3 自定义指令(对象定义)

---

4.3.1 执行顺序一定不要混乱

input的autofocus：

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

指定元素获取class元素的样式等等：

className 获取或设置指定元素的class属性的值。

源码：

点我创建一个输入框

4.3.2 自定义指令(对象定义)

对象形式定义也是有简写和常规写法，一定注意对象中bind，inserted和update三个对象函数。

**bind函数:当指令与元素成功绑定时(一上来)，调用bind函数。

inserted函数:指令所在元素被插入页面时，调用inserted函数。

update函数:指令所在的模板重新解析时,调用update函数。**

源码：

当前的n值是

放大十倍的n值是

<button @click=“n++”>点我n++

---