vue基础-动态样式&表单绑定&vue响应式原理

动态样式

• 作用：使用声明式变量来控制class和style的值
• 语法： ：class/：style
• 注意：尽可能不要把动态class和静态class一起使用，原因动态class起作用的时间会比较晚，需要通过Vue编译，会出现‘一闪而过’的效果。

动态class

• :class='由类名拼接而成的字符串""'字符串格式
• :class='[表达式1,表达式2,...]'数组格式
  • 注意：每个表达式都要求返回一个已经定义过的class类
• :class='{"css类名1":布尔值，"css类名2":布尔值,...}'
  • 注意：对象语法中，key名的返回值，若是变量需要加[],key名的返回是有效的类名，value必须是布尔值（小心布尔值的隐式类型转化）

    

动态style

• :style='ss' ss可以是html5中style值的字符串，还可以是[{},{}]数组语法，还可以直接是{css属性：css属性值}
• :style='[{},{}]'
  • 注意：数组中的每个对象都是'css属性':css属性值 构成的对象
• ：style='{css属性:css属性值，...}'

  

表单绑定

• 表单：文本框，拾色器，多行文本框，下拉框，复选框，单选按钮组等...
• 从组件化的角度，凡是会发生值得的变化组件，都可以被认为是表单
• 注意：
  • 1.在单/复选框时，给他们添加同一组v-model，就可以变成一组，同时需要添加：value用于双向绑定
  • 2.一般多选框的v-model要设置一个类型为数组的声明式变量，但是我们提交给后端时，常常需要将其转化为以“；”，“#”分割的字符串，可以使用arr.join(";")方法

    

• 如何理解v-model这个指令
  • 1.v-model是一种语法糖（一种比较好用的简写）
    • 对于普通文本框来讲，v-model = v-bind：value + v-on：change
    • 对于单选按钮组，复选框来讲，v-model =v-bind：checked + v-on：change
    • 对于下拉框来讲，v-model = v-bind：value + v-on：change

      

  • 2.v-model，在组件化中应用非常广泛，常用于父子组件通信

响应式

• 响应式？vue可以监听一个变量的变化，当变量发生变化时，vue可以做一些工作。当面试官问响应式的原理，是问什么呢？问的是“vue如何监听data选项上的变量的变化的？”
• 双向绑定？专指vue表单的v-model

模拟响应式实现过程

• 简介：1.首先创建vue实例，通过object.defineproperty设置拦截器

  

• 2.当使用v-text等指令操作时，会进行touch，定义一个dep收集依赖，存放与异步队列中

  

• 3.v-model，还可以设置值，相当于调用set方法

  

• 4.进行初始化，第一次渲染需要通知watcher观察者函数

  

• 5.定义观察者函数，当调用set修改声明式变量的值，发生变化时，会通知监听器，重新渲染，（即遍历收集依赖队列的所有fn，并执行）