![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
文章平均质量分 80
飞羽逐星
既然厌倦于追寻,那便一觅其中;自从一股逆风袭来,我已学会抵挡八面来风。
展开
-
vue3学习—CompositionAPI
CompositionAPI一、CompositionAPI1、setup2、生命周期函数1.renderTracked2.renderTriggered3、composition api相比于option api有哪些优势一、CompositionAPI不同于reactivity api,composition api提供的函数很多是与组件深度绑定的,不能脱离组件而存在。1、setup// componentexport default { setup(props, context){原创 2021-04-11 17:39:24 · 380 阅读 · 0 评论 -
vue3学习—ReactivityAPI
vue3学习—ReactivityAPI一、ReactivityAPI1、reactive2、readonly3、ref4、computed一、ReactivityAPI前面我们已经在使用的setup函数、onMounted、onUmMounted等生命周期钩子函数,都是属于composition api。而ref、computed是属于Reactivity API的,这里我们开始介绍什么是Reactivity API。1、reactive代理一个对象(可深度代理)import { reacti原创 2021-04-08 23:30:16 · 388 阅读 · 0 评论 -
vue3学习—组件中的变化
组件中的变化一、组件中的变化1、路由router2、异步组件一、组件中的变化1、路由router使用npm i vue-router@next安装新的vue路由接下来我们对比下vouter前后的变化://vue3中//router/indeximport { createRouter, createWebHistory } from "vue-router";import Home from "../views/Home.vue"import About from "../views/Ab原创 2021-03-31 23:43:29 · 200 阅读 · 0 评论 -
vue3学习—模板中的变化
模板中的变化一、模板中的变化1、v-model2、v-if v-for3、key4、Fragment一、模板中的变化1、v-modelvue2比较让人诟病的一点就是提供了两种双向绑定:v-model和.sync,在vue3中,去掉了.sync修饰符,只需要使用v-model进行双向绑定即可。为了让v-model更好的针对多个属性进行双向绑定,vue3作出了以下修改当对自定义组件使用v-model指令时,绑定的属性名由原来的value变为modelValue,事件名由原来的input变为upda原创 2021-03-28 00:38:32 · 275 阅读 · 0 评论 -
vue3学习—API和数据响应式变化
API和数据响应式变化一、API和数据响应式变化1、去掉了Vue构造函数2、组件实例中的API3、对比数据响应式一、API和数据响应式变化这里我们从两个问题来看vue3中APi和数据响应式的变化。1、去掉了Vue构造函数为什么vue3中去掉了vue构造函数?在vue2中,我们需要使用new Vue构造函数从而返回一个vue实例,实例就是我们vue控制的区域。(其实实例就是是一个复杂的vue组件)<!-- vue2 --><div id="app1"></div&g原创 2021-03-27 17:04:25 · 539 阅读 · 0 评论 -
vue3学习—效率提升
vue3效率提升一、vue3效率提升1、静态提升1.静态节点优化2.静态属性提升2、预字符串化3、缓存事件处理函数4、Block Tree一、vue3效率提升1、静态提升在vue3中的app.vue文件如下:在服务器中,template中的内容会变异成render渲染函数最终编译后的文件:1.静态节点优化那么这里为什么是两部分呢?因为这就是vue3中的静态节点优化因为静态节点没有绑定数据等,是不会响应式发生变化的那么就不需要放入render函数每次渲染的,所以编译器将静态节点提升到ren原创 2021-03-27 00:14:18 · 701 阅读 · 1 评论 -
vue学习—基于vue的Mvvm知识点(从0到1手撸mvvm实现)
vue知识点总结(持续更新)一、Vue2知识点1、MVVM是什么1.简述2.MVVM模式的组成部分3.View与ViewModule连接可以通过下面的方式4.MVVM优点2、vue入门知识点一、Vue2知识点1、MVVM是什么1.简述MVVM是Model(模型)-View(视图)-ViewModel(视图模型)的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。2.MVVM模式的组成部分模型:代表内容的数据访问层(以数据为原创 2021-03-26 16:48:46 · 328 阅读 · 0 评论 -
vue3学习—vite原理
vue3学习—vite原理一、vite原理1、webpack2、vite3、webpack和vite的比较4、提问:vite中能使用commonJs一、vite原理要了解vite首先从webpack讲起,具体的webpack可以翻阅我的笔记。下面我们简单回忆下webpack的知识。1、webpack以如下示例:// index.jsconsole.log("index");require("./a");require("./b");// a.jsrequire("./b");con原创 2021-03-25 23:41:01 · 1637 阅读 · 0 评论 -
vue3学习—state的变化和使用
sate的变化和使用一、state的变化和使用1、reactive1.什么是reactive2.reactive注意点2、state的类型3.setup里面的vuex的使用方式4.封装获取state方式最近公司项目需要使用vue3,发现vue3中的state变化较大,就干脆系统的学习下。把笔记做好站位,后面随时更新吧。vue2中的state之前做过笔记,不懂得可以翻阅 深入剖析vuex.一、state的变化和使用本文部分借鉴自大佬的笔记.vue3中state获取状态的方法有多种,如下图所示,那么我原创 2021-03-09 11:26:03 · 9865 阅读 · 1 评论 -
vue3学习—vue3的重大变化
vue3的重大变化一、vue3的重大变化1、构造函数2、组件实例一、vue3的重大变化1、构造函数vue2中:const app = new Vue(options);app.$mount("#app");Vue.use();new一个构造函数Vue实例,传入参数,然后挂载到某元素上。如果使用一些插件,可以用Vue上的方法use。vue3中:const app = createApp(app);app.$mount("#app");app.use();vue3中不存在构造函数V原创 2021-02-17 10:48:47 · 2147 阅读 · 1 评论 -
vue3学习—项目搭建初试
项目搭建初试一、搭建项目1、vue全局api创建2、vite构建工具搭建一、搭建项目1、vue全局api创建使用命令vue create xxxx创建一个vue3项目。此时可以选择版本或者手动选择。最后我们只需要选择vue3即可。使用vue create创建项目,是以webpack为构建工具;在vue3时,大佬 尤玉玺 觉得webpack的初始化项目、热更新和打包等相对用时较长,于是自己弄了一个新的构建工具vite2、vite构建工具搭建使用命令npm init vite-app xxx原创 2021-02-16 17:12:36 · 683 阅读 · 1 评论 -
Vue学习—深入剖析vue-cli脚手架(二)
深入剖析vue-cli脚手架(二)一、vue-cli开发1.浏览器兼容性1)browserslist2)Polyfill3)现代模式2.HTML和静态资源1)HTML2)处理静态资源3.CSS 相关1)引用静态资源2)预处理器3)PostCSS4)CSS Modules5)向预处理器 Loader 传递选项4.webpack 相关1)简单的配置方式2)链式操作 (高级)3)审查项目的 webpack 配置4)以一个文件的方式使用解析好的配置5.环境变量和模式1)模式2)Staging 模式3)在客户端侧代码原创 2020-10-30 16:06:40 · 748 阅读 · 0 评论 -
Vue学习—深入剖析vue-cli脚手架(一)
深入剖析vue-cli脚手架一、vue-cli介绍1.该系统的组件1)CLI2)CLI 服务3)CLI 插件二、vue-cli安装三、vue-cli基础1.快速原型开发1)vue serve2)vue build2.创建项目1)vue create2)使用图形化界面3.插件和 Preset1)插件2)Preset4.vue-cli服务1)使用命令2)vue-cli-service serve3)vue-cli-service build4)vue-cli-service inspect5).查看所有的可用命原创 2020-10-29 17:21:44 · 1235 阅读 · 0 评论 -
面试准备—vue核心之虚拟DOM(vdom)
vue核心之虚拟DOM一、真实DOM和其解析流程?二、JS操作真实DOM的代价!三、为什么需要虚拟DOM,它有什么好处?四、实现虚拟DOM一、真实DOM和其解析流程?浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。第三步,将DOM树原创 2020-09-21 09:52:09 · 1830 阅读 · 0 评论 -
Vue学习—深入剖析vuex
深入剖析vuex一、State1.安装2.使用3.State1.在Vue组件中获得Vuex状态2.mapState 辅助函数二、Vuex_Getter1.通过属性访问2.通过方法访问3.mapGetters 辅助函数三、Vuex_Mutation1.在组件中提交 Mutation2.提交载荷(Payload)3.对象风格的提交方式4.使用常量替代 Mutation 事件类型5.Mutation 需遵守 Vue 的响应规则6.表单处理1.双向绑定的计算属性7.Mutation 必须是同步函数8.严格模式1.开原创 2020-09-14 15:57:30 · 611 阅读 · 0 评论 -
Vue学习—深入剖析导航守卫-路由元
深入剖析导航守卫一、深入剖析导航守卫1.全局守卫1.全局前置守卫 beforeEach2.全局解析守卫 beforeResolve3.全局后置钩子 afterEach2.路由独享守卫1.eforeEnter3.组件内守卫1.beforeRouteEnter2.beforeRouteUpdate3.beforeRouteLeave4.完整的导航解析流程一、深入剖析导航守卫导航:路由正在发生变化。导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫被分成三种:全局的、单个路由独享的、组件内的。1.全原创 2020-09-13 21:49:18 · 253 阅读 · 0 评论 -
Vue学习—命名视图-路由组件传参
命名视图-路由组件传参一、命名视图-路由组件传参1.命名视图1.路由组件传参2.布尔模式3.对象模式4.函数模式一、命名视图-路由组件传参1.命名视图想同时展示多个视图时,并且每个视图展示不同的组件时,可以使用命名视图。可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。<router-view class="view one"></router-view><router-view c原创 2020-09-13 20:12:07 · 514 阅读 · 0 评论 -
Vue学习—深入剖析动态路由匹配
深入剖析动态路由匹配一、深入剖析动态路由匹配一、深入剖析动态路由匹配为什么明明地址不同了,访问的页面仍是相同的。当我们需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果:const routes = [{ path: '/', redirect: '/home', }, { path: '原创 2020-09-13 19:50:39 · 303 阅读 · 0 评论 -
Vue学习—编程式的导航
编程式的导航一、编程式的导航1.声明式导航2.编程式的导航1.$router.push2.$router.replace3.$router.go(n)3.$route1.$route.path2.$route.params3.$route.query4.$route.hash5.$route.fullPath6.$route.matched7.$route.name8.$route.redirectedFrom一、编程式的导航1.声明式导航<router-link to="/home" clas原创 2020-09-13 15:58:11 · 991 阅读 · 0 评论 -
Vue学习—深入剖析VueRouter基础
深入剖析VueRouter基础一、深入剖析VueRouter基础1.什么是路由?2.什么时候使用前端路由?3.安装路由4.使用路由5.JavaScript5.hash模式6.history 模式7.实例:一、深入剖析VueRouter基础1.什么是路由?路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的,即后端控制路由。后来页面越来越复杂,服务器压力越来越大,随着ajax(异步刷新技术)的出现,页面的实现非重载就能刷新数据,让前端也可以控制url自行管原创 2020-09-13 11:32:54 · 388 阅读 · 0 评论 -
Vue学习—深入剖析异步组件
深入剖析异步组件一、深入剖析异步组件1.组件_异步组件一、深入剖析异步组件1.组件_异步组件在项目中,有些组件不会在第一次进入首屏时加载,而是当执行了某些操作时,才会加载进来,所以此时,我们可以将该组件设置成异步加载,什么时候用,什么时候再加载进来,以达到提升首屏性能的目的。使用方法:<template> <div id="app"> <button @click="show = true">click</button> <原创 2020-09-13 10:38:53 · 318 阅读 · 0 评论 -
Vue学习—深入剖析复用过渡
深入剖析复用过渡一、深入剖析复用过渡一、深入剖析复用过渡过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将 <transition> 或者 <transition-group> 作为根组件,然后将任何子组件放置在其中就可以了。<template> <div id="app"> <button @click="show = !show">click</button> <ba原创 2020-09-13 10:09:19 · 278 阅读 · 0 评论 -
Vue学习—深入剖析列表过渡
深入剖析列表过渡一、深入剖析列表过渡1.过渡_列表过渡2.列表的排序过渡3.列表的交错过渡一、深入剖析列表过渡1.过渡_列表过渡当想要给一个列表添加过渡动效时,我们可以使用 <transition-group> 组件。//App.vue<template> <div id="app"> <base-level > </base-level> </div></template>原创 2020-09-13 09:35:01 · 472 阅读 · 0 评论 -
Vue学习—深入剖析多元素过渡
多元素过渡一、多元素过渡1.多元素过渡2.过渡模式3.多组件过渡一、多元素过渡1.多元素过渡当切换展示的元素标签名相同时,需要给每一个元素设置不同的key值,否则Vue为了效率只会替换相同标签内部的内容。<template> <div class="demo"> <button @click="show = !show">click</button> <transition> <div v-if="sh原创 2020-09-12 21:36:48 · 323 阅读 · 0 评论 -
Vue学习—深入剖析单元素过渡
单元素过渡一、单元素过渡1.单元素/组件的过渡2.过渡的类名3.类名前缀4.CSS 动画5.自定义过渡的类名6.同时使用过渡和动画7.显性的过渡时间8.初始渲染的过渡9.JavaScript 钩子一、单元素过渡Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。1.单元素/组件的过渡Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点2.原创 2020-09-12 20:39:25 · 409 阅读 · 0 评论 -
Vue学习—深入剖析函数式组件
函数式组件一、函数式组件1.函数式组件1.props和slots2.scopedSlots3.data4.listeners5.injections6.children2.slots() VS children3.基于模板的函数式组件一、函数式组件1.函数式组件当一个组件不需要状态(即响应式数据)、不需要任何生命周期场景、只接受一些props来显示组件时,我们可以将其标记为函数式组件。为了弥补缺少的实例,render 函数提供第二个参数context作为上下文。context包括如下字段:pro原创 2020-09-12 16:12:53 · 669 阅读 · 0 评论 -
Vue学习—深入剖析JSX
深入剖析JSX一、深入剖析JSX1.插值2.指令1..v-text2..v-html3.v-show4.v-if5.v-for6.v-on7.v-bind8.v-model9.v-slot10.v-pre11.v-cloak12.v-once2.Ref3.自定义指令4.过滤器5.插槽一、深入剖析JSXVue中使用JSX语法。可以让我们回到更接近模板的语法上。render () { return ( <h1>这是一个标题</h1> )}1.插值<di原创 2020-09-12 10:44:54 · 2151 阅读 · 0 评论 -
Vue学习—深入剖析渲染函数
深入剖析渲染函数一、深入剖析渲染函数1.基础2.节点、树、以及虚拟DOM1.虚拟DOM3.createElement参数1.深入数据对象4.使用JavaScript代替模板功能1.v-if 和 v-for2.v-model3.事件&按键修饰符4.插槽一、深入剖析渲染函数1.基础当我们需要使用JavaScript的编程能力时,可以利用渲染函数。渲染函数比模板更接近于编译器。例如,我们想要生成一些标题:<h1>Hello world!</h1>如果,我们按照之前的方原创 2020-09-12 09:55:54 · 587 阅读 · 0 评论 -
Vue学习—详解利用脚手架搭建项目
利用脚手架搭建项目一、利用脚手架搭建项目1.安装@vue/cli2.使用命令搭建项目(推荐)3.使用图形界面搭建项目4.删除配置一、利用脚手架搭建项目1.安装@vue/clinode 版本要求: >8.9,推荐使用8.11.0 +。关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉。运行:npm uninstall vue-cli -g 或 yarn global remove vue-cli。安装之后,可以在命令行中访问vue命令。检原创 2020-09-11 20:56:58 · 442 阅读 · 0 评论 -
Vue练习—树形组件
树形组件一、树形组件一、树形组件简单来说就是一个简单地三级列表菜单。解构和逻辑都非常简单,主要还是考验自己对所学知识的应用。这里的注释比较少,不懂可以多思考。//<template> <div class="#app"> <base-tree :data="data"/> </div></template><script>import BaseTree from "./Tree";//导入原创 2020-09-11 19:28:23 · 1353 阅读 · 0 评论 -
Vue学习—安装脚手架
安装脚手架一、安装脚手架1.安装@vue/cli2.快速原型开发3.安装vscode插件一、安装脚手架1.安装@vue/clinode 版本要求: >8.9,推荐使用8.11.0 +。关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉。运行:npm uninstall vue-cli -g 或 yarn global remove vue-cli。安装:npm install -g @vue/cli# ORyarn global a原创 2020-09-10 20:57:51 · 228 阅读 · 0 评论 -
Vue学习—深入剖析过滤器
深入剖析过滤器一、深入剖析过滤器1.认识过滤器2.定义过滤器3.参数4.过滤器串联5.练习1.首字母大写2.数字中间加上逗号3.数字添加文字“万”一、深入剖析过滤器1.认识过滤器自定义过滤器,用于一些常见的文本格式化。过滤器可用在两个地方:双花括号插值 和 v-bind 表达式,添加在JS表达式的尾部,由“管道”符号表示:<!-- 在双花括号中 -->{{ message | filter }}<!-- 在 v-bind 中 --><div v-bind:id原创 2020-09-10 20:21:22 · 321 阅读 · 0 评论 -
Vue学习—深入剖析自定义指令
自定义指令一、自定义指令1.简介2.钩子函数1.bind2.inserted3.update4.componentUpdated5.unbind3.钩子函数参数4.练习1.模拟 v-show2.模拟 v-model3.写一个 v-slice(截取文本框)4.动态指令参数5.函数简写6.对象字面量一、自定义指令1.简介我们可以自己写一个自定义指令去操作DOM元素,以达到代码复用的目的。注意,在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时原创 2020-09-10 19:40:55 · 539 阅读 · 0 评论 -
Vue学习—深入剖析混入
混入一、混入1.基础2.选项合并3.全局混入一、混入1.基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。<div id="app"> <my-cmp></my-cmp></div><script> const minxin = { data(){原创 2020-09-10 15:45:48 · 350 阅读 · 0 评论 -
Vue学习—深入剖析通信
通信一、通信1.prop (推荐)2.$emit(推荐)1.v-model1. .sync3.$attrs4.$listeners5.$root6.$parent7.$children8.ref9.provide & inject10.eventBus(事件总线)11.Vuex一、通信1.prop (推荐)父组件传递数据给子组件时,可以通过特性传递。推荐使用这种方式进行父->子通信。2.$emit(推荐)子组件传递数据给父组件时,触发事件,从而抛出数据。推荐使用这种方式进行子-&原创 2020-09-10 15:08:38 · 207 阅读 · 1 评论 -
Vue学习—深入剖析处理边界情况
处理边界情况一、处理边界情况1.访问元素 & 组件1.访问根实例2.访问父级组件实例3.依赖注入4.访问子组件实例或子元素2.程序化的事件侦听器3.循环引用1.递归组件2.组件之间的循环引用4.模板定义的替代品1.内联模板2.X-Template5.控制更新1.强制更新2.通过v-once创建低开销的静态组件一、处理边界情况接下来我们要学习的都是和处理边界情况有关的功能,即一些需要对 Vue 的规则做一些小调整的特殊情况。需要注意的是,这些功能都是有劣势或危险场景的。1.访问元素 &原创 2020-09-09 22:53:23 · 405 阅读 · 0 评论 -
Vue学习—深入剖析动态组件
动态组件一、动态组件1.基本使用2.keep-alive3.activated & deactivated一、动态组件1.基本使用当我们在一个多标签的界面中,在不同组件之间进行动态切换是非常有用的。<component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件<div id="app"> <button v-for="page in pages" @cl原创 2020-09-09 19:45:29 · 225 阅读 · 0 评论 -
Vue学习—深入剖析插槽
插槽一、插槽1.了解插槽2.插槽内容3.编译作用域4.后备内容5.具名插槽6.作用域插槽1.独占默认插槽的缩写语法2.解构插槽Prop7.动态插槽名8.具名插槽的缩写一、插槽1.了解插槽和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样:<div id='app'> <my-cmp> Something bad happened. </my-cmp></div>如果有这样的需求,我们就可以通过插槽来做。2.插槽内容通过原创 2020-09-09 16:32:29 · 252 阅读 · 0 评论 -
Vue学习—深入剖析监听组件事件(双向数据绑定)
监听组件事件一、监听组件事件1.监听组件2.使用事件抛出一个值3.事件名4.将原生事件绑定到组件5.在组件上使用 v-model6. .sync 修饰符7.v-model VS .sync一、监听组件事件1.监听组件<div id="app"> <div :style="{fontSize: postFontSize+'em'}"> <blog-post v-for='post in posts' :post='post' :key='post.i原创 2020-09-09 11:28:42 · 953 阅读 · 0 评论 -
Vue学习—深入剖析非Prop特性
非Prop特性一、非Prop特性1.替换/合并已有的特性2.禁用特性继承一、非Prop特性1.替换/合并已有的特性<div id="app"> <my-cmp class="my-cmp" type='text'></my-cmp></div><script> Vue.component('my-cmp',{ template: ` <input type='date' cla原创 2020-09-09 09:27:36 · 227 阅读 · 0 评论