![](https://img-blog.csdnimg.cn/6ed4987590564bad9bb7edc41f67d98f.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端框架Vue
文章平均质量分 69
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Tree_wws
大家好,我是 Tree_wws ,我是一个喜欢记录、喜欢思考、喜欢学习的人,希望和大家共同学习很进步,欢迎关注我呀 !!!
展开
-
【Vue3】 第十六部分 transition
【Vue3】 第十六部分 transition16. transition16.1 transition的基本使用(name属性)16.2 transition+animate.css使用16.3 transition中Appear属性16.4 transitionGroup16.4.1 配合animate使用16.4.2 平移过渡动画16.4.3 状态过渡原创 2022-09-18 16:34:42 · 739 阅读 · 0 评论 -
【Vue3】 第十五部分 异步组件与suspense的使用(性能优化)
异步组件是vue性能优化的一种方式,主要目的是为了解决页面引入很多组件导致打包后的js体积过大,同样条件下,文件体积越大,请求耗时越长,容易出现白屏的现象.vue提供了异步组件,当页面中通过异步方式来声明(全局)或者注册(局部)组件时,每个异步组件会被单独打包成一个js文件,每个异步组件对应的js文件在需要时才会被加载。通过减小打包文件体积的方式实现了性能优化。Suspense:等待异步组件时渲染一些额外内容,让应用有更好的用户体验 default和fallback不可改名,因原创 2022-09-18 16:29:47 · 665 阅读 · 0 评论 -
【Vue3】第十四部分 父子组件传参
14.1 父传子(props)14.2 子传父(emit)14.3 子传父(ref)原创 2022-09-18 16:28:15 · 732 阅读 · 0 评论 -
【Vue3】第十三部分 插槽
13.1 默认插槽13.2 具名插槽13.3 作用域插槽原创 2022-09-17 18:12:12 · 563 阅读 · 0 评论 -
【Vue3】第十二部分 Vue-Router 4 (路由)
【Vue3】第十二部分 Vue-Router 4 (路由)12. Vue-Router 4 (路由)12.1 基本的使用12.2 捕获所有路由或者是404 Not Found 页面12.3 路由中的params参数12.4 路由中的query参数12.5 路由正则12.6 嵌套路由12.7 命名路由和命名视图命名路由命名视图12.8 编程式路由导航12.9 重定向和取别名12.10 路由传参12.11 路由组件传参12.12 路由守卫全局前置路由守卫路由独享守卫原创 2022-09-17 18:06:23 · 843 阅读 · 0 评论 -
【Vue3】第十一部分 setup语法糖
1. 引入组件的时候不需要注册组件2. 定义变量的时候不需要return出去,顶层的绑定会暴露给模板,模板中可以直接使用3. 使用 defineProps 、defineEmits 、defineExpose 等API,它们将自动地在 中可用原创 2022-09-17 17:40:56 · 1626 阅读 · 0 评论 -
【Vue3】第十部分 其他一些改变
【Vue3】第十部分 其他一些改变文章目录【Vue3】第十部分 其他一些改变10 . 其他一些改变10.1 全局API的转移10.2 其他改变总结10 . 其他一些改变10.1 全局API的转移Vue 2.x 有许多全局 API 和配置。例如:注册全局组件、注册全局指令等。//注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click=原创 2022-03-19 17:00:26 · 86 阅读 · 0 评论 -
【Vue3】第九部分 Vue3中新的组件
【Vue3】第九部分 Vue3中新的组件文章目录【Vue3】第九部分 Vue3中新的组件9. Vue3中新的组件9.1 Fragment9.2 Teleport9.3 Suspense总结9. Vue3中新的组件9.1 Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用9.2 Teleport什么是Teleport?—— Teleport 是一种能够将原创 2022-03-19 16:55:27 · 673 阅读 · 0 评论 -
【Vue3】第八部分 Composition API 的优势
【Vue3】第八部分 Composition API 的优势文章目录【Vue3】第八部分 Composition API 的优势8. Composition API 的优势8.1 Options API 存在的问题8.2 Composition API 的优势8. Composition API 的优势8.1 Options API 存在的问题使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。 8.2 Compos原创 2022-03-19 16:53:02 · 541 阅读 · 0 评论 -
【Vue3】第七部分 其它 Composition API
【Vue3】第七部分 其它 Composition API文章目录【Vue3】第七部分 其它 Composition API7. 其它 Composition API7.1 shallowReactive 与 shallowRef7.2 readonly与shallowReadonly7.3 toRaw与markRow7.4 customRef7.5 provide 与 inject7.6 响应式数据的判断总结7. 其它 Composition API7.1 shallowReactive原创 2022-03-19 16:50:18 · 98 阅读 · 0 评论 -
【Vue3】第六部分 自定义hook和toRef
【Vue3】第六部分 自定义hook和toRef文章目录【Vue3】第六部分 自定义hook和toRef6. 自定义hook和toRef6.1 自定义hook6.2 toRef和toRefs6.2.1 toRef6.2.2 toRefs (常用)总结6. 自定义hook和toRef6.1 自定义hook什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让s原创 2022-03-17 19:04:29 · 628 阅读 · 0 评论 -
【Vue3】第五部分 Vue3生命周期
【Vue3】第五部分 Vue3生命周期文章目录【Vue3】第五部分 Vue3生命周期5.Vue3生命周期5.1 Vue3和Vue2对比图5.2 通过配置项的形式使用生命周期钩子5.3 通过组合式API的形式去写生命周期钩子总结5.Vue3生命周期5.1 Vue3和Vue2对比图vue2.x的生命周期vue3.0的生命周期5.2 通过配置项的形式使用生命周期钩子Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为 beforeUn原创 2022-03-17 18:44:05 · 975 阅读 · 0 评论 -
【Vue3】第四部分 计算属性和监视
【Vue3】第四部分 计算属性和监视文章目录【Vue3】第四部分 计算属性和监视4. 计算属性和监视4.1 计算属性(computed)4.2 watch监视(六种情况)4.3 watchEffect函数总结4. 计算属性和监视4.1 计算属性(computed)具体代码<template> <div> 姓:<input type="text" v-model="person.firstname"><br> 名:&l原创 2022-03-16 14:52:42 · 418 阅读 · 0 评论 -
【Vue3】第三部分 setup的注意点
【Vue3】第三部分 setup的注意点文章目录【Vue3】第三部分 setup的注意点3. setup的注意点3.1 执行的时机3.2 setup的参数总结3. setup的注意点3.1 执行的时机在beforeCreate之前setup会执行一次,setup中this为undefined<template> <div> <h1>Welcome to learn about Vue3!</h1> <h2>name原创 2022-03-16 14:48:16 · 555 阅读 · 0 评论 -
【Vue3】第二部分 Vue3中的响应式原理
【Vue3】第二部分 Vue3中的响应式原理文章目录【Vue3】第二部分 Vue3中的响应式原理2. Vue3中的响应式原理2.1 回顾一下模拟Vue2中响应式实现2.2 模拟Vue3中响应式实现(Proxy)2.3 Reflect.defineProperty2.4 模拟Vue3中响应式实现(Proxy配合Reflect)2.5 Vue3响应式原理总结2.6 reactive对比ref总结2. Vue3中的响应式原理2.1 回顾一下模拟Vue2中响应式实现具体代码 /*原创 2022-03-15 01:12:21 · 492 阅读 · 0 评论 -
【Vue3】第一部分 初步认识Vue3
【Vue3】第一部分 初步认识Vue3文章目录【Vue3】第一部分 初步认识Vue31. 初步认识Vue31.1 准备工作1.2 分析工程结构1.3 初步认识 setup1.4 ref函数1.5 reactive函数总结1. 初步认识Vue31.1 准备工作对于Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli如果需要升级,你应该需要全局重新安装最新版本的 @vue/cli,这里可以查看一下脚手架的版本: vue --version安装或者是升级原创 2022-03-12 16:17:34 · 1106 阅读 · 0 评论 -
【Vue】第十八部分 路由 vue-router(重要 重要 重要)
【Vue】第十八部分 路由 vue-router(重要 重要 重要)文章目录【Vue】第十八部分 路由 vue-router(重要 重要 重要)18. 路由 vue-router(重要 重要 重要)18.1 相关概念的解释18.1.1 什么是vue-router?18.1.2 什么是SPA应用?18.1.3 什么是路由?18.1.4 路由的分类18.2 路由器的基本使用18.2.1 准备工作18.2.2 小案例18.3 注意点18.4 嵌套路由18.4.1 小案例18.4.2 嵌套路由注意点总结18.原创 2022-03-09 15:13:49 · 116 阅读 · 0 评论 -
【Vue】第十七部分 Vuex、多组件共享数据、四个map方法、namespace、Vuex模块化 (重要)
【Vue】第十七部分 Vuex、多组件共享数据、四个map方法、namespace、Vuex模块化 (重要)文章目录【Vue】第十七部分 Vuex、多组件共享数据、四个map方法、namespace、Vuex模块化 (重要)17. Vuex17.1 了解Vuex17.1.1 Vuex是什么?17.1.2 多组件共享数据---全局事件总线实现17.1.3 多组件共享数据---Vuex实现17.1.4 多组件共享状态的问题17.2 Vuex的工作原理17.3 Vuex的搭建17.3.1 准备工作1原创 2022-03-06 01:25:49 · 565 阅读 · 0 评论 -
【Vue】 第十六部分 插槽(默认插槽、具名插槽、作用域插槽)
【Vue】 第十六部分 插槽(默认插槽、具名插槽、作用域插槽)文章目录【Vue】 第十六部分 插槽(默认插槽、具名插槽、作用域插槽)16 . 插槽16.1 默认插槽16.1.1 不使用插槽的案例图示16.1.2 默认插槽16.1.3 默认插槽的结构和案例16.2 具名插槽16.2.1 具名插槽案例示图16.2.2 具名插槽的结构和案例16.3 作用域插槽16.3.1 案例示图总结16 . 插槽作用:父组件可以在子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===&g原创 2022-03-02 16:13:37 · 541 阅读 · 0 评论 -
【Vue】 第十五部分 GitHub用户查询案例
【Vue】 第十五部分 GitHub用户查询案例文章目录【Vue】 第十五部分 GitHub用户查询案例15.GitHub用户查询案例15.1 案例展示15.2 组件拆分示例图片15.3 代码总结15.GitHub用户查询案例需要源码的点击这里15.1 案例展示15.2 组件拆分示例图片15.3 代码main.jsimport Vue from "vue"import App from "./App.vue"Vue.config.productionTip = false原创 2022-03-01 00:37:17 · 219 阅读 · 0 评论 -
【Vue】第十四部分 使用Vue-cli配置代理
【Vue】第十四部分 使用Vue-cli配置代理文章目录【Vue】第十四部分 使用Vue-cli配置代理14. 使用Vue-cli配置代理14.1 配置代理方式以一14.1.1 **配置代理服务器**14.2 配置代理方式二14.2.1 用方式二写的案例14.3 总结配置代理总结14. 使用Vue-cli配置代理14.1 配置代理方式以一原理:代理服务器和我们所处的端口号是一样的,通过代理服务器和所需要的服务器连接(代理目标的服务器),当我们需要获取数据的时候我们直接向代理服务器拿就可以了,不原创 2022-03-01 00:24:31 · 2001 阅读 · 0 评论 -
【Vue】第十三部分 动画
【Vue】第十三部分 动画文章目录【Vue】第十三部分 动画13. 动画13.1 Vue动画的理解13.2 过渡的类名13.3 几种判断类名是否存在的方法13.4 多个元素过渡13.5 小案例13.6 集成第三方动画库13.6.1 准备工作总结13. 动画13.1 Vue动画的理解操作css的trasition或animationvue会给目标元素添加/移除特定的class13.2 过渡的类名如果给transition标签添加name属性,那么name的值就是代表下面的xxx如果没原创 2022-02-28 18:06:28 · 339 阅读 · 0 评论 -
【Vue】第十二部分 组件间的通信(自定义事件、全局事件总线、消息订阅发布)很重要很重要
【Vue】第十二部分 组件间的通信(自定义事件、全局事件总线、消息订阅发布)很重要文章目录【Vue】第十二部分 组件间的通信(自定义事件、全局事件总线、消息订阅发布)很重要12. 组件间的通信(自定义事件、全局事件总线、消息订阅发布)12.1 组件自定义事件12.1.1 绑定自定义事件的方法12.1.2 比较props和自定义组件props的方式自定义组件的方式12.1.3 组件自定义事件总结12.2 全局事件总线 (很重要)12.2.1 原理和概念12.2.2 使用全局事件总线12.2.3 解绑12.原创 2022-02-27 00:46:47 · 120 阅读 · 0 评论 -
【Vue】第十一部分 浏览器本地存储
【Vue】第十一部分 浏览器本地存储文章目录【Vue】第十一部分 浏览器本地存储11. 浏览器本地存储11.1 Window.sessionStorage和Window.localStorage的区别11.2 需要注意11.3 相关方法11.4 小案例总结11. 浏览器本地存储浏览器通过Window.sessionStorage和Window.localStorage来实现本地的存储11.1 Window.sessionStorage和Window.localStorage的区别Wind原创 2022-02-26 11:26:21 · 1017 阅读 · 0 评论 -
【Vue】第十部分 任务清单小案例
【Vue】第十部分 任务清单小案例文章目录【Vue】第十部分 任务清单小案例10. 任务清单案例总结10. 任务清单案例点击这里可以到我的github上获取源码main.jsimport Vue from "vue"import App from "./App.vue"Vue.config.productionTip = false //阻止vue在生成时自动产生提示new Vue({ el: '#app', data: { }, beforeCre原创 2022-02-26 11:14:56 · 1070 阅读 · 0 评论 -
【Vue】第九部分 Vue一些高级知识点
【Vue】第九部分 Vue一些高级知识点文章目录【Vue】第九部分 Vue一些高级知识点9.1 ref属性9.2 props的配置项9.3 mixin(混入)9.4 Vue插件9.5 scoped样式9.6 nextTick(经常用)总结9.1 ref属性作用:用来给元素或子组件注册引用信息(相当于是id的替代者)使用方式 打标识:<h1 ref = "xxx"></h1> 获取:this.$refs.xxx被应用在组件上获取的事原创 2022-02-25 19:24:48 · 156 阅读 · 0 评论 -
【Vue】第八部分 组件
【Vue】第八部分 组件文章目录【Vue】第八部分 组件8.组件(重要)8.1 非单文件组件8.1.1 使用组件的三大步骤8.1.2 怎么创建一个组件?8.1.3 如何去注册组件?8.1.4 非单文件的小案例8.1.5 关于组件名和组件标签的==注意点==8.1.6 组件嵌套8.1.7 VueComponent(vc)8.1.8 一个非常重要的内置关系(重要)8.2 单文件组件8.2.1 配置脚手架8.2.2 单文件组件的组成部分(三部分)总结8.组件(重要)8.1 非单文件组件8.1.1原创 2022-02-25 17:56:23 · 175 阅读 · 0 评论 -
【Vue】第七部分 生命周期
【Vue】第七部分 生命周期文章目录【Vue】第七部分 生命周期7. 生命周期(重要)7.1 初步认识生命周期7.2 小案例7.3 生命周期流程(8个)7.4 常用的生命周期钩子:7.4.1 关于销毁7.4.2 关于父子组件的生命周期7.5 生命周期流程图7.6 代码举例说明生命周期钩子总结7. 生命周期(重要)7.1 初步认识生命周期别名:生命周期回调函数、生命周期函数、生命周期钩子。生命周期是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可原创 2022-02-24 11:14:46 · 310 阅读 · 0 评论 -
【Vue】第六部分 过滤器
【Vue】第六部分 过滤器文章目录【Vue】第六部分 过滤器6. 过滤器6.1 对过滤器的理解6.2 全局过滤器:6.3 局部过滤器:6.3 过滤器的案例总结6. 过滤器案例中使用到时间格式相关API6.1 对过滤器的理解定义:对要显示的数据进行特定格式化后在显示适用:做一些简单的逻辑处理特点:滤器可以做一些简单操作,并且没有改变原来的数据,产生新的对应的数据 1. 语法 : data | 过滤器 不传参数默认将data值传入,并且自动调用函数原创 2022-02-24 09:44:39 · 354 阅读 · 0 评论 -
【Vue】第五部分 Vue监视数据的原理
【Vue】第五部分 Vue监视数据的原理文章目录【Vue】第五部分 Vue监视数据的原理5. Vue监视数据的原理(set方法)5.1 Vue监视不同类型数据的原理5.1.1 如何监测对象中的数据?5.1.2 如何监测数组中的数据?5.1.3 小案例5.1.4 set()小案例总结5. Vue监视数据的原理(set方法)5.1 Vue监视不同类型数据的原理特点:vue会监视data中所有层级的数据,并且如果他检测到是对象那么就会给对象里面所有的属性配置getter和setter函数5.1.1原创 2022-02-23 16:51:44 · 449 阅读 · 0 评论 -
【Vue】第四部分 列表(渲染、排序、过滤)
#【Vue】第四部分 列表(渲染、排序、过滤)文章目录4. 列表(渲染、排序、过滤)4.1 条件渲染指令4.1.1 v-show4.1.2 v-if4.1.3 v-if和v-show的小案例4.1.4 v-for(key的原理)4.2 列表过滤4.3 列表排序总结4. 列表(渲染、排序、过滤)4.1 条件渲染指令有个小技巧: 如果是查找对象中不存在的属性,返回的是一个undefined,利用这一个点不管是v-show或者是v-if,如果值等于undefined的就不显示,假设sex原创 2022-02-23 16:46:39 · 633 阅读 · 0 评论 -
【Vue】第三部分 样式绑定
【Vue】第三部分 样式绑定文章目录【Vue】第三部分 样式绑定3. 样式绑定(class、style)3.1 绑定class3.2 绑定style总结3. 样式绑定(class、style)3.1 绑定class固定的类名就正常的写,需要动态绑定的类名就v-bind去绑定它例如::class= "mood"下面举一些适用的场景:绑定class样式—字符串写法,适用于:样式的类名不确定,需要动态指定绑定class样式 — 数组写法使用的场景 :绑定的样式的个数不确定,名字也不确定原创 2022-02-23 16:35:32 · 475 阅读 · 0 评论 -
【Vue】第二部分 事件的基本操作
【Vue】第二部分 事件的基本操作文章目录【Vue】第二部分 事件的基本操作2. 事件的基本操作2.1 v-on2.1.1 v-on的小案例2.2 事件修饰符2.2.1 事件修饰符代码解析2.3 键盘事件2.4 计算属性(computed)2.5 监视属性(watch)2.5.1 watch和computed的区别总结2. 事件的基本操作2.1 v-on功能:绑定指定事件名的回调函数标准写法:v-on:click='xxx'v-on:keyup='xxx(参数)'v-on:keyup.原创 2022-02-22 23:21:39 · 460 阅读 · 0 评论 -
【Vue】第一部分 Vue的基本知识
第一部分 Vue的基本知识记录自己学习Vue的一些笔记,如有错误希望大家能够指出来!!!文章目录第一部分 Vue的基本知识1. Vue的基本知识1.1 Vue的使用1.2 插值语法1.3 v-bind(单向绑定)1.4 v-model(双向绑定)1.4.1 v-model和v-bind的区别1.4.2 v-model 简单小例子1.4.3 v-model 收集表单案例1.5 理解MVVM1.6 Object.defineProperty(重要)1.7 数据代理(重要)总结1. Vue的基本知识原创 2022-02-22 21:13:43 · 302 阅读 · 0 评论