计算属性
定义：要用的属性不存在，需要通过已有属性计算得来。
个人理解
通过一个逻辑处理，得到一个不存在的属性。
比如 fullname = firstname + lastname
另：
定义一个fullname计算属性，得到里面get方法的返回值，返回值被命名为fullname，调用fullname
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
<div id="root">
姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
姓名：<span>{{fullName}}</span>
</div>
<script>
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
get(){
return this.firstName + '-' + this.lastName
},
set(value){ //此处 value 就是 fullname
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
get函数什么时候执行？
1.初次读取时会执行一次
2.当依赖的数据发生改变时会被再次调用
set函数什么时候执行？
计算属性被修改时
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
3.如果计算属性确定 不考虑修改 ，可以使用计算属性的简写形式
简写
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName(){ //计算属性叫fullname，函数名也叫fullname ===fullname：function（）{ }
return this.firstName + '-' + this.lastName
}
}
})
过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
个人理解
对要显示的数据进行一些简单的逻辑操作
比如例子中的time只是一个时间戳，使用过滤器之后，变成了 年-月-日
语法：注册过滤器
“全局注册”
Vue.filter(name,callback())
“局部注册”
new Vue(
filters:{
})
备注：
- 过滤器也可以接受额外参数，多个过滤器也可以串联
- 并没有改变原本的数据，是产生新的对应的数据
<h3>转换后时间：{{time | timeFormater()}}</h3>
<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
Vue.filter('mySlice',function(value){
return value.slice(0,11)
})
new Vue({
el:'#root',
data:{
time:1626750147900,
},
//局部过滤器
filters:{
timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
return dayjs(value).format(str)
}
}
})
自定义指令
在directives：{}中自定义指令
指令何时会被调用？
- 指令与元素成功绑定时
- 指令所在模板被重新解析时
<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
directives:{
big(element,binding){
console.log('big',this) //注意此处的this是window
element.innerText = binding.value * 10
}
}
