Vue
文章平均质量分 81
Vue
与宇宙对视
freedom.
展开
-
Vue响应式原理&Vue中数据的监听
文章目录Observer理解如上图Dep「依赖管理」Watcher理解如上图总结:Vue响应式原理的核心就是Observer、Dep、Watcher。Vue响应式原理理解以后就知道Vue是怎么对数据进行监听的,需要通过对Observe、Dep、Watcher的理解来了解。Observer理解如上图Dep「依赖管理」what? Dep就是帮我们收集【究竟要通知到哪里】,比如下面的案例。我们看到,data中有text和message属性,但是只有message被渲染到页面上,至于text无论怎么变化都原创 2022-04-20 21:53:00 · 793 阅读 · 0 评论 -
Vue组件之间的通信方式
Vue组件之间的通信方式1、通过 props 传递2、$emit触发自定义事件3、ref4、EventBus5、$parent 或 $root6、$attrs 与 listeners7、provide 与 inject8、Vuex1、通过 props 传递适用场景:父组件传递数据给子组件父组件在使用子组件标签中通过字面量来传递值<Children :msg= "msgfather" age=21/> 子组件设置props属性,定义接受父组件传递过来的参数props:{ age原创 2022-02-26 21:02:29 · 707 阅读 · 6 评论 -
SPA首屏加载速度慢怎么解决?
一、什么是首屏加载?首屏时间,指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容。首屏加载可以说是用户体验中最重要的环节。关于计算首屏时间通过DOMContentLoad或者performance来计算出首屏时间// 方案一:document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful paint原创 2022-02-17 21:11:06 · 1886 阅读 · 1 评论 -
Vue生命周期
Vue生命周期一、生命周期图示二、生命周期具体分析beforeCreate —> createdcreatedcreated —> beforeMountbeforeMountbeforeMount—>mountedmountedbeforeUpdateupdatedbeforeDestroydestroyed三、数据请求在created和mouted的区别一、生命周期图示二、生命周期具体分析beforeCreate —> created初始化vue实例,进行数据观测cr原创 2022-02-13 22:40:06 · 647 阅读 · 1 评论 -
v-if VS v-show 2.0
v-show与v-if的区别控制手段不同编译过程不同编译条件不同控制手段: v-show 隐藏该元素操作的是css,使得display:none,dom元素还在;但是v-if 隐藏该元素则是直接从dom节点将元素删除。编译过程: v-if 切换有一个局部编译/卸载的过程,切换过程合适地销毁和重建内部的事件监听和子组件。v-show只是简单的基于css切换。编译条件: v-if 是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,只有渲染条件为假时,并不做操作原创 2022-02-11 17:46:49 · 294 阅读 · 1 评论 -
SPA&MPA
MPA&SPA总结MPA一、什么是MPA?二、MPA的优缺点优点:缺点:Why?SPA一、什么是SPA?二、SPA的优缺点优点:缺点:Why?MPA一、什么是MPA?多页应用MPA(MultiPage-page application),翻译过来就是多页应用在MPA中,每个页面都是一个主页面,都是独立的当我们在访问另一个页面的时候,都需要重新加载html、css、js文件。每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用。二、MP原创 2022-02-11 11:51:26 · 707 阅读 · 1 评论 -
Vue核心特征
VueVue核心特征1、数据驱动(MVVM)2、组件化3、指令系统Vue核心特征1、数据驱动(MVVM)Model : 模型层,负责处理业务逻辑以及和服务端进行交互。View : 视图层,负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面。ViewModel : 视图模型层,用来连接Model 和 View,是Model 和 View之间的通信桥梁。1、mvc 和 mvvm 的关系?其实m(Model 层)和v(View 层) 是相同的,不同的是c(控制层)和vm(v原创 2022-02-10 21:50:56 · 815 阅读 · 1 评论 -
Nuxt.js的学习与总结
Nuxt.js的学习与总结一、Nuxt项目的安装和使用二、Nuxt项目目录了解三、Nuxt常用配置四、路由nuxt路由方式路由传参五、动态路由以及参数校验六、默认布局&默认模板七、错误页面 以及个性meta标签设置八、异步请求数据的方法一、Nuxt项目的安装和使用Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性原创 2021-10-28 22:48:24 · 1220 阅读 · 8 评论 -
this.$refs在父子组件的使用
⭐问题: 子组件加上 ref ,父组件使用 $refs操作子组件,在父组件的created函数中无法操作子组件?⭐原因是: $refs只在组件渲染完成后才填充,并且它是非响应式的,所以只有在子组件的mounted生命周期函数之后即子组件的dom元素渲染完成后,父组件才可以通过 $refs 直接操作子元素,由上图顺序可知父组件的created函数中无法通过 $refs 操作子组件。...原创 2021-09-28 11:41:33 · 767 阅读 · 0 评论 -
Vue之Props再相遇
Vue之Props再相遇今天我们来总结一下vue 中关于父子组件传值中使用到的 props 。简单回顾一下父组件向子组件传值,在父组件中引用子组件的标签里绑定一个参数,然后子组件在props 中进行接收,接收的参数与父组件绑定的参数同名。最简单的用法,就是以字符串数组的形式列出prop:props: ['title', 'likes', 'isPublished', 'commentIds', 'author']当然我们也可以指定每个prop的值类型,我们可以形象的列出propprops: {原创 2021-09-05 14:46:38 · 126 阅读 · 0 评论 -
v-if VS v-show
v-if VS v-show1、使用方面v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。v-if也是惰性的:如果在初始渲染条件为假,则什么也不做——直到条件第一次变为真时才会开始渲条件块。v-show就简单的多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS的属性display进行切换。一般来说,v-if 有更高的切换开销,而v-show 有更高的初始渲染开销。因此,如果需要非常频繁的切换,则使用v-show 较好;如果在运行时条原创 2021-08-24 15:51:25 · 117 阅读 · 0 评论 -
Vue总结2.0父子组件传值以及父子之间的生命周期函数(基于项目总结)
Vue2.0总结一、Vue父子组件传值二、Vue父子之间的生命周期函数一、Vue父子组件传值1、父组件向子组件传值使用v-bind绑定 + props<!-- 父组件father.vue --><template> <div> <div>这是父组件要传给子组件的参数:{{msg}}</div> <!-- 1.传递: value1为动态参数msg的参数名,名字自定义,与子组件接收参数名同名⭐ v原创 2021-02-28 17:28:19 · 3237 阅读 · 1 评论 -
Vue总结1.0(初步)
Vue总结1.0(初步)了解Vue.jsVue基础Vue生命周期函数Vue组件Vue路由Vue-cli一、了解Vue.jsVue.js 是一个优秀的前端界面开发JS库。1. Vue的突出特点有: 1)轻量级的框架 2)双向数据绑定 3)指令 4)组件化:复用性、可扩展性、修改方便 5)客户端路由 6)状态管理2.MVVM:MVVM是前端视图层的分层开发思想,主要把每个页面分成了M、V、VM三个部分。其中VM是MVVM思想的核心;因为VM是M和原创 2021-01-17 11:21:24 · 1157 阅读 · 15 评论