Trees__的博客

【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 状态过渡

异步组件是vue性能优化的一种方式，主要目的是为了解决页面引入很多组件导致打包后的js体积过大，同样条件下，文件体积越大，请求耗时越长，容易出现白屏的现象.vue提供了异步组件，当页面中通过异步方式来声明（全局）或者注册（局部）组件时，每个异步组件会被单独打包成一个js文件，每个异步组件对应的js文件在需要时才会被加载。通过减小打包文件体积的方式实现了性能优化。Suspense:等待异步组件时渲染一些额外内容，让应用有更好的用户体验 default和fallback不可改名,因

14.1 父传子(props)14.2 子传父(emit)14.3 子传父(ref)

13.1 默认插槽13.2 具名插槽13.3 作用域插槽

【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 路由守卫全局前置路由守卫路由独享守卫

1. 引入组件的时候不需要注册组件2. 定义变量的时候不需要return出去,顶层的绑定会暴露给模板,模板中可以直接使用3. 使用 defineProps 、defineEmits 、defineExpose 等API，它们将自动地在 中可用

【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=

【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 是一种能够将

【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

【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

【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

【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

【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

【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

【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中响应式实现具体代码 /*

【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安装或者是升级

【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.

【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

【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

【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

【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 配置代理方式以一原理：代理服务器和我们所处的端口号是一样的，通过代理服务器和所需要的服务器连接（代理目标的服务器），当我们需要获取数据的时候我们直接向代理服务器拿就可以了，不

【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如果没

【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.

【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

【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

【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被应用在组件上获取的事

【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

【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在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可

【Vue】第六部分 过滤器文章目录【Vue】第六部分 过滤器6. 过滤器6.1 对过滤器的理解6.2 全局过滤器：6.3 局部过滤器：6.3 过滤器的案例总结6. 过滤器案例中使用到时间格式相关API6.1 对过滤器的理解定义：对要显示的数据进行特定格式化后在显示适用：做一些简单的逻辑处理特点：滤器可以做一些简单操作，并且没有改变原来的数据，产生新的对应的数据​ 1. 语法 ： data | 过滤器​ 不传参数默认将data值传入，并且自动调用函数

【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

#【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

【Vue】第三部分 样式绑定文章目录【Vue】第三部分 样式绑定3. 样式绑定（class、style）3.1 绑定class3.2 绑定style总结3. 样式绑定（class、style）3.1 绑定class固定的类名就正常的写，需要动态绑定的类名就v-bind去绑定它例如：:class= "mood"下面举一些适用的场景：绑定class样式—字符串写法，适用于：样式的类名不确定，需要动态指定绑定class样式 — 数组写法使用的场景 ：绑定的样式的个数不确定，名字也不确定

【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.

第一部分 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的基本知识