vue基础api

设置动态样式

• 动态class:给v-bind设置动态的值

语法(1):<标签 :class="变量">
语法(2):<标签 :class="{类名1:bool,类名2:bool}">
语法(3);<标签 :class="[类名1:属性值,类名2:属性值]">

• 动态style:给标签设置动态的style值

语法(1):<style="{key:value}">
语法(2):<style="对象名">
methods;{
对象名(){ key:value}
}
语法(3):<style="数组名">
数组名:[{key:value}]

两者都可以与静态共存

数据代理

• vue中的数据代理:通过vm对象来代理data对象中的属性操作

• 好处:更加方便的操作data数据

• 原理:1.通过object.defineProperty()把data对象中所有的属性添加到vm

  2.为每一个添加到vm上的属性,都指定一个getter/setter(说白了就是get/set函数)

  3.在getter/setter内部操作data中对应的属性

computed:{
    属性名: {
     get(){
      return  读取执行的代码 },
      set(val){  
      return  修改执行的代码 }
     }
    }

监听器

     watch: {
     "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {   }
       }       
       }