vue学习笔记
文章平均质量分 72
vue3学习笔记
LL1018。
这个作者很懒,什么都没留下…
展开
-
Vue脚手架
功能:可以把多个组件共用的配置提取成一个混入对象使用方式:定义混入:....使用混入:全局混入:Vue.mixin(xxx)局部混入:mixins:['xxx']备注:组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”,在发生冲突时以组件优先。}}}new Vue({}},}})同名生命周期钩子将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。console.log('混入对象的钩子被调用')}}。原创 2022-11-12 23:14:15 · 201 阅读 · 0 评论 -
Vue核心
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合。原创 2022-10-31 09:56:42 · 186 阅读 · 0 评论 -
后台管理框架 :花裤衩 / vue-admin-template
后台管理框架 :花裤衩 / vue-admin-template原创 2022-11-14 16:58:44 · 3810 阅读 · 0 评论 -
vue2的组件通信方式
靠函数参数传递的方法将数据带给父组件,具体分三步:第一步,在子组件 标签上 上使用v-on(简写为 @)绑定自定义的 事件名 以及对应的处理函数,可以类比原生事件 @click=“handle(e)”;第二步,在子组件中调用其他函数,使用 this.$emit(‘事件名’,参数) 的方法触发事件;第三步,子组件的参数被传递出去Student组件不需要任何变化主要变动有两处,第一处 是子组件标签中 使用ref属性;第二处 是不在methods或者watch中 定义处理函数,而是在生命周期函数中处理。原创 2023-10-11 21:58:37 · 266 阅读 · 0 评论 -
ES6详解——看这篇就够了
of 或者 集合也可以用forEach进行循环,和循环数组的组别在于,forEach的第二个参数,因为set中不存在下标,所以第二个参数也是集合的元素。有多个源对象情况也是和一个源对象一样的。注意:const声明一个常量,这个常量是引用数据类型(对象,数组,函数....),一旦赋值(引用地址不能修改),改的是值。1:如果多个异步程序都是成功的状态,p的状态就是成功,多个异步程序的成功结果会打包成一个数组统一返回。类似于对象,也是键值对的集合,但是键的范围不局限于字符串,各种类型的值都可以当做键。原创 2023-10-11 21:53:08 · 302 阅读 · 0 评论 -
Vue路由
路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。类似于组件生命周期钩子函数。原创 2023-10-30 00:43:36 · 165 阅读 · 0 评论 -
localstorage和sessionstorage的方法
此只读接口属性提供对 Document 的本地存储对象的访问,存储的数据跨浏览器会话存储。与 sessionStorage 类似,不同之处在于 localStorage 数据在页面会话结束时被清除——即页面关闭时。当浏览器的最后一个“私人”选项卡关闭时(在私人浏览或隐身会话中加载的文档的本地存储数据),它会被清除。本地存储有 4 种方法:-1.setItem() 方法——这个方法有两个参数,一个是key,另一个是value。它用于将值与键的名称一起存储在特定位置。原创 2023-10-30 00:44:39 · 113 阅读 · 0 评论 -
vue 路由懒加载,图片懒加载,组件懒加载
在上述示例中,v-lazy 指令用于指定需要懒加载的图片路径。当图片进入视口(viewport)时,vue-lazyload 会自动加载该图片,提升页面加载速度。在 Vue 3 中,可以使用 v-lazy 指令和 Intersection Observer 来实现图片的懒加载。在上述代码中,我们使用动态导入语法 import() 来异步加载路由组件。当路由被触发时,相应的组件将被动态加载并渲染。在上述代码中,我们将组件的 component 属性设为一个函数,当路由被触发时,对应的组件才会被动态加载。原创 2023-10-30 00:51:07 · 321 阅读 · 0 评论 -
vue3中 reactive和ref的区别
ref用来定义: 基本数据类型reactive用来定义: 对象(或数组)类型数据备注: ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象从原理角度对比ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)reactive通过Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据。原创 2023-10-30 00:46:04 · 360 阅读 · 0 评论 -
vue3 Teleport组件
在某些场景下可能需要视情况禁用 < Teleport >,我们可以通过对 < Teleport > 动态地传入一个 disabled prop 来处理这两种不同情况( disabled 属性接收一个 Boolean 值,true 代表不允许传送,false 代表传送)。多个 < Teleport > 组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上。如果目标元素也是由 Vue 渲染的,你需要确保在挂载 之前先挂载该元素。原创 2023-10-30 00:49:55 · 129 阅读 · 0 评论 -
vue3 Suspense组件
然后,在父组件中,我们使用 <Suspense> 组件包裹了异步组件,并提供了两个插槽:#default 和 #fallback。它允许你在加载异步组件时显示一个自定义的加载指示器,以及在加载失败时显示错误信息。当你访问包含上述代码的页面时,Vue 3 将自动处理异步组件的加载,并在加载完成前显示加载指示器,加载完成后显示异步组件的内容。如果异步组件加载失败,Vue 3 也能够处理错误,你可以在 <Suspense> 组件中添加错误处理逻辑来显示错误信息。原创 2023-10-30 00:48:20 · 179 阅读 · 0 评论 -
vue3 动态组件和异步组件
当使用 <component :is="..."> 来在多个组件间作切换时,被切换掉的组件会被卸载。强制被切换掉的组件仍然保持“存活”的状态。原创 2023-10-30 00:47:09 · 368 阅读 · 0 评论 -
vue2和vue3的区别
Vue2是把数据放到了data 中,在 Vue2中 定义数据变量是data(){},创建的方法要在method:{}Vue3 就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:1)从vue 引入 reactive;2)使用 reactive ()方法来声明数据为响应性数据;3) 使用setup()方法来返回我们的响应性数据,从而template 可以获取这些响应性数据。原创 2023-10-11 22:02:50 · 451 阅读 · 0 评论 -
vue3组件的通信方式
在vue框架中事件分为两种:一种是原生的DOM事件,另外一种自定义事件。原生DOM事件可以让用户与网页进行交互,比如click、dbclick、change、mouseenter、mouseleave....自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件我是子组件2原创 2023-10-11 22:04:53 · 227 阅读 · 0 评论