续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天
1.过滤器
过滤器(Filters)是 VUE 为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方;插值表达式和v-bind属性绑定 过滤器应该被添加在 JavaScript 表达式的尾部,由 "管道符"进行调用,示例代码如下：
<!-- 在双花括号中通过 "管道符" 调用 capitalize 过滤器,对 message 的值进行格式化>
<p>{{ message | capitalize }}</p>
<!-- 在 v-bind 中通过 "管道符" 调用 formatID 过滤器,对 rawID 的值家安行格式化>
<div v-bind:id="rawId | formatId"></div>
1-1. 定义过滤器
在创建 vue 实例期间,可以在 filters节点 中定义过滤器,示例代码如下：
const vm=new Vue({
el:'#app',
data:{
message:'hello vue.js',
info:'title info'
},
filters:{ // 在 filters 节点下定义"过滤器"
capitalize(str){ // 把首字母转为大写的过滤器
return str.charAt(0).toUpperCase()+str.slice(1)
}
}
})
1-2. 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,称为"私有过滤器",因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式定义全局过滤器
// 全局过滤器 - 独立于每个 vm 实例之外
// vue.filter() 方法接收两个参数:
// 第一个参数,是全局过滤器的 "名字"
// 第二个参数,是全局过滤器的 "处理函数"
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '--'
})
1-3. 连续调用多个过滤器
过滤器可以串联地进行调用,例如：
// 把 message 的值,交给 filterA 进行处理
// 把 filterA 处理的结果,再交给 filterB 进行处理
// 最终把 filterB 处理的结果,作为最终的值渲染到页面上
{{ message | filterA | filterB }}
1-3. 连续调用多个过滤器(示例代码)
<!-- 串联词用多个过滤器 -->
<p>{{ text | capitalize | maxLength }}</p>
// 全局过滤器 - 首字母大写
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
// 全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str)=>{
if(str.length <= 10 ) return str
return str.alice(0,11) + '...'
})
1-4. 过滤器传参
过滤器的本质是 JavaScript函数,因此可以接收参数,格式如下：
// arg1 和 arg2 是传递给 filterA 的参数
<p>{{ message | filterA(arg1,arg2)}}</p>
// 过滤器处理函数的形参列表中
// 第一个参数：永远都是 "管道符" 前面待处理的值
// 第二个参数开始：才是调用过滤器时候传递过来的 arg1 和 arg2 参数
Vue.filter('filterA',(msg,arg1,arg2)=>{
// 过滤器代码逻辑.....
})
1-4. 过滤器传参(示例代码如下)
<!-- 调用 maxLength 过滤器时传参 -->
<p>{{ text | capitalize | maxLength(5) }}</p>
// 全局过滤器 - 首字母大写
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
// 全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str,len = 10) => {
if(str.length <= len ) return str
return str.alice(0,len) + '...'
})
2. 过滤器的兼容性
- 过滤器仅在 vue2.X 和 vue1.X 中受支持, 在vue3.x版本中剔除了过滤器相关的功能
- watch 侦听器
3-1. 什么是 watch 侦听器
watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
const vm = new Vue({
el:'#app',
data:{ username: '' },
watch:{
// 监听 username 值的变化
// newVal 是 "变化后的新值", oldVal 是 "变化之前的旧值"
username(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
3-2. 使用 watch 检测用户名是否可用
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:
watch:{
// 监听 username 值的变化
async username(newVal){
if(newVal === '') return
// 使用 axios 发起请求, 判断用户名是否可用
const {data:res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(red)
}
}
3-3. immediate 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项。示例代码如下：
watch:{
username:{
// handler 是固定写法, 表示当 username 的值变化时, 自动调用 handler 处理函数
handler: async function(newVal){
if(newVal === '') return
const { data:res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
// 表示页面初次渲染好之后,就立即触发当前的 watch 侦听器
immediate:true
}
}
3-4. depp 选项
如果watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用deep选项,代码示例如下：
const vm = new Vue({
el:'#app',
data:{
info:{ username : 'admin' }
},
watch:{
info:{
handler(newVal){
console.log(newVal.username)
},
deep:true
}
}
})
3-5. 监听对象单个属性的变化
如果只想监听对象中单个属性的变化,则可以按照如下的方式定义 watch 侦听器：
const vm = new Vue({
el:'#app',
data:{
info:{ username:'admin' }
},
watch:{
'info.username':{
handler(newVal){
console.log(newVal)
}
}
}
})
4. 计算属性
4-1. 什么是计算属性
计算属性指的是通过一系列运算之后,最终得到一个属性值。 这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：
var vm = new Vue({
el:'#app',
data:{
r:0,g:0,b:0
},
computed:{
rgb(){ return `rgb(${this.r},${this.g},${this.b})`}
},
methods:{
show(){ console.log(this.rgb) }
},
})
4-2. 计算属性的特点
- 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性
- 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算。
