vue学习笔记(二)

私有过滤器

  • 过滤器要定义到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)
    })
}
  1. 发起POST请求
axios(){
	method:'POST',
    url:'',
    data:{
    	name:'1'
    },
}.then(function(result){
	console.log(result)
})
  1. 如果某个方法返回的是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)

})
  1. axios直接发起请求
document.querySelector('#app').addEventListener('click', async function(){
	const{ data:res }=await axios.get('http://www.baidu.com'){params:{id:1}}
})
全部评论

相关推荐

06-17 00:26
门头沟学院 Java
程序员小白条:建议换下项目,智能 AI 旅游推荐平台:https://github.com/luoye6/vue3_tourism_frontend 智能 AI 校园二手交易平台:https://github.com/luoye6/vue3_trade_frontend GPT 智能图书馆:https://github.com/luoye6/Vue_BookManageSystem 选项目要选自己能掌握的,然后最好能自己拓展的,分布式这种尽量别去写,不然你只能背八股文了,另外实习的话要多投,尤其是学历不利的情况下,多找几段实习,最好公司title大一点的
无实习如何秋招上岸
点赞 评论 收藏
分享
07-03 16:13
嘉应学院 Python
xiaolihuam...:很明显骗子,如果是hr直接约你面试了,哪用得着内推,如果是员工的话,你得多优秀,一线员工直接加你微信,
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务