![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 64
如果决定要走又何必挽留
学习交流群:862404453
展开
-
vue脚手架安装
我们想要完成前端工程化,可以使用脚手架来进行搭建项目,如何构建一个前端工程话的Vue项目呢?可以创建脚手架来完成构建,下面我会来讲如何构。下载 | Node.js 中文网 (nodejs.cn) 按住window按键加R,输入cmd打开窗口,输入查看版本,如果有X.X.X出现,说明已经安装成功。下载完成后,我们就可以创建项目了demo是项目的名称原创 2024-08-12 18:40:28 · 364 阅读 · 1 评论 -
Vue.js中的虚拟DOM
刚才讲了传统的操作页面的方式,通过命令式的一步步操作,虚拟DOM通过状态生成一个虚拟节点树,虚拟节点树其实是由组件树建立起来的整个虚拟节点(vnode)树。原创 2024-06-27 22:17:09 · 345 阅读 · 0 评论 -
对于this.$nextTick代码的理解
当平常开发的时候,如果修改数据之后,想要立马获取修改之后的DOM,我们可以采取以上的两个方法,用0秒的定时器解决,或者用this.$nextTick的回调来解决问题。原创 2024-01-31 22:05:25 · 249 阅读 · 0 评论 -
this.$set的用法
在data里面绑定的数据具有响应式的效果,也就是我们说的V-Model 数据更新视图,视图也能更新数据,如果不是data里面的数据如何添加响应式呢?this.$Set这个方法能够实现。原创 2024-01-21 17:11:26 · 477 阅读 · 0 评论 -
scope组件穿透
看见如果有hash值的盒子是可以直接修改的,如果没有则需要第三方deep来穿透。原创 2023-08-13 19:20:48 · 194 阅读 · 0 评论 -
路由是什么
指向,把一个地址指向对应一个组件。原创 2023-06-14 21:43:04 · 83 阅读 · 0 评论 -
Vue的生命周期
在这个阶段进行初始化methods的方法,和data里面的变量做准备,无法进行使用。初始化阶段完毕,可以使用方法和变量。在这个阶段不能获取真实的dom。销毁前做准备 任然能使用。可以获取真是的dom。原创 2023-05-10 00:50:16 · 311 阅读 · 0 评论 -
简易双向绑定
简易版本双向绑定原创 2022-10-17 14:14:48 · 594 阅读 · 0 评论 -
Vuex模块的触发问题
Vuex中的module模块原创 2022-09-27 01:06:51 · 202 阅读 · 0 评论 -
国际化语言的使用
Vuex,Vue-router,国际化。原创 2022-09-25 17:09:22 · 155 阅读 · 0 评论 -
Watch监听器的使用
在监听复杂数据的时候开启depp:true即可。原创 2022-08-04 17:24:51 · 1052 阅读 · 0 评论 -
插槽的三大类
插槽的使用原创 2022-08-04 11:21:44 · 137 阅读 · 0 评论 -
简单数据类型不可直接修改,复杂可以修改
简单数据类型不可修改,复杂数据类型可以修改,简单数据类型存储在栈中,复杂数据类型栈中存放指针,堆中存放数据。一.简单数据类型不可直接修改<template> <div class=""> <One :num="aa" /> </div></template><script>import One from "@/components/One.vue";export default { compo原创 2022-05-22 16:05:01 · 488 阅读 · 0 评论 -
Vue中动态绑定class和动态绑定style
一.动态绑定class<template> <div class=""> <div :class="{ aa: isaa > 10 ? true : false }"></div> <button @click="fn">点击显示</button> </div></template><script>export default { data() {原创 2022-05-20 15:04:33 · 3975 阅读 · 0 评论 -
axios请求拦截和响应拦截
在我们平常调用接口的时候,会使用到拦截器这个工具,大致有两种用法,请求拦截和响应拦截。请求拦截axios.interceptors.request.use((config)=>{ return config},(error)=>{ return Promise.reject(error)})解析:请求拦截这个时候请求还没用发送出去,可以在config里面加一些东西,如在请求头里面携带token,此时还没有到达服务器,error关联的是请求错误返回的信息。举个原创 2022-05-20 10:30:29 · 11888 阅读 · 0 评论 -
路由守卫的详解
路由守卫总共有7个全局路由守卫:beforeEach 前置守卫affterEach 后置守卫beforeResolve 解析守卫路由的守卫beforeRouterEnter 进入组件之前触发,在Created前面beforeRouterUpdated 路由更新但是内容不会改变beforeRouterLeave 离开之前触发,在beforeDestory之前触发路由独享守卫beforeEnter 读取路由的信息一.进入一个页面路由所执行的钩子原创 2022-05-12 00:18:30 · 23041 阅读 · 3 评论 -
meta,$router,route等api
在我们写路由页面的时候,不只是单纯地进行路由页面配置,还涉及到传参等一系列的api,今天我们就来讲解下。一.路由元meta作用:这是我们在进行路由配置的时候可以添加的一些api代码:Store/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import a from '@/views/a.vue'import aa from '@/views/aa.vue'import a3 from '@/v原创 2022-05-11 18:08:16 · 634 阅读 · 0 评论 -
Router-view
我们都知道,路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。也就是:路径--------------------------------------------------------------->页面可以把router-view理解成一类代码存放的位置。一.基本的路由配置(没用子集)我们都知道所有的组成注册最终在app.vue注册完毕。通过代码来分析:import Vue from 'vue'im原创 2022-05-11 00:58:21 · 55396 阅读 · 6 评论 -
Vuex存储公共的数据步骤
在我们平常做项目的过程中,经常会使用到公共的数据,这个时候Vuex是一个很好的仓库,它可以用来存储公共的数据 。总共有五个: state ,getters,muaction,action,module。原创 2022-05-09 14:14:25 · 875 阅读 · 2 评论 -
总结:虚拟DOM和生命周期
在之前的文章中讲过很多相关Vnode和虚拟DOM的内容,以及生命周期,简单地来进行总结一下。温故而知新,可以为师矣。一.什么是虚拟DOM?简单地来说是一个JS对象,用来描述文本中DOM的一些信息。当页面中的数据发生更新的时候会使用到虚拟DOM,我们暂且叫它是Vnode,当页面渲染的时候也会产生一份Vnode,我们暂且叫他oldVnode。页面中的数据更新的时候,新旧两份Vnode会进行对比。通过Diff算法生成一份新的虚拟DOM然后在渲染到页面上去。很大一部分上节省了性能,这也是Vue的优点原创 2022-05-08 22:16:23 · 1762 阅读 · 0 评论 -
浅谈Vue生命周期
前言:Vue组件从诞生到销毁的过程就被称为Vue的生命周期。大致分为8个阶段,接下来我会一一进行讲解每个阶段。一.beforeCreated在这个阶段会对data里面的数据和methods方法进行初始化。二.Created在这个阶段,能够调用初始化好的方法和数据了。通常在这个阶段来发送请求。三.beforeMounted在这个阶段会进行一些挂在的准备,从template----------->Ast树---------------->Vnode,此时并原创 2022-05-06 15:22:58 · 1812 阅读 · 0 评论 -
vm.$nextTick
nextTick接收一个回调函数作为参数,它的作用是将回调函数延迟到下次DOM更新周期之后执行。它与全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持Promise的环境中,则返回一个Promise。我们在开发项目时会遇到一种场景,当更新了状态(数据后),需要对新DOM做一些操作,但是这时我们其实获取不到更新后的DOM,因为还没有重新渲染,这个时候我们需要使用nextTick方法。有一个问题:下次DOM更新周期之后执行,具体指什么时候呢?原创 2022-05-04 22:00:08 · 1334 阅读 · 0 评论 -
浅谈patch,以及里面的diff算法
接着上个篇章继续浅谈:从template------->渲染函数------------------>vnode--------------->真实DOM的整个过程。今天来浅谈一下对于patch的理解。在我们首次进入页面的时候,代码:patch(container,vnode)作用:讲vnode放到一个容器。代码:代码:patch由init创建的一个方法。...原创 2022-04-29 16:02:29 · 487 阅读 · 0 评论 -
从template---------->渲染函数都干了些什么
在Vue中可以通过{{变量}}或者在里面写表达式,但是在html中为什么不行呢?在一个篇章中讲过从:模板---------------->渲染函数------------------>vnode-------------------->视图。编译模板的主要目的就是生成渲染函数,这个过程主要包含三个部分:1.将模板字符串解析为AST(抽象语法树)2.便利AST标记所有的静态节点(不需要重新渲染的节点)3.使用AST生成渲染函数以上三步分别对应模板编译中的三个模块:原创 2022-04-25 13:42:10 · 1179 阅读 · 0 评论 -
封装接口请求
在做项目的时候,我们平常会对接口api进行一些封装。今天来教给大家一些简单的封装接口的方法。一.request.js文件夹通常情况下我们会在utils/request.js封装自己的api。// 1.导入axiosimport axios from "axios";// 2.创建axios副本const _axios = axios.create({ baseURL: process.env.VUE_APP_BASE_API,});// 3.请求拦截器_axios.inte原创 2022-04-24 16:06:48 · 5055 阅读 · 0 评论 -
Vue.js中的虚拟DOM
出自深入浅出Vue.js在Vue.js中,我们使用模板来描述状态与DOM之间的映射关系,Vue.js通过编译模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树,使用这个虚拟节点树就可以渲染页面。模板---------------->渲染函数------------------>vnode-------------------->视图虚拟DOM的最终目标是将虚拟节点(vnode)渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的DOM操作原创 2022-04-23 23:22:20 · 1152 阅读 · 0 评论 -
Vue中的父传子,和子传父,兄弟传值
在我们平常的开发中,组件的传值是必不可少的。一.父传子APP.vue<template> <div class=""> <HelloWorld /> </div></template><script>import HelloWorld from "./components/HelloWorld.vue";export default { components: { HelloWor原创 2022-04-21 09:07:19 · 402 阅读 · 0 评论 -
怎样理解单项数据流
1.Vue的单项数据流:指数据一般从父组件传到子组件,子组件没有权利直接修改父组件传来的数据,即子组件从props中直接获取的数据,只能请求父组件修改数据再传给子组件。父组件属性值的更新会下行流动到子组件中。2.为什么不能子组件直接修改父组传来的值呢?父组件的值可能会不断发生变化,那么如果我们子组件对父组件传来的值比如props有一个number,子组件收到了number=1,在收到后,子组件直接改变number的值为5,去做些事情,但还未做时父组件数据更新了,传过来一个值3,也就是原创 2022-04-18 23:45:46 · 587 阅读 · 0 评论 -
通过addroutes动态添加路由
说明:addroutes是用来动态添加路由的,在做权限管理的时候会用到这个api,接下来我们一起来探究一下这个api吧。一.通过脚手架生成的页面31.index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Ho原创 2022-03-14 13:43:52 · 7427 阅读 · 1 评论 -
生命周期的回顾
所有生命周期钩子的this上原创 2022-03-12 17:25:13 · 950 阅读 · 0 评论 -
复习Vuex
介绍:Vuex是一个转为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相对的规则保证状态以一种可预测的方式发生变化。一.什么是"状体管理模式"让我们从一个简单的Vue计数应用开始:const Counter = { // 状态 data () { return { count: 0 } }, // 视图 template: ` <div>{{ count }}</div&.原创 2022-03-11 15:11:32 · 154 阅读 · 0 评论 -
复习Vue路由
一.概念路由:是一种映射关系,根据路径来匹配页面。二.router-view在当前页面,匹配到的路由,通常会用来做tab的切换二.如何进行配置在通过脚手架配置好的index.js文件里面进行配置代码:import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ {原创 2022-03-11 14:26:58 · 2536 阅读 · 0 评论 -
Vue中Vue.set和this.$set的使用
一.背景vue初始化实例对象的时候会把属性转位setter/getter。这样数据才会是动态响应的(即data中的数据是动态响应的),vue才能监听到属性的添加,删除,修改(受ES5的限制)。二.原理(1)vue.set源码import { set } from '../observer/index'...Vue.set = set...(2)this.$set源码import { set } from '../observer/index'...Vue.prototy原创 2022-01-12 08:26:51 · 2761 阅读 · 0 评论 -
关于动态组件(keep-alive)的问题
一.什么是keep-alive动态组件。当组件需要进行频繁的切换的时候这个时候就需要用到动态组件了,动态组件的几个属性,<component :is="要动态绑定的组件"></component>,这个是Vue官方提供的api, 频发的切换组件,会消耗大量的性能,这时候就可以使用<keep-alive> 包裹要缓存的组件 </keep-alive>。二.代码的实例APP.vue(没有keep-alive做缓存的时候)<template&原创 2022-01-02 17:59:45 · 956 阅读 · 1 评论 -
Vue的生命周期
一.什么是生命周期从Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件,统称为实例的生命周期。生命周期钩子:就是生命周期的别名而已。二.生命周期的三大类1.创建期间的生命周期函数:beforeCreate: 实例刚在内存中被创建出来,此时,还没有初始化好data和methos属性created: 实例已经在内存中创建OK,此时data和methods已经创建OK,此时还没有开始编译模板beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面原创 2022-01-02 14:40:47 · 353 阅读 · 0 评论 -
你还在为不懂插槽而烦恼吗
一.一般常见的插槽分为三种,默认,具名,作用域插槽首先介绍一下默认和具名插槽的使用父:<template> <div class=""> <!-- 匿名 --> <tanchuang>默认插槽</tanchuang> <!-- 具名 --> <tanchuang v-slot:hasname>具名插槽</tanchuang> </div><原创 2021-12-29 16:11:36 · 340 阅读 · 0 评论 -
如何实现图片的懒加载
一.图片懒加载的意义(为什么要使用图片懒加载)对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几分钟页面还没有加载完毕会失去很多的用户。所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再取加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。二.原理将 ...原创 2021-12-28 21:34:33 · 465 阅读 · 0 评论 -
mixin混入 $nextTick函数的应用
一.mixin的使用(1)作用: 可以理解 成一个公共组件的封装(但该组件没有html与css) (2)特点:如果有变量冲突之类 ,以原组件为主,生命周期混入组件先执行(3)使用:全局mixin:所有的组件都会和该混入组件和成一个新的组件 (4)代码验证: index.jsexport default { data() { return { name: "钢铁的意志", }; },};main.jsimport ...原创 2021-11-28 20:26:08 · 685 阅读 · 0 评论 -
vue-i18n----实现国际化, screenfull------ 全屏功能插件的应用
原创 2021-11-27 19:47:01 · 396 阅读 · 0 评论 -
树状结构的转换
如何拿到的数组数据转换一个树状结构 例1: const rootList=[ {id:1,parent:null,text:'菜单1'}, {id:11,parent:1,text:'菜单1-1'}, {id:12,parent:1,text:'菜单1-2'}, {id:2,parent:null,text:'菜单2'}, {id:21,parent:2,text:'菜单2-1'} ] function .原创 2021-11-25 14:59:20 · 528 阅读 · 0 评论