监听器
过滤器是Vue为卡法者提供的功能,常用于文本的格式化,过滤器可以用在两个地方: 插值表达式和v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部,由管道符进行调用
示例
<p>{{message | capitalize}}</P>
<div v-bind:id='rewId | formatId'></div>
基本使用
<div id='app'>
<!--这时候获取到的是过滤器的返回值-->
<p>获取到的数值是: {{msg | capi}}</p>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
filters: {
capi(val){
//要有返回值
return: val.charAt(0).toUpperCase() + val.slice(1)
}
}
})
</script>
</div>
私有过滤器
私有的过滤器就是基础案例里面的示例
全局过滤器
全局过滤器 - 独立于每个vm实例之外
Vue.filter() 方法接收两个参数
如果全局过滤器和私有过滤器名字一致,采用就近原则调用局部过滤器
- 第一个参数,是全局过滤器的名字
- 第二个参数,是全局过滤器的"处理函数"
Vue.filter('capitalize',(str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '@@'
})
使用全局过滤器格式化时间
<div id='app'>
<!--这时候获取到的是过滤器的返回值-->
<p>获取到的数值是: {{msg | capi}}</p>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<!--格式化之前需要使用Day.js的库文件-->
<script>
Vue.filter('dateFormat',function(time)){
dayjs().format('YYYY-MM-dd HH:mm:ss')
}
const vm = new Vue({
el: '#app',
data: {
msg: new Date()
}
})
</script>
</div>
过滤器还可以多用多个,传参数的时候要从第二个数值进行传值,第一个是原始数据
侦听器
watch侦听器允许开发者监听数据变化,从而针对数据的变化做特定的操作
示例
const vm = new Vue({
el: '#app',
data: {username: ''},
watch: {
username(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
使用
<div id='app'>
<input type='username' v-model='username'></input>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<!--格式化之前需要使用Day.js的库文件-->
<script>
Vue.filter('dateFormat',function(time)){
dayjs().format('YYYY-MM-dd HH:mm:ss')
}
const vm = new Vue({
el: '#app',
data: {
username: ''
},
watch: {
//侦听器本质是一个函数,绑定的值最为行数名
username(newVla,oldVal){
console.log('监听username的值')
}
}
})
</script>
</div>
侦听器的格式
方法格式的侦听器
- 缺点1: 无法在进入页面的时候自动触发
- 缺点2: 如果侦听的是一个对象,如果对象中的属性发生了变化。不会触发侦听器
对象格式的侦听器
- 优点1: 可以通过immediate 选项,让侦听器自动触发
- 有点2: 可以通过deep属性进行深度侦听
<div id='app'>
<input type='username' v-model='username'></input>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<!--格式化之前需要使用Day.js的库文件-->
<script>
Vue.filter('dateFormat',function(time)){
dayjs().format('YYYY-MM-dd HH:mm:ss')
}
const vm = new Vue({
el: '#app',
data: {
username: ''
},
watch: {
username: {
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate: true
}
}
}
})
</script>
</div>
深度侦听
- 第一种方式深度监听
<div id='app'>
<input type='text' v-model='info.username'></input>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<!--格式化之前需要使用Day.js的库文件-->
<script>
Vue.filter('dateFormat',function(time)){
dayjs().format('YYYY-MM-dd HH:mm:ss')
}
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch: {
info: {
handler(newVal){
console.log(newVal)
},
deep: true
}
}
})
</script>
</div>
- 第二种深度监听方式(一步到位)
<div id='app'>
<input type='text' v-model='info.username'></input>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<!--格式化之前需要使用Day.js的库文件-->
<script>
Vue.filter('dateFormat',function(time)){
dayjs().format('YYYY-MM-dd HH:mm:ss')
}
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch: {
`info.username`(newVal){
console.log(newVal)
}
}
})
</script>
</div>
计算属性
计算属性指的是通过一系列运算之后,最终得到一个属性值.
这个动态计算出来的属性值可以被模板构成methods方法使用
<div id='#app'>
<div class='box' :style='{backgroundColor: rgb}'>
{{rgb}}
</div>
<button @click='show'>按钮</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
r:0,
g:0,
b:0
},
methods: {
show(){
console.log(`rgb(${this.r},${this.g},${this.b})`)
}
},
computed: {
rgb: function(){
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
</script>
</script>
},
methods: {
show(){
console.log(`rgb(${this.r},${this.g},${this.b})`)
}
},
computed: {
rgb: function(){
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
</script>
</script>
本文含有隐藏内容，请 开通VIP 后查看