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

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

所属校区

请选择小区 北京 上海 深圳 广东

其他信息：

阅读并接受《用户协议》

提交

总结：

2. Vue的过滤器

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

过滤器分为局部过滤器和全局过滤器。

过滤器可以应用到插值语法和v-bind上面，不可以用到v-model上面。

源码：

一定将注释全部熟知。

显示格式化后的时间

现在是：{{fmtTime}}

现在是：{{getFmtTime()}}

现在是：{{time | timeFormater}}

现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}

你好世界

{{msg | mySlice}}

总结

3. Vue 相关指令

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

3.1 已经学过的指令

---

**v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href

v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click**

3.2 v-text 指令

---

下面介绍一下v-text指令：

v-text属性会替换掉原先的文本内容，并且不会解析标签完完全全当成文本解析。

{{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 属性是否出现在某个实例对象的原型链上。

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：