vue2（二）

三、过滤器

3.1 概述

过滤器（Filters）是 vue 为开发者提供的功能，过滤器本质上就是一个函数，常用于文本的格式化。message加了竖线在后是调用后面的过滤器函数，以message为参数。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”(竖线)进行调用，p中显示的结果是过滤器的返回值，示例代码如下

val指的是管道符前面的数据（message），用过滤器的形参就可以获取到管道符前面待处理的那个值声明过滤器函数需要一个filters对象，与data和el同级，字符串方法toUpperCase是将获得的字母变成大写的方法。slice方法截取了包括此索引号后面所有字母后return返回拼接后的结果，结果就是将首字母大写后的‘Hello vue.js’
注意：在过滤器函数中，一定要有return值

3.2 私有过滤器和全局过滤器

在filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

全局过滤器要写在全局区域上，且filter没有‘s’，如果全局过滤器和私有过滤器名字重复了，此时按照就近原则，调用的是自己的私有过滤器

使用全局过滤器格式化时间

导入Day.js文件来操作显示日期和时间，下图的format方法是格式化的意思，在里面传格式化的字母大写格式，上图即为各个格式

3.3 过滤器的其他用法

①过滤器可以串联地进行调用，例如：

②过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：

③过滤器的兼容性

四、watch侦听器

4.1 什么是watch侦听器

watch 侦听器允许开发者监视数据的变化，定义与data和el同级，从而针对数据的变化做特定的操作。（要侦听谁就把谁当做函数名）

上图监听username，只要值发生变化就触发函数，注意，所有的watch侦听器都要写在watch节点下，假如用v-model绑定username的话，在文本框中修改username的值，每修改一次都会触发一次函数

判断用户名是否被占用

4.2 immediate 选项

方法格式的侦听器缺点是①无法再刚进入页面时自动触发；②如果侦听的是一个对象，对象中属性发生变化，不会触发侦听器。

对象格式好处：
如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项
通过deep选项，让侦听器深度监控对象内的每个属性的变化（handle是一个属性）


如果想用对象格式侦听器，就在方法后面加入deep选项，如果不想的话就可以用以下方法，使用