（尚硅谷）Vue笔记---------12

过滤器

我们先去这个网站复制这个days.js的连接。

 

我们把它存到我们的电脑中去。

 

把它复制粘贴到我们的路径下，我们就可以去使用了。

 在Bootcdn网站上或者github里有教我们使用，但是有时候网络不好，访问不到。我们想学的时候可以去官网看看。

我们去显示我们的一个时间戳：

 

我们现在要去把时间戳格式化成我们能看懂的时间，我们利用计算属性也是可以的：

 

我们这里就是定义了一个计算属性中的方法，返回了一个刚刚引入的day.js中的格式化方法：

 

我们还可以用methods来实现：

 

 

 

这种方式也是可以的。

但是vue又给我们提供了一种使用过滤器的方式：

 

在过滤器中，我们用return的返回值覆盖到接收到的value值。

 

当然我们有时候别会指定传来一种什么样的格式的日期：

 

 

但是这时候如果没有指定时间的格式，就无法正常显示出来了，所以我们可以给它加一个判断：

 

如果有格式，就使用，如果没有格式，我们就给它一个默认的。

 

这部分还可以对多个过滤器进行串联使用：

我们这个过滤器做格式化，我们再另写一个过滤器只用于打印出年份：

 

它是一层一层递进的。

 

我们这个过滤器是局部的，我们这个过滤器只有它所属的这个vue的对象vm可以使用，其他vue实例使用不了，我们以后会使用多个组件，每个组件都是一个微型的vm。

所以现在我们要来学习一下全局的过滤器：
我们再定义一个vue对象：

 

在body中接收它的值：

 

 

但是现在我们闲我们的msg太长了，我们只想显示其前4个字母hell，是不是可以使用我们刚才写的方法啊。

但是我们现在用不了局部的过滤器。

就需要写一个全局的过滤器：

我们把之前写的截取4个字符的方法删除，把它写成一个全局的过滤器就可以了：

 

我们在两个vue实例做好之前把它先写好：

 

我们添加了一个msg属性在第一个vue对象中。

我们现在只想获取它的前四个字也可以使用全局的过滤器：

 

 

这种写法是比较少见的。

但是它不能和v-model一起使用。

总结：

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

1.注册过滤器：Vue.filter(name,callback)或new Vue(filters:{})

2.使用过滤器：{{xxx | 过滤器名}}或v-bind:属性="xxx | 过滤器名 "

备注：

1.过滤器也可以接收额外参数，多个过滤器也可以进行串联

2.并没有改变原本的数据，是产生新的对应的数据

v-text指令

我们先回顾一下之前我们学过的指令：

v-bind:单向绑定解析表达式，可简写为:xxx

v-model:双向数据绑定

v-for:遍历数组/对象/字符串

v-on:绑定事件监听，可简写为@

v-if:条件渲染（动态控制节点是否存在）

v-else:条件渲染（动态控制节点是否存在）

v-show:条件渲染（动态控制节点是否展示） 

v-text例子：

 

我们可以看到我们使用v-text和我们直接花括号写data里的属性值效果是一样的。

 

我们修改一下再去显示：

 

我们发现这种做法是没有意义的，v-text就是去代替标签要写的内容的。

并且我们的v-text也不能解析标签：

 

 

它根本不把h3当标签用，它把所有内容都当成纯文本去使用。

总结：

v-text指令：

1.作用：向其所有的节点中渲染文本内容

2.与插值语法的区别：v-text会替换节点中的内容，{{xxx}}则不会。

v-html指令 

我们还是用上面的代码：

 

我们一下子就能看出来v-text和v-html的区别，v-html支持对结构的解析。

然后我们还需要去聊聊安全性的问题：

 

 

我们这个代码多了一个str2的属性，它是一个标签，它绑定了一个js弹窗事件 ，当我们打开页面：

当我们去点击的时候：

 

出现弹窗。

 

我们如果是跳到网址：

 

 

点击之后就跳到了百度，如果别人写了危险的网站，我们是不是也就跳进去了啊。

当修改代码把cookie作为参数时，就会被获取到自己在这台服务器中的cookie信息，一般盗号就是这样的。

 

在我们的浏览器中，的cookie都会有HttpOnly这个选项，我们点击它后，被打√，那么这个cookie就除了本页面别的人都拿不走了。

总结：

v-html指令:

1.作用:向指定的节点中渲染包含html结构的内容

2.与插值语法的区别：

（1）v-html会替换掉节点中所有的内容，{{xxx}}不会

(2)v-html可以识别html结构

3.严重注意：v-html有安全性问题！！！

（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上。

v-cloak指令 

这个指令我就不做笔记代码了，就直接总结一下它的作用吧，感觉不是很常用：

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创造完毕并接管容器后，会删掉v-cloak属性

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令

这部分先上一个简单的例子：

这段代码我们去运行：

 

当我们点击按钮时:

 

我们无法保留初始值。

所以若想仍能输出原内容，我们就需要用到v-once指令：

 

 我们再去运行一次：

点击按钮：

 

总结：

v-once指令:

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令 

这个笔记简单的代码。

我们先去看看页面效果：

 

然后我们现在去给每个标签都加上pre指令：

 

我们再去前端页面上看一眼：

 

这个指令比较简单，这一个例子就可以看出来。

总结：

 v-pre指令:

1.跳过所在节点的编译过程

2.可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译。

自定义指令_函数式

我们先去做第一个需求。

我们这个代码执行一下：

 

 

页面是有错误的，它提示我们没有去写自己自定义的big指令。所以我们要自己去添加一下：

 

element是自定义函数所调用的对象，binding是自定义函数所绑定的元素。

 

 

但是我的注释的第二句那么说是不准确的。

 

我们添加了name属性：

再去运行测试：

现在我只更改name的值:

 

我们发现big指令又被调用了一次。所以为了安全只要模板改动，自定义指令就被调用。

 指令所在的模板被重新解析时，big指令也会被调用。

自定义指令对象式

我们现在来做第二个需求

我们在模板中添加一个输入框

 

增加一个自定义指令。

运行：

 

 

我们通过运行结果发现，我们的输入框只有我们点击按钮时才触发焦点。

这是因为我们之前所做的自定义指令函数式只有元素绑定时才奏效，但是我们最开始的input没有展现出来，值改变了，自定义函数才奏效，所有最开始是没法绑定焦点的，body中的只是模板，我们得想办法最开始input展示到页面时就和v-fbind绑定成功。

所以就进入到了我们这一小节的正题了，自定义指令——对象式：

 

这三个函数方法是很重要的。我们在前端页面看一下：

 

关键的时间点,vue给我们提供了关键的函数。

这三个都是函数，其实叫钩子函数，后面会学，vue在不同的时刻帮我们调用不同的函数。

所以有了这三个函数，我们可以写我们第二个需求了：

 

 

 

其实自定义指令函数式就是只调用bind和update的对象式自定义指令。

自定义指令_总结

在我们自定义指令的时候，指令名是有一个坑的，如果我们命名含有多个单词，比如驼峰命名，我们的自定义指令的函数形式是不支持的，在vue中建议使用a-b的形式，但是注意要加单引号，不然会报错。

我们注意我们的自定义指令中的this指的是window而不是vm。

我们的自定义指令只能给它自己的vue对象使用，对于别的vue指令不起作用。

我们这个也可以使用全局指令和过滤器一样，Vue.directive(指令名，内容（函数/对象）)

 总结：

自定义指令总结：

一 定义语法:

(1)局部指令:

new Vue({directives:{指令名:配置对象 }})或new Vue({directives(){}})

(2)全局指令

Vue.directive(指令名,配置对象)或Vue.directive(指令名，回调函数)

二配置对象中常用的3个回调：

（1）bind:指令与元素成功绑定时调用

（2）inserted：指令所在元素被插入页面时调用

(3)update：指令所在模板结构被重新结构时调用

三备注

1.指令定义时不加v-但使用时要加v-

2.指令如果是多个单词，要使用kebab-case命名方式，不要用camelCass命名

引出生命周期

我们先来去写一个文字渐变的代码：

 

运行效果：

 

 

但是我们这个代码有点瑕疵，我们这个函数是用到了vue对象vm的，但是它俩却没有写在一起。

是割裂开的。这样就不是很好。其次我们真正开发的时候很少用到vm对象的。所以我们要去修改代码。

所以我们不推荐使用定时器来做。

这个时候我们需要用到我们的mounted()函数：

 

 

那我们最后来总结一下什么是生命周期：

1.又名:生命周期回调函数，生命周期函数，生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用一些特殊名称的函数

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

4.生命周期函数中的this指向是vm或组件实例对象

生命周期_挂载流程

这部分官方文档写的非常好，我们可以去看，那个图示非常好：

 

 

生命周期

 

我们可以做一个应用，我们之前不是有文字渐变的颜色的代码么，我们做个可以让它随时停止的按钮：

 

 

 

 

还可以写一个按钮让它的透明度变成1.

 

 

如果我们在stop方法中使用destroy那就是一个非常暴力的终止效果：

 

 

我们一旦点击停止按钮：

 

我们的vm对象直接也被干掉了。

我们可以加上这个函数，那么一旦点击按钮就调用销毁方法，就一定会触发这个销毁之前的方法，就停掉了计数器。

 总结：

常用的生命周期钩子：

1.mounted:发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】

2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等【收尾工作】

关于销毁vue实例

1.销毁后借助Vue开发者工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。