Vue
Vue
lijieling123
努力赚钱
展开
-
Vue基础
Vue遵循SoC关注度分离原则前端基础结构层:HTML表现层:CSS–CSS预处理器:用一种专门的语言,进行Web样面设计,再通过编译器转化为正常的CSS常用的:SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单,一般用这个)行为层:JSVue概念Augular特点:将后台的MVC模式搬到前端并增加了模块化开发的理念(MVVM)(VM双向绑定相当于控制层)React特点: 提出新概念虚拟DOM, 用于减少真实的DOM操作,在内存中模拟DOM操作,提升前端的渲染效率Vu原创 2022-04-09 11:32:49 · 3060 阅读 · 0 评论 -
Vue题目总结
v-model实现原理1.v-bind 绑定响应式数据2. 触发oninput 事件并传递数据Vue2.0 双向绑定的缺陷1.vue 实例创建后,无法检测到对象属性的新增或删除,只能追踪到数据是否被修改解决方案:改变get和set, 新增属性的时候,可以给子响应对象重新赋值2. 不能监听数组的变化解决方案:重写Array.prototype对应的方法* 组件传值,事件总线是怎么用的新建一个Vue事件bus对象,然后通过bus.emit触发事件,bus.emit触发事件,bus.emit触发事件,b原创 2021-07-05 22:22:23 · 93 阅读 · 0 评论 -
Vue2学习笔记(二)
视频P22,23 计算属性P24,25自定义全局过滤器,局部过滤器P29,30,31 过渡动画如果不想让动画复位的话就用钩子函数钩子函数是好比找了个代理,监视事件是否发生,如果发生了这个代理就执行你的事件处理方法;在这个过程中,代理就是钩子函数在某种意义上,回调函数做的处理过程跟钩子函数中要调用调方法一样P35,36 v-for注意点加上key之后...原创 2021-06-24 18:49:56 · 63 阅读 · 0 评论 -
Vue原理深入理解(一)
响应式原理原创 2021-06-20 16:25:58 · 80 阅读 · 1 评论 -
Vue3.0学习笔记(五)
学习视频P25 ref获取元素P26 readonlyconst和readonly的区别const:赋值保护,不能给变量重新赋值readonly:属性保护,不能给属性重新赋值P27,28 响应式数据的本质实现Proxy的get和set方法,传入一个对象set方法必须通过返回值告诉Proxy此次操作是否成功P29 shallowReactive-shallRef非递归监听shallowReactive,只关注第一层,key一开始就是第一个P30 reactive-ref判断数原创 2021-05-31 16:23:28 · 82 阅读 · 0 评论 -
Vue3.0学习笔记(四)
学习视频P17shallowRef本质ShallowRef监听的是.value的变化,因为底层本质上value才是第一层P18,19 toRaw从Reactive和ref中获取原始数据有一些操作不需要更新UI界面的时候,可以通过toRaw拿到原始数据,对原始数据进行修改,这样就不会修改UI界面,性能就好注:如果想通过toRaw拿到ref的原始数据,要输入.value的值 (ref的本质)P20 MarkRaw数据永远不被跟踪,不更新界面P21,22 toRef, toRefstoRef的原创 2021-05-31 11:45:23 · 179 阅读 · 0 评论 -
Vue2学习笔记(一)
学习视频P1 Vue开篇优势:1.数据驱动界面更新 2.组件化开发P2 Vue基本使用基本模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <!-- 1.下载导入 --> <script src="js/vue.js"></script>&l原创 2021-05-30 18:53:02 · 87 阅读 · 0 评论 -
Vue3.0学习笔记(三)
学习视频P11 setup执行时机和注意点setup是在beforeCreate之前调用的,下面视频讲的有误P12 reactive第一个注意点比较简单,第二个注意点可以看下面的例子P13 refref本质还是reactive,所以取值的时候:如age.value (要加value),template中使用的使用不用.valueP14 ref和reactive的区别P15 递归监听每一层都包装成一个proxy对象P16 非递归监听ShallowReactive非递归监原创 2021-05-30 14:53:05 · 58 阅读 · 0 评论 -
Vue3.0学习笔记(二)
学习视频P6-8 组合API理解解决2.0数据和业务逻辑分散的问题另外一个优势:可以放到其它模块去管理P10 组合API本质-理解V2的Option API可以和Composition API混合使用Composition API叫做组合/注入API本质就是:把数据和方法注入到原来的data和methods...原创 2021-05-30 12:46:34 · 71 阅读 · 0 评论 -
Vue3.0学习笔记(一)
学习视频中文文档仓库中文文档P1Vue 3性能比Vue 2快的原因:P2和P3节讲的P2 diff算法Vue2.0采用的全量比较,这样有一些不会改变的节点(如不绑定数据的)也会跟着去比较,这样效率就不高。Vue3.0将会改动的节点添加标记,这样就只比较有标记的,效率就高了静态标记的附录:P3 静态提升和监听缓存静态提升注:把不需要参与更新的元素放到外面静态提升之前:静态提升之后:监听缓存注:开启事件监听之后可以发现那个静态标记没有了,说明不会进行比较开启事件监听之前原创 2021-05-28 11:33:38 · 106 阅读 · 0 评论 -
Vue(二)
v-modelv-model会忽略表单元素的value,checked,selected特性的初始值,将Vue实例的数据作为数据来源。如果v-model表达式的初始值未能匹配任何选项,元素将被渲染为”未选中“,在IOS中,用户不能选择第一个选项,不会触发change事件,推荐提供一个值为空的禁用选项计算属性计算属性的重点突出在属性两个字上,首先它是个属性,其次这个属性有计算能力。也就是说,它是一个能将计算结果缓存起来的属性(将行为转为静态的属性)计算属性就是为了将不经常变化的计算结果进行缓存,节约原创 2021-05-16 14:43:19 · 65 阅读 · 0 评论 -
Vue(一)
遵循SoC关注度分离原则1.前端基础结构层:HTML表现层:CSS--CSS预处理器:用一种专门的语言,进行Web样面设计,再通过编译器转化为正常的CSS常用的:SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单,一般用这个)行为层:JS2.VueAugular特点:将后台的MVC模式搬到前端并增加了模块化开发的理念(MVVM)(VM双向绑定相当于控制层)React特点: 提出新概念虚拟DOM, 用于减少真实的DOM操作,在内存中模拟DOM操作,提升前原创 2021-05-12 11:30:08 · 116 阅读 · 0 评论 -
vue--avatar图像读取不到的问题
一开始直接把网上图像右键打开链接地址,然后复制,不能显示解决办法:需要去第三方网站转换地址:https://sm.ms/,选择图片后upload,然后选择所对应的URL地址,比如这里的src<img src=“https://i.loli.net/2021/05/02/OSEtd62Cunx1VXH.gif”...原创 2021-05-02 11:50:11 · 1451 阅读 · 0 评论