动态样式

  • 作用:使用声明式变量来控制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,并执行)

vue基础-动态样式&表单绑定&vue响应式原理的更多相关文章

  1. vue数据更改视图不更新问题----深入响应式原理

    Vue响应式原理之官方解释 当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为get ...

  2. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  3. vue 学习三 v-model 表单绑定输入 以及修饰符的用处

    v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...

  4. Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传

    microTask  mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...

  5. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  6. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  7. vue -- v-model 表单绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 应用二:Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  9. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

随机推荐

  1. Mybatis-技术专区-如何清晰的解决出现「多对一模型」和「一对多模型」的问题

    前提介绍 在mybatis如何进行多对一.一对多(一对一)的多表查询呢?本章带你认识如何非常顺滑的解决! 基础使用篇 一对一 association association通常用来映射一对一的关系,例 ...

  2. JS_DOM操作之绑定事件

    1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...

  3. adb 常用命令大全(5)- 日志相关

    前言 Android 系统的日志分为两部分 底层的 Linux 内核日志输出到 /proc/kmsg Android 的日志输出到 /dev/log 语法格式 adb logcat [<opti ...

  4. GC-优化-案例

    优化案例 Service S 优化 现在看一下执行jstat -gcutil的结果 S0 S1 E O P YGC YGCT FGC FGCT GCT 12.16 0.00 5.18 63.78 20 ...

  5. linux中花括弧大括号用法

    {1,3,5}   ==  1 3 5 {1..5}   ==  1  2  3  4  5 {a..e}  ==  a b c d e {A..z} {1..50..2} {1..50..3} {1 ...

  6. 昭山欢node资料学习笔记

    以前学过一片node工作没有用,忘了,趁这个春节在整理一片 第一章 快速塔建一个局哉网服务器 const http = require("http");var server = h ...

  7. python函数模块

    python函数模块 学习完本篇,你将会深入掌握 函数相关知识 1.函数定义 2.函数如何调用 3.递归函数以及匿名函数使用 模块相关知识 1.模块如何导入调用 2.函数调用顺序 函数定义 函数代码块 ...

  8. 整理STC延时函数时遇到的玄学问题

    void Delay { unsigned char i, j; i = 11; j = 190; do { while (--j); } while (--i); } void Delay { un ...

  9. 【PHP数据结构】散列表查找

    上篇文章的查找是不是有意犹未尽的感觉呢?因为我们是真真正正地接触到了时间复杂度的优化.从线性查找的 O(n) 直接优化到了折半查找的 O(logN) ,绝对是一个质的飞跃.但是,我们的折半查找最核心的 ...

  10. css3 flex的IE8浏览器兼容问题

    我这是进行判断浏览器 css判断ie版本才引用样式或css文件 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> &l ...