私有过滤器
- 过滤器要定义到filters节点下，本质是一个函数
- 过滤器函数一定要有return返回值
- 过滤器函数形参可以调用 | 前边的值
<div id="app">
<p>打印出来的文字是：{{ username | paip }}</p>
</div>
filters:{
paip(val){
return val.charAt(0).toUpperCase()+val.slice(1)
}
}
全局过滤器
- 全局过滤器和私有过滤器名称一致，按照就近原则调用
- 全局过滤器要在开头声明，不然会报错
Vue.filter('paip',function(str){
return str.charAt(0).toUpperCase()+ str.slice(1)
})
- 过滤器可以串联 p | m | n 依次调用
- 过滤器也可以传参，但函数调用里形参第一个必须是管道符前边的值
方法格式侦听器
- 无法在刚进入页面的时候触发
- 对象里属性发生变化，不会触发侦听器
<input type="text" v-model="username">
watch:{
username(newval){
$.get('https://www.escook.cn/api/finduser/'+ newval,function(result){
console.log(result)
})
}
}
对象格式侦听器
- 可以通过immediate(true)自动触发一次
- 优先考虑方法格式
- 可以通过deep侦听器，侦听对象每个属性的变化
<input type="text" v-model="username">
watch:{
usernames:{
hanlder(newval,oldval){
$.get('https://www.escook.cn/api/finduser/'+ newval,function(result){
console.log(result)
})
},
immediate:true
}
}
计算属性
- 所有的计算属性都要放到computer节点下，需要定义为方法格式，且有返回值
- 定义的方法名可以当作属性直接调用
- 计算属性中依赖的数据源变化，会自动重新求值
<div v-html="info">{{ rgb }}</div>
computed:{
rgb:function(){
return `rgb(${this.r},${this.g},${this.b})`
}
},
axios
- 发起get请求
axios(){
method:'GET',
url:'',
params:{
id:1
}.then(function(result){
console.log(result)
})
}
- 发起POST请求
axios(){
method:'POST',
url:'',
data:{
name:'1'
},
}.then(function(result){
console.log(result)
})
- 如果某个方法返回的是Promise实例，前边可以加await，await 只能用在被async修饰的方法中
- { data }解构，解构赋值的时候使用“ ：”进行重命名
document.querySelector('#app').addEventListener('click', async function(){
const { data:res }=await axios(){
method:'POST',
url:'',
data:{
name:'1'
},
}
console.log(res.data)
})
- axios直接发起请求
document.querySelector('#app').addEventListener('click', async function(){
const{ data:res }=await axios.get('http://www.baidu.com'){params:{id:1}}
})
