vue基础-动态样式&表单绑定&vue响应式原理
动态样式
- 作用:使用声明式变量来控制class和style的值
- 语法: :class/:style
- 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需要通过Vue编译,会出现‘一闪而过’的效果。
动态class
- :class='由类名拼接而成的字符串""'字符串格式
- :class='[表达式1,表达式2,...]'数组格式
- 注意:每个表达式都要求返回一个已经定义过的class类
- :class='{"css类名1":布尔值,"css类名2":布尔值,...}'
- 注意:对象语法中,key名的返回值,若是变量需要加[],key名的返回是有效的类名,value必须是布尔值(小心布尔值的隐式类型转化)
- 注意:对象语法中,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,在组件化中应用非常广泛,常用于父子组件通信
- 1.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响应式原理的更多相关文章
- vue数据更改视图不更新问题----深入响应式原理
Vue响应式原理之官方解释 当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为get ...
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue 学习三 v-model 表单绑定输入 以及修饰符的用处
v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...
- Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传
microTask mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...
- Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue动态生成表单
vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- vue -- v-model 表单绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 应用二:Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
随机推荐
- Mybatis-技术专区-如何清晰的解决出现「多对一模型」和「一对多模型」的问题
前提介绍 在mybatis如何进行多对一.一对多(一对一)的多表查询呢?本章带你认识如何非常顺滑的解决! 基础使用篇 一对一 association association通常用来映射一对一的关系,例 ...
- JS_DOM操作之绑定事件
1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...
- adb 常用命令大全(5)- 日志相关
前言 Android 系统的日志分为两部分 底层的 Linux 内核日志输出到 /proc/kmsg Android 的日志输出到 /dev/log 语法格式 adb logcat [<opti ...
- GC-优化-案例
优化案例 Service S 优化 现在看一下执行jstat -gcutil的结果 S0 S1 E O P YGC YGCT FGC FGCT GCT 12.16 0.00 5.18 63.78 20 ...
- 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 ...
- 昭山欢node资料学习笔记
以前学过一片node工作没有用,忘了,趁这个春节在整理一片 第一章 快速塔建一个局哉网服务器 const http = require("http");var server = h ...
- python函数模块
python函数模块 学习完本篇,你将会深入掌握 函数相关知识 1.函数定义 2.函数如何调用 3.递归函数以及匿名函数使用 模块相关知识 1.模块如何导入调用 2.函数调用顺序 函数定义 函数代码块 ...
- 整理STC延时函数时遇到的玄学问题
void Delay { unsigned char i, j; i = 11; j = 190; do { while (--j); } while (--i); } void Delay { un ...
- 【PHP数据结构】散列表查找
上篇文章的查找是不是有意犹未尽的感觉呢?因为我们是真真正正地接触到了时间复杂度的优化.从线性查找的 O(n) 直接优化到了折半查找的 O(logN) ,绝对是一个质的飞跃.但是,我们的折半查找最核心的 ...
- css3 flex的IE8浏览器兼容问题
我这是进行判断浏览器 css判断ie版本才引用样式或css文件 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> &l ...