过滤器和侦听器和计算属性
1. 过滤器1.1基本用法1.2私有过滤器和全局过滤器1.3 Dayjs1.4 连续调用多个过滤器1.5 过滤器传参1.6 兼容性2. watch 侦听器2.1 简介2.2 应用场景：判断用户名是否被占用2.3 immediate 选项2.4 deep 选项3.计算属性3.1 了解计算属性应用场景3.2 控制 div 背景颜色案例1. 过滤器
1.1基本用法
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind 属性绑定。
过滤器应该被添加在 Javascript 表达式的尾部，由管道符|进行调用：
在花括号中通过|调用过滤器，对 值进行格式化
<p>message: {{ message | capi }} </p>
capi 过滤器的定义
定义在filters下，本质是一个函数在过滤器的参数中，一定要有return值在过滤器的形参中，就可以获得|前的待处理值
const vm = new Vue({el: '#app',data: {message: 'hello Vue !'},// 定义过滤器函数filters:{capi(val) {// val 过滤器前面的形参 | 前面的值// charAt 接收索引值 将对应字符返回const first = val.charAt(0).toUpperCase()const other = val.slice(1)return first + other}}})
1.2私有过滤器和全局过滤器
在 filters 节点定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
全局定义放在 vm 实例之前优先使用 vm 实例的 filters 中的过滤器如果 vm 实例的 filters 没有相关过滤器，则使用 全局过滤器私有和全局都没有则使用原型
// Vue.filter() 方法接收两个参数：// 第一个参数：全局过滤器的名字// 第二个参数：全局过滤器处理函数Vue.filter('capi' , (val) => {const first = val.charAt(0).toUpperCase()const other = val.slice(1)return first + other})
1.3 Dayjs
Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。
官网：Day.js中文网 ()
使用详情： 官网 => 文档 => 解析
<td>{{ item.time | dataFormat}} </td>
// 声明格式化时间的全局过滤器Vue.filter('dataFormat' , (time) => {// YYYY-MM-DD HH:mm:ssreturn dayjs(time).format('YYYY-MM-DD HH:mm:ss'); })
1.4 连续调用多个过滤器
过滤器可以串联进行调用：
{{ message | filterA | filterB |filterC }}
1.5 过滤器传参
过滤器本质是 JavaScript 函数，因此可以接受参数：
{{ message | filterA(arg1 , arg2)}}
Vue.filter('filterA' , (msg , arg1 , arg2) => {// code...})
1.6 兼容性
能在 vue2 中使用， vue3 已经不支持。
2. watch 侦听器
2.1 简介
watch 侦听器允许开发者监听数据的变化，从而针对数据的变化做特定的操作。
const vm = new Vue({el: '#app',data: {message: 'hello Vue !'},// 定义侦听器// 要监听哪个数据的变化就把这个数据作为方法名即可watch: {message(newMes , oldMes){console.log(newMes , oldMes)}}})
2.2 应用场景：判断用户名是否被占用
<body><div id="app"><input type="text" name="" id="" v-model="username"><span>{{ message}}</span></div><script src="./lib/vue.js"></script><script src="/libs/jquery/2.1.4/jquery.min.js"></script><script>// Vue.filter() 方法接收两个参数：// 第一个参数：全局过滤器的名字// 第二个参数：全局过滤器处理函数Vue.filter('capi' , (val) => {const first = val.charAt(0).toUpperCase()const other = val.slice(1)return '123'})// 创建 vue 实例对象const vm = new Vue({el: '#app',data: {username: 'zhangsan',message: ''},// 定义侦听器// 要监听哪个数据的变化就把这个数据作为方法名即可watch: {username(newName , oldName){$.get('/api/finduser/' + newName , function(result){vm.message = result.messageconsole.log(result)})}}})</script></body>
2.3 immediate 选项
方法格式的侦听器 缺点1：无法在刚进入页面的时候自动触发缺点2：如果侦听的是一个对象，对象属性值的变化不会触发侦听器！对象格式的侦听器 好处1：可以通过immediate选项，让侦听器自动触发好处2：可以通过deep选项监听对象中每个属性的变化watch: {// 定义对象格式的侦听器username: {// handler 侦听器处理函数handler(newName , oldName) {$.get('/api/finduser/' + newName , function(result){vm.message = result.messageconsole.log(result)})},// immediate 为 true 自动触发一次，默认为 falseimmediate: true}}
2.4 deep 选项
对象格式的侦听器：可以通过deep选项监听对象中每个属性的变化如果要监听的是对象的子属性的变化，则需要加上单引号：info.username() {...}<div id="app"><input type="text" name="" id="" v-model="info.username"><span>{{ message}}</span></div>
const vm = new Vue({el: '#app',data: {info: {username: 'admin'},message: ''},// 定义侦听器// 要监听哪个数据的变化就把这个数据作为方法名即可watch: {info: {// handler 侦听器处理函数handler(newObj , oldObj) {$.get('/api/finduser/' + newObj.username , function(result){vm.message = result.messageconsole.log(result)})},// immediate 为 true 自动触发一次，默认为 falseimmediate: true,// 开启深度监听 默认为 falsedeep: true}}})
3.计算属性
3.1 了解计算属性应用场景
所有的计算属性都定义在computed节点下计算属性要定义成方法形式当使用计算属性时当做vm 的属性使用即可计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
computed:{// 返回生成好的 rgb(x,x,x) 字符串rgb() {return `rgb(${this.r},${this.g},${this.b})`}}
3.2 控制 div 背景颜色案例
好处：
实现了代码复用只要依赖的数据源发生变化，计算属性重新求值
<style>#app{margin: 100px;}.box{width: 200px;height: 200px;}</style>
<div id="app"><p>r：<input type="text" v-model.number="r"> </p><p>g：<input type="text" v-model.number="g"> </p><p>b：<input type="text" v-model.number="b"> </p><div class="box" :style="{ backgroundColor:rgb}">{{ rgb }}</div><button @click="show">按钮</button></div>
const vm = new Vue({el: '#app',data: {r: 0,g: 0,b: 0},computed:{// 返回生成好的 rgb(x,x,x) 字符串rgb() {return `rgb(${this.r},${this.g},${this.b})`}},methods: {// 点击按钮 在终端显示颜色show() {console.log(this.rgb)}}})
