Vue 过滤器 侦听器 计算属性

动态class 动态style

1.
● 格式1：<标签 :class=“变量” />
● 格式2：<标签 :class=“{类名1: 布尔值, 类名2: 布尔值}” />
○ 如果布尔值为true，就添加对应的类名
2.
<标签 :style=“{css属性名: 值}” />

1. 可以和静态style共存
2. 样式中带-属性写成小驼峰

过滤器

作用:对数据格式调整,在显示出来之后,进行一些格式调整
格式:
定义:是一个对象中有多个函数,每个函数就是一个过滤器 使用在视图中和插件表达式结合使用
分类 : 全局 局部

计算属性

作用:对现有的数据进行加工,得到新数据项
定义: { computed:{ 计算属性名1: function() { return} }}
使用 在模板中{{ 计算属性名}} 在实例内部 this.计算属性名 与data数据项的使用一致
特点: 响应式的 如果它依赖的数据变化 ,则他会变化 缓存 : 如果在页面使用同一个计算属性多次,那么它会执行一次

计算属性-完整写法

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

created

他是一个函数 当vue 实例创建完成 会自动调用 这一类函数也称为钩子函数 生命周期函数

watch侦听器 可以监听值得变化

他可以监听数据的变化 一旦数据项有变化 ,它就会执行
格式: new Vue{{ watch :{侦听器1: 组件1 : (新值,旧值) { }}}

watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}
//修改data的对象的属性的值 (要深度监听)    data->obj->(修改name的值)name
//v-model一起使用
 watch: { // 固定属性(设置监听哪些属性)
    user: { // 具体属性名(被监听)
      handler(newVal, oldVal){ // 固定触发此函数
        console.log(newVal);
      },
      immediate: true, // 马上监听触发
      deep: true // 深度监听(监听name和age值的改变)
    }
  }

components

组件:可服用的vue实例
对页面上的各个部分,根据实际需要进行封装 组件
是一个封闭体系
格式: 定义 new Vue ( {{componens :{ 组件 1: { 配置项 }}})
三大件 data() return{ //数据项}
template
methods

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}