vue常用内容小记

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

前言

现在刚毕业的都太厉害了，我这工作了两年的还是渣渣，哎，惭愧啊，最近准备把vue的知识点再过一下，做个小总结记录一下

vue中动态class的写法

• 如果在vue事件中想要获取到事件对象，直接写$event传参即可
• 当属性设置false或者true的时候要在属性前加：，否则false和true是字符串，传递数字的时候也是如此a="1",表示字符串:a=“1”表示数字
• :class = "{active: activeIndex === index}"
• 既有可变又有不便的类，用数组的形式:class = "['item',{active: activeIndex === index}]"

computed的使用

• 用于将复杂的表达式封装，用一个函数名来使用

    computed :{
        reverseMsg(){
            return this.msg.split('').reverse().join('')
        }
    }
    
    //使用的时候直接用{{reverseMsg}}，msg为 data中的数据

• 可以从data中筛选出我们想要的新数据

 computed :{
        watchedMovies(){
            //return this.movies.filter(movie => movie.status) 简写形式，如果需要返回的是movie.status === false,写为!movie.status即可
            return this.movies.filter(function (movie) {
                return movie.status === true
            })
        }
    }

• 有数据响应,如果computed中使用的是data中的数据，data数据发生改变，computed也会改变

filter（这个以前都没怎么用过，现在发现挺好用的）

过滤器的创建和使用

• 全局创建

 Vue.filter('fds',(value) => {
    return value.toFixed(2)
})

• 局部创建

filters：{
    fds(value){
        return value.toFixed(2)
    }
}

使用

{{ value | fds }}

watch（用户监听数据的变化，以便做出一些需要做的操作）

watch中写的还是函数，不需要调用watch可以监听到data中值的变化，但默认只能监听到data中数据第一层的变化

例子：

//obj是对象
obj(val){
    //这里的val就是新值
    console.log('obj变化了')
}

//如果想要监听obj对象中的属性变化，要用下面的格式来写
obj：{
    handler(){
        console.log('obj变化了')
    }
    deep:true
    //下面属性表示页面刷新时立马执行handler，一般可以省略不写
    immediate：true
}

//监听某个对象中的某个特定属性变化可以写成如下形式
'obj.a' (){ //一定要加引号
    console.log('obj.a发生改变')
}

总结

现在的技术更新迭代太快了，感觉都跟不上了，老技术还没掌握熟练，新技术就又出现了，vue3，typescript，vite，react都还没怎么接触，要学习的东西太多了，有点焦虑，感觉到了道阻且长,却没感觉到行则将至，希望能一天比一天好吧，加油