私有过滤器

• 过滤器要定义到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

• axios是一个专注于网络请求的库

1. 发起get请求

axios(){
	method:'GET',
    url:'',
    params:{
    	id:1
    }.then(function(result){
    	console.log(result)
    })
}

2. 发起POST请求

axios(){
	method:'POST',
    url:'',
    data:{
    	name:'1'
    },
}.then(function(result){
	console.log(result)
})

3. 如果某个方法返回的是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)

})

4. axios直接发起请求

document.querySelector('#app').addEventListener('click', async function(){
	const{ data:res }=await axios.get('http://www.baidu.com'){params:{id:1}}
})