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

2021年9月29日 10点热度 0条评论 来源: 离空半夏

动态样式

  • 作用:使用声明式变量来控制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,并执行)
    原文作者:离空半夏
    原文地址: https://www.cnblogs.com/xsc1234/p/15426836.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。