专栏首页csicovue基础-动态样式&表单绑定&vue响应式原理

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,并执行)

原文链接:https://www.cnblogs.com/xsc1234/p/15426836.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue响应式原理(数据双向绑定的原理)

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

    Javanx
  • 【初级】个人分享Vue前端开发教程笔记

    每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!

    达达前端
  • Vue基础(必会)

    基础 - 系统指令 -v-for ( key 属性)(非常重要的面试题) 基础 - 系统指令 -v-for ( key 属性)(非常重要的面试题)

    CaesarChang张旭
  • vue核心概念

    冬夜先生
  • 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    如果想注册局部指令,组件中接受一个directives的选项,位于vue实例参数里面,局部指令只能在本组件使用

    常见_youmen
  • Vue全家桶之Vue基础(1)

    Vue全家桶之Vue基础(1)

    Java架构师必看
  • 「面试三板斧」之框架

    React 和 Vue 这两个极其优秀的前端类库,基本上占据了前端开发的半壁江山。

    lucifer210
  • Vue.js学习笔记(一)

    目前我司的后端主要是用PHP来写,发现我们后端的html+js没有采用组件的方式来做,导致代码之间重复率非常高,很难维护,举一个简单的粟子,比如现在我们有两个页...

    kunge
  • Week 1: Vue.JS

    Vue.JS是一个JavaScript框架,它借鉴了MVVM的思想,Vue对象就像view model,使用Vue能够轻松地分离数据与视图表现,数据的变化会使视...

    gojam
  • Vue 3 模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层应用实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被...

    公众号---人生代码
  • Vue初步认识与Vue基础指令

    Vue.set()方法有三个参数,分别是数组,索引,新内容,用这个办法可以代替操作,以实时更新视图

    conanma
  • 2020前端技术面试必备Vue:(一)基础快速学习篇

    本章节,我将带领大家一起刷Vue 技术点,来应对接下来的面试,此次会陆续更新Vue全家桶:Vue VueX Vue-Router ;以及后面时...

    小阿新
  • Vue2.5 零基础开发去哪儿网实战(二) - 起步 Vue.js

    本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势。

    JavaEdge
  • vue必会面试题+答案

    React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,但是很多组件实际上是肯定不会发生变化的,...

    zz1998
  • 【第一季】Vue2.0内部指令

    学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

    用户1212940
  • 0基础菜鸟学前端之Vue.js

      简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构 前端基础 Vue.js简介 Vue...

    互联网金融打杂
  • 前端vue面试题,附答案

    vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

    zz1998
  • 来吧!一文彻底搞定Vue组件!

    组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么。

    达达前端
  • 重学巩固你的Vuejs知识(上)

    https://github.com/webVueBlog/interview-answe/issues/156

    达达前端

扫码关注云+社区

领取腾讯云代金券