“这是sylu计算机协会第一次技术征文活动”
3.过滤器
过滤器是为vue为开发者实现文本格式化。可以用在插值表达式和v-bind属性绑定
在vue3中过滤器这个功能已经被砍掉
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”调用，实例代码如下：
<p>{{message|capitaliee}}</p> //调用capitalize过滤器对message的值进行格式化
<div v-bind:id"message|formatId"></div> //调用formatId过滤器进行格式化
过滤器函数需要声明
<body>
<div id='app'>
<p>{{message|capi}}</p>
</div>
</body>
<script src='引入vue脚本文件'></script>
<script>
const vm = new Vue({
el:'#app'，
data:{
username:'lq'
}
//过滤器本质是函数必须定义在filters节点之下
filters:{
//这里的形参一直都是管道符之前的那个数据
capi(val){
//强调：过滤器中一定要存在返回值
return "返回展示数据"
}
}
})
</script>
私有过滤器和共有过滤器
在filters中的定义的过滤器只能在该
el（实例）之下可以使用，其他的无法引用
想要在多个实例中使用这个实例就要定义全局过滤器
Vue.filter("capitalize",(str)=>{
return ?;
})
- 第一个参数是全局过滤器的名字
- 第二个是全局的处理函数
如果全局过滤器和私有过滤器名字一致采取“就近原则“采用私有过滤器
4.侦听器
watch侦听器
允许开发者监视数据变化，从而对某县数据变化儿做的某些操作
<script>
const vm = new Vue({
el:'#app'，
data:{
username:'lq'
}
//所有侦听器都在watch节点之下
watch:{
//侦听器本质是一个函数，以监听数据名为函数名
username(newVal,oldVal){
//形参前一个是新值后一个是旧值
}
}
})
</script>
- 可被用于检测用户名是否被占用，反复发送请求后端内容不断判断
如果希望进来就触发侦听器就要对侦听器的格式进行修改
侦听器格式
- 方法格式的侦听器
- 缺点1：无法在刚进入页面的时候自动触发！！！
- 缺点2：如果侦听的是一个对象，而对象中的属性发生了变化，不会触发侦听器！！！
- 对象格式侦听器
- 好处1：可以通过immediate选项，让侦听器自动触发！！！
- 好处2：可以使用deep选项，可以是侦听器中的对象中的属性的变化！！！
<script>
const vm = new Vue({
el:'#app'，
data:{
username:'lq'
}
//所有侦听器都在watch节点之下
watch:{
username：{
//侦听器处理函数
handler(newVal,oldVal){
}，
//定义是否在进入页面时触发监听器，默认值时flase
immediate:ture/flase
}
}
})
</script>
- 深度侦听
<script>
const vm = new Vue({
el:'#app'，
data:{
info:{
username:"lq"
}
}
//所有侦听器都在watch节点之下
watch:{
//侦听器本质是一个函数，以监听数据名为函数名
username(newVal,oldVal){
//形参前一个是新值后一个是旧值
},
deep:ture
//如果不使用事件侦听器就使用表达式单引号
'info.username'(){
//填写侦听事件发生
}
}
})
</script>
5.计算属性
计算数学时指的时通过一系列运算之后，最终得到一个属性值
这个动态计算出来的属性值可以被模板结构或methds方法试使用。
<body>
<div id="app">
<div>
<span>R:</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G:</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B:</span>
<input type="text" v-model.number="b">
</div>
<hr>
<div class="box" :style='backgoundColor:'rgb(${r},${g},${b})''>
{{rgb(${r},${g},${b})}}
</div>
<button @click="show">
按钮
</button>
</div>
</body>
<script>
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)}
},
})
</script>
