过滤器 filters
可以用于文本格式化
用在：1. 插值表达式 2. v-bind属性绑定
使用方法
由“管道符”|进行调用
代码语言：javascript
复制
<!-- 通过过滤器对message进行过滤 --> <p>{{message | 过滤器}}</p>
<!-- 通过过滤器对title进行过滤 -->
<div :title="title | 过滤器"></div>
定义过滤器
局部过滤器
在 filters 节点中定义过滤器，该过滤器只能在当前组件中调用。
代码语言：javascript
复制
// 提供过滤器
filters: {
// 首字母大写过滤器
upcase(input) {
// input 是需要过滤的内容
const str = input
.split(' ')
.map((item) => {
return item[0].toUpperCase() + item.slice(1)
})
.join(' ')
return str
}
}全局过滤器
在main.js中通过Vue.filter()
方法定义全局过滤器
代码语言：javascript
复制
// 全局过滤器 处理时间
Vue.filter('time', (input) => {
return moment(input).format('YYYY-MM-DD HH:mm:ss')
})调用多个过滤器
代码语言：javascript
复制
<template>
<div id="app">
<div>{{ msg | firstup | len}}</div>
</div>
</template>过滤器传参
代码语言：javascript
复制
<template>
<div id="app">
<div>{{ len(3) }}</div>
</div>
</template>过滤器：
代码语言：javascript
复制
filters: {
len(input, length = 10) {
// 10是默认值，忘记传实参时就用10
return input.length > length ? input.slice(0, length) + '...' : input
}
}计算属性 computed
计算属性是一个 function，这个 function 的返回值就是计算属性最终的值。
基本使用
定义
代码语言：javascript
复制
// 组件的数据： 需要计算的属性
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}使用
代码语言：javascript
复制
<p>{{ reverseMsg }}</p>注意：计算属性默认不允许修改，因为计算属性是根据别的值计算的
完整写法
get()定义计算属性set()修改计算属性
代码语言：javascript
复制
computed: {
// 计算属性完整写法：一个对象
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(value) {
const arr = value.split('')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}计算属性的缓存
计算属性只要计算了一次，就会把结果缓存起来，以后多次使用计算属性，直接使用缓存的结果，只会计算一次。
计算属性依赖的属性一旦发生了改变，计算属性会重新计算一次，并且缓存
属性监听 watch
基本使用
监听基本数据类型
例如：
监听金钱变化案例：
定义
代码语言：javascript
复制
watch: {
// 参数1： value 变化后的值
// 参数2： oldValue 变化前的值
money(value, oldValue) {
console.log('钱多啦！！！！', value, oldValue)
}
}使用
注册一个点击事件
代码语言：javascript
复制
<template>
<div id="app">
<h1>监听属性</h1>
<div>金钱：{{ money }}</div>
<div>消息：{{ msg }}</div>
<button @click="money++">挣钱</button>
</div>
</template>监听到money数据变化时，就就会打印 “钱多啦！！！！”
深度监听
监听复杂数据类型
代码语言：javascript
复制
// 监听的完整写法
watch: {
user: {
handler(value) {
console.log('你变啦', value)
},
// 深度监听
deep: true,
// 立即监听*(页面一打开就监听)* 默认为false
immediate: false
}
}监听到对象中的属性发生变化时，就打印 “你变啦”
