一、vue过滤器
过滤器(filters)是vue为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方,插值表达式和v-bind属性绑定。
注意:过滤器仅在vue2.x和1.x中受支持,vue3.x剔除了过滤器相关的功能
使用
过滤器应放在js表达式的尾部,和管道符 “|” 一起使用
分类
私有过滤器 定义在filters节点下,只能在当前vm实例所控制的el区域中使用的过滤器。
<div id="app">
<!-- 过滤器写在管道符后面 -->
<p>message的值是:{{msg|capi(10)|cap}}</p>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "hello vue.js"
},
//过滤器函数必须被定义到filters节点中
//过滤器本质上是一个函数
filters: {
//过滤器中第一个形参永远是管道符前面那个值
capi(a) {
//过滤器中一定要有返回值
return a[0].toUpperCase() + a.slice(1);
},
cap(val) {
return val + 1;
}
}
})
</script>
运行结果
message的值是:Hello vue.js1
全局过滤器 可以在多个vue实例之间共享的过滤器。
<div id="app1">
<!-- 使用的是私有过滤器 -->
<p>值是:{{msg|capi}}</p>
</div>
<div id="app2">
<!-- 使用的是全局过滤器 -->
<p>值是:{{msg|capi}}</p>
</div>
<script>
// 定义全局过滤器
Vue.filter("capi", (str) => {
return str[0].toUpperCase() + str.slice(1) + "~~~";
})
const vm1 = new Vue({
el: "#app1",
data: {
msg: "hello vue.js,vm1",
},
//定义私有过滤器
filters: {
capi(val) {
return val[0].toUpperCase() + val.slice(1);
}
}
})
const vm2 = new Vue({
el: "#app2",
data: {
msg: "hello vue.js,vm2"
}
//vm2没有定义过滤器,但是数据源发生了改变,因为使用了全局过滤器
})
</script>
运行结果
值是:Hello vue.js,vm1
值是:Hello vue.js,vm2~~~
注意事项
1.过滤器本质上是一个函数
2.在过滤器函数中一定要有return值
3.过滤器函数的第一个参数永远都是管道符待处理的值,第二个参数开始才是传过来的值
4.过滤器可以串联使用
<!-- 过滤器串联使用,接收的是过滤器处理后的值 -->
<p>message的值是:{{msg|capi(10)|cap}}</p>
二、vue侦听器
watch侦听器允许开发者监视数据的变化,从而针对数据变化做特定的操作。只要数据源发生变化,就会触发操作。
用途
实时验证用户输入的用户名是否被占用
分类
方法格式侦听器 将要监听的属性以方法的形式写在watch中。
<div id="app">
<input type="text" v-model="username">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
username: ""
},
//所有侦听器都应该被定义在watch节点上
watch: {
//侦听器本质上是一个函数,要监视那个数据的变化,就只要把数据名变为方法名即可
username(newVal, oldVal) {
//新值在前,旧值在后
console.log(newVal, oldVal);
//当username中的值发生改变时,就会执行username侦听器函数
}
}
})
</script>
缺点
1.无法在刚进入页面时,自动触发
2.如果对象中的属性值发生变化,无法监听到
对象格式监听器 j将要侦听的属性以对象的形式写在watch中。
handler侦听器函数
watch: {
//对象格式的侦听器
username: {
//侦听器处理函数:数据源发生变化时执行,函数名都是handler
handler(newVal, oldVal) {
//新值在前,旧值在后
console.log("abc");
}
}
},
可以通过往对象中添加一些属性完成一些功能
1.添加immediate属性,立即执行,不需要等到数据源发生变化再执行
2.添加deep属性,深度监听,当对象中的任何属性发生改变都可以监听到
添加immediate选项
watch: {
//对象格式的侦听器
username: {
//侦听器处理函数:数据源发生变化时执行,函数名都是handler
handler(newVal, oldVal) {
//新值在前,旧值在后
console.log("abc");
},
//立即执行侦听器函数
immediate:true
}
},
添加deep选项
缺点:对象info中的任何一个值发生变化都会触发侦听器函数,不论是username还是age。
<div id="app">
<input type="text" v-model="info.username"><br>
<input type="text" v-model="info.age">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
info: {
username: "admin",
age: 18
},
},
watch: {
//监听对象里的所有属性
info: {
//info对象中的每一个属性发生变化都会触发handler函数
handler(newVal, oldVal) {
console.log("abc");
},
immediate: true,
deep: true
}
}
})
</script>
为了让对应的属性发生,而不是所有属性发生变化才执行侦听器函数,采用另外一种写法。
//监听对象里的单个属性,这样只有username发生变化时才会触发侦听器函数,age发生变化时不会
'info.username': {
handler() {
console.log("abc");
},
immediate: true,
deep:true
}