day04内容
8. 计算属性与监听器
1) 计算属性
一般指的是对data中的原有数据进行计算之后返回的结果,这个计算属性可以当做属性来使用。当原有数据发生改变的时候,计算属性会立即执行重新计算。当原值不发生改变,当调用多次计算属性,计算属性函数只会执行一次。但是如果使用方法或者过滤器则不同。
查询到所有的文章,在显示的时候将发布时间(时间戳)格式化之后再输出?
new Vue({
data:{
message:'hello world'
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
{{reverseMessage}}
{{reverseMessage}}
{{reverseMessage}}
2) 监听器
new Vue({
watch:{
message: function(now,old){
},
msg : {
handler:function(now,old){},
deep:true // 一般情况下用于监听引用数据类型中值的变化
}
}
})
注意:监听属性如果包含特殊字符,请使用引号引起来,比如,我们要监听form中的username
watch:{
"form.username":function(){
}
}
9. 过滤器
1) 局部定义 - 仅对于当前组件有效
new Vue({
filters:{
dateFmt(val){
// 对val处理之后进行返回
return val;
}
}
})
2) 全局定义 - 针对于所有的组件都有效
Vue.filter('dateFmt',function(val){
// 对val处理之后进行返回
return val;
})
引用
{{ new Date().getTime() | dateFmt }}
v-bind:time=" new Date().getTime() | dateFmt "
10.组件基础
类似于bootstrap,但是和bs完全不再一个级别,vue组件是封装了js,html,css的独立单元,我们可以使用虚拟标签直接调用
目前比较成熟的组件库:
pc:
elementui 饿了么
antdesign 蚂蚁金服
phone(小程序):
mintui
vantui
....
语法:
1. 组件定义(比较麻烦-了解)
一个组件就是一个vue的最小单元,v m vm
1)全局注册
Vue.component('briup-alert',{
与Vue构造函数参数类似
template:`html`,
data(){ // 保证每一个组件都有一份独立的data
return {
}
},
props:['title'] // 期望从父组件中接收到的变量
})
2)局部注册
2. 组件调用(精通)
<briup-alert title="one"></briup-alert>