vue
文章平均质量分 60
温情key
坚持创作 收获壮硕
展开
-
封装vue插件并发布到npm详细步骤
平常使用Vue开发时,一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件,但是如果项目不同我们也需要这个组件,那就需要复制一份公共组件代码到新项目,一个还好,如果是多个组件,这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm,就可以像element ui这些ui组件库一样通过npm命令下载使用了。原创 2022-11-20 18:27:12 · 2601 阅读 · 8 评论 -
vue动态换肤(自定义主题)
有时候一个项目的主题并不能满足所有人的审美, 所以这个时候就需要换肤功能登场了。 下面是一个换肤`demo`, 思路很简单,定义一个全局`css变量`,然后在页面根元素获取变量并动态修改这个变量值即可完成。原创 2022-10-20 16:21:31 · 1742 阅读 · 0 评论 -
vue顶部进度条 Nprogress
效果1. 安装插件npm install --save nprogressyarn add nprogress2. 封装nprogress因为我们路由跳转和接口调用都要用到,所以封装起来。// src/utils/nprogress.ts 路径随意,建个文件就行了,我这里是vue3 + ts,用vue2 + js也一样。import NProgress from 'nprogress';import 'nprogress/nprogress.css';//全局进度条的配置原创 2022-05-20 18:57:57 · 336 阅读 · 0 评论 -
关于 Vue.observable 数据共享
我们项目会将公共的组件拆分开来以便复用,可能一个页面就包含了几个组件,随着组件的细化,经常会遇到多个组件公用一个相同的数据,也就是需要数据共享的情况;平常我们会用父子组件props、$emit, eventBus或vuex来解决,但是前两种传值传来传去太繁琐了,vuex的话引用官方的话:“如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex “;所以我们项目不太大,而且需要多个组件共享数据的话,这里就推荐一下 Vue.obser.原创 2022-05-12 10:54:03 · 206 阅读 · 0 评论 -
SPA(单页应用)首屏加载慢的优化方案
一. 什么是首屏加载时间?首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间。整个网站并不需要全部加载完成,但需要展示当前可视窗口中的内容,也就是首屏。从用户的角度来说就是:“输入网址到看到页面具体内容的速度”。首屏加载时间可以说是用户体验中最重要的环节。二. 查看我们应用的首屏加载时间?通过 window 下面的一个api performance 计算performance 对象中可以获取到当前页面与性能相关的信息我们打印看一下 performance 对象//原创 2022-05-11 14:22:08 · 2073 阅读 · 0 评论 -
推荐几个 VUE UI组件库
PC端1. Element Plus - 饿了么 UI 组件库在 2022 年春节后第一个工作日,饿了么大前端团队发布了 Element Plus 正式版,标志着 Element 正式支持 Vue 3。官网: https://element-plus.org/zh-CN/2. Ant Design of Vue - 阿里 UI 组件库Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。官网: h原创 2022-05-10 12:44:49 · 4031 阅读 · 1 评论 -
vue模板解析原理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-04-04 18:31:57 · 1527 阅读 · 0 评论 -
vue路由传参
1. 显式http://localhost:8080/#/about?value=‘温情key’传// home.js<button @click="routerByVal">路由传值</button>routerByVal() { this.$router.push({ path: '/about', query: { value: '温情key' } })},接// about.vuecreated() {原创 2022-04-03 22:26:35 · 1352 阅读 · 0 评论 -
vue项目打包之后接口出现错误解决方式
错误信息这是新建一个项目还原问题,node简单写了个数据返回请求代码const express = require('express')const app = express();// 解决跨域问题app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POS原创 2022-04-03 20:48:33 · 5931 阅读 · 0 评论 -
vue导航守卫有哪些
路由的钩子函数有六个全局的路由钩子函数:beforeEach、afterEach单个路由的钩子函数:beforeEnter组件内路由钩子函数:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave全局路由钩子函数全局前置守卫: beforeEach(to, from, next)router.beforeEach: 在每次每一个路由改变的时候都会执行一遍to:将要进入的路由对象from: 当前正要离开的路由对象next原创 2022-03-29 12:13:49 · 557 阅读 · 0 评论 -
computed、watch、methods的区别
computed(计算属性)computed具有缓存的特性,只有依赖值发生变化才会重新计算computed必须用return返回computed默认第一次加载时候就监听watch(侦听器)watch 不具有缓存的特性,只要监听的值发生变化就会执行回调watch 不是必须returnwatch 默认第一次加载不做监听,如果需要加载就执行一次的话可以使用immediate属性设置为true应用场景computed当一个值被多个值影响的时候使用—购物车watch当一个值影响多个值的时原创 2022-03-27 18:17:31 · 609 阅读 · 0 评论 -
MVVM、MVC的区别
MVCMVC: Model-View-Controller的简写,即模型-视图-控制器模型(Model)指的是后端传递的数据视图(View)指的是所看到的页面控制器(Controller)指的是页面的业务逻辑使用MVC的目的是将模型层与视图层的代码分离,MVC是单向通信的,也就是视图层与模型层想交互,必须通过控制器来实现MVVMMVVM: Model-View-ViewModel的简写,即模型-视图-视图模型模型(Model)指的是后端传递的数据视图(View)指的是所看到的页面视原创 2022-03-27 12:25:18 · 863 阅读 · 0 评论 -
关于 vue 里面使用事件总线busEvent 的 $emit 和 $on 会多次触发的问题
因为我们的busEvent是全局的,切换路由、跳转页面 $on 并不会自动销毁,所以需要我们手动清除Bus.$on('handleChange', res => { // 清除事件名为 handleChange 的订阅 Bus.$off('handleChange'); // 然后再做想做的事 }),也可以在vue生命周期 beforeDestroy 里面清, 看自己。...原创 2021-09-08 14:18:14 · 1422 阅读 · 0 评论 -
Vue.$nextTick() 理解 + 案例 + 案例效果
Vue.$nextTick()节选自官方文档:vue 在更新 DOM 的时候是异步更新的,不会立即渲染 DOM,一旦监听到数据发生变化,会开启一个队列,在下一个事件循环 ‘tick’ 中更新看不懂?那就看案例这里写了个点击按钮在数组中添加1-10的随机数,输出 dom 元素的长度。<template> <div> <div ref="pRef"> <p v-for="(item, index) in arr" :ke原创 2021-06-25 23:20:59 · 571 阅读 · 3 评论 -
vue watch 如何监听一个对象内部的变化(deep)
监听某个属性如果只是监听对象的某个属性的话,可以使用字符串的形式监听属性 (对象.属性名)<template> <div class="watch"> <button @click="changeName">修改obj.name</button> <input type="text" v-model="obj.name" /> <button @click="changeSex">修改obj.sex&l原创 2021-06-25 14:43:58 · 1174 阅读 · 2 评论 -
vue面试题 高频 含答案
最近整理的vue感觉常见的面试题1. Vue 组件 data 为什么必须是个函数而不是对象?因为 Object 是引用数据类型,如果不用 function 返回,每个组件的 data 都是内存的同一个地址, 会相互影响js 只有函数构成作用域, data 是一个函数时,每个组件实例都会有自己的作用域,每个实例相互是独立的,不会互相影响2.v-show 和 v-if 的区别?实现本质v-show 是通过 display: none 和 display: block 之间的切换实现v-原创 2021-06-24 16:32:28 · 1447 阅读 · 34 评论 -
vue修饰符(事件修饰符、v-model修饰符、键盘修饰符、自定义键盘修饰符)
事件修饰符.stop: 阻止事件冒泡,相当于调用了 event.stopPropagation()方法<button @click.stop="test"></button>.prevent: 阻止默认行为,相当于调用了 event.preventDefault()方法,比如表单的提交、a 标签的跳转就是默认事件<a href="" @click.prevent="test"></a>.self: 只有点击元素本身才会触发。比如一个原创 2021-06-20 22:08:44 · 698 阅读 · 33 评论 -
vue组件间通信 — eventBus 的使用
其实就是发布订阅者: emit(触发,也就是发布),on(监听,也就是订阅) 直接上案例;一、先创建一个 eventBus.js 文件文件名字随意,位置随意。我是在 src 目录下 创建了个 utils 文件夹,下面新建一个 eventBus.jseventBus.js代码import Vue from 'vue';export default new Vue();二、在需要用到 eventBus 的组件中引入 eventBus.js三、Bus.$emit() 发布Bus消息的组件.原创 2021-06-19 23:24:26 · 505 阅读 · 4 评论 -
vue路由的钩⼦函数
路由的钩子函数有六个全局的路由钩子函数:beforeEach、afterEach单个路由的钩子函数:beforeEnter组件内路由钩子函数:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave全局路由钩子函数全局前置守卫: beforeEach(to, from, next)router.beforeEach: 在每次每一个路由改变的时候都会执行一遍to:将要进入的路由对象from: 当前正要离开的路由对象nextnex原创 2021-06-19 15:12:06 · 787 阅读 · 1 评论 -
超全面vue生命周期钩子函数(8+3)
什么是生命周期生命周期就是物体从诞生到死亡的过程,Vue的生命周期就是从初始化到销毁的过程什么是钩子函数vue的生命周期钩子函数是作者在设计vue的时候,在vue从初始化到销毁的这段时间内的特殊时间段给我们定义的一些定义函数的权利,定义了就会执行,不定义就不会执行,生命周期的钩子函数中的this,会默认指向vue的实例;生命周期的八个钩子函数初始化阶段beforeCreatecreatedbeforeMountmounted更新阶段beforeUpdateupd原创 2021-06-17 21:03:07 · 364 阅读 · 0 评论 -
Vue 内置组件 keep-alive, 官方文档看不懂就看这个
keep-alive 是什么keep-alive 是 Vue 的内置组件,keep-alive 包裹的动态组件在切换的时候不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数keep-alive 的作用在动态组件切换的时候,保存组件的状态、防止多次渲染DOM、降低性能消耗动态组件如果不用 keep-alive 包裹,相当于每次切换组件都会销毁、创建(反复销毁创建DOM),这样会导致组件里面的数据无法保存举个栗子aaa.vue<template> <原创 2021-06-17 13:50:05 · 1007 阅读 · 18 评论 -
vuex的五个属性分别是什么,区别和用途。
一、state可以看作 data 数据存储状态(数据源),通过 this.$store.state.(状态) 获取; 当一个组件获取多种状态的时候,为了方便可以使用 mapState 辅助函数来帮我们生成。// state.jsexport default{ num: 0, msg: "温情", age: 22}import {mapState} from 'vuex'let mapStateData = mapState(['num', 'msg', 'age原创 2021-06-04 19:17:33 · 1585 阅读 · 1 评论