vue2
文章平均质量分 67
以实战为线索,逐步深入Vue开发各个环节,掌握前端常用性能体现优化思路
彩色之外
vue3-directive-tools、vue3-loading-plug、progress-scroll 滚动进度可视化 作者,CSDN 高质博主之一。
吾山拔地三千尺,凌空耸翠一万年。Three thousand feet above the ground, ten thousand years in the sky.
展开
-
本地存储设置过期时间
直接发代码,不如说下思路,自己去想,其实设置本地存储时间,可谓太简单了不映入cdn,先说直接在本地操作...跟着我思路一起想首先你想下过期时间,用到了什么,对 ,是时间,好既然你知道,真牛,在添加本地存储的时候,加入时间字段,取出来时,用 当前时间 - 存入时间 >= 自定义过期时间使用场景:例如优化请求上代码看看Date.now()当前事件 new Date.getTime() 获取时间戳第一localStorage.setItem('cates......原创 2021-12-18 10:29:14 · 1182 阅读 · 1 评论 -
Vue配置多环境变量,原来是这么回事啊
环境变量的默认值和自己添加环境变量在main.js打印console.log(process.env); 会得到两个默认变量分别是BASE_URL:"" 和 NODE_ENV:"development", NODE_ENV:""可以用来区分环境是开发还是测试还是正式环境 如下图1 .如果想要自己定义添加环境变量需要,在根目录下新建.env文件以VUE_APP开头,例如:VUE_APP_MY_NAME="活在风浪",注意需要重新启动服务!1......原创 2022-01-01 22:52:09 · 2599 阅读 · 3 评论 -
webpack环境变量 和 vite 环境变量
/**前篇博客为详解vue多环境配置,此篇为如何使用,不多说解释,直接说代码使用方式**/tps:详解Vue多环境配置点击第一 配置package.jsonpackage.json 里的 scripts 配置 serve test build,通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run test 打包测试 , 执行 testing通过 npm run build 打包正式 , ...原创 2022-01-02 17:49:09 · 2791 阅读 · 1 评论 -
Vue v-for详细使用
目录定义vue数据❤vue循环数组❤❤❤❤vue循环对象❤❤❤❤效果❤四种创建对象的方法:❤❤❤两种创建数组的方法:❤❤❤对象的两种取值方式:❤❤❤❤数组扁平化❤❤声明函数的6种方式for in 遍历对象的key 和 value❤❤❤for of 遍历对象的key 和 值(value)❤❤❤for in / for of 遍历数组定义vue数据❤ data: { //数组 ...原创 2021-12-06 11:02:54 · 45123 阅读 · 0 评论 -
Vue项目电商后台管理系统 nprogress--进度条
前言:结合到Vue项目上的进度条,完整版点击上面查看项目,定会收获颇多简介:在你打开页面的时候,出现进度条,在最顶部!与加载中相辅相成效果图例:原创 2022-02-08 16:58:31 · 2364 阅读 · 4 评论 -
Vue 组件通讯 props接受形式有哪些
props对象接收的值怎么使用通过对象的方式定义props成员,可以为每个prop成员制定规则(类型,校验…),常用的如下.父传子props接受的形式原创 2021-12-01 21:29:37 · 4480 阅读 · 0 评论 -
web前端面试官: 如何让你开发的组件支持 v-model,在往细了说一说
组件使用v-model相当于在组件上添加:value @input事件,可以通过model属性自定义设置,与data、props同级我热爱 vue.js , ElementUI , Element Plus 相关技术栈,我的目标是给大家分享最实用、最有用的知识点,希望大家都可以早早下班,并可以飞速完成工作,淡定摸鱼????原创 2022-01-30 20:37:59 · 3029 阅读 · 9 评论 -
Vue路由分模块 与 子路由嵌套,
路由模块化创建文件路径如下:路由模块化思路/**** 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { // XXX }* 导出多个路由模块要加[],例如export default [{},{}],* 在router.js引入,写在路由里,需要...引入的名字**/1、新建文件后 内容如下方新建的sort.js文件/** * 多个分模块路由。 */export default [{ // 如果多.原创 2022-01-07 07:45:47 · 1508 阅读 · 5 评论 -
Vue meta属性 路由元信息前后配置守卫
它可以切换不同页面显示不同的页面标题文字,也可以判断守卫放行的页面,下面一一解释{ path: '/', name: '', meta: { title: '后台管理主页', requiredPath: true, }, component: () =>原创 2022-01-03 17:29:12 · 1738 阅读 · 2 评论 -
Vue2插槽slot
vue的三种插槽原创 2021-12-06 22:23:21 · 512 阅读 · 1 评论 -
keep-alive 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>D.原创 2021-12-06 17:01:57 · 1118 阅读 · 0 评论 -
生命周期Vue2 / Vue3区别 (11个)
vue 生命周期原创 2021-12-06 16:24:38 · 824 阅读 · 1 评论 -
Vue2 局部自定义指令 / 全局自定义指令
全局自定义指令1 在mian.js写2 在需要的组件使用局部自定义指令directives全局没有s 局部加s 写法也不同script>export default { data() { return { color: "red",//为 变量背景色局部自定义指令 写值 }; }, methods: {}, components: {}, created() {}, //局部 的自定义指令directives与da.原创 2021-12-06 13:33:26 · 3766 阅读 · 0 评论 -
Vue2 diff 算法 和 Vue3 diff算法 区别
虚拟dom 是根据模板生成一个js对象(使用createElement方法),根据这个js对象再去生成真实的dom,对复杂的文档DOM结构,提供一种方便的工具,进行最小化的DOM操作 diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ,新的虚拟dom和旧的虚拟dom进行对比,这个对比的过程就是diff算法, 但是因为这种机制也给代码运行带来了一些压力 效率低 消耗内存。一些不变的数据,例如常量,不会去修改它是不需要对比的,vue3是将变量赋值flag1,不变原创 2021-12-06 10:42:24 · 7122 阅读 · 1 评论 -
计算属性 + Vue2 、Vue3 wacth + 过滤器
我热爱 vue.js , ElementUI , Element Plus 相关技术栈,我的目标是给大家分享最实用、最有用的知识点,希望大家都可以早早下班,并可以飞速完成工作,淡定摸鱼????。你可以在csdn关注我:活在风浪里,也可以在快手里找到我:张坤【视频达人】。希望大家在 2022 变得更强。...原创 2021-12-05 15:25:52 · 1047 阅读 · 1 评论 -
Vue组件通讯
Vue2 父子传值的 6 种方法原创 2021-12-05 12:28:17 · 2988 阅读 · 0 评论 -
Vue全局组件 和 局部组件
目录全局自定义组件局部自定义组件解释 自定义组件分为全局自定义组件和局部自定义组件,全局组件可以全局使用不需要在使用的页面引入,局部组件仅限当前引入页面 全局自定义组件 写好组件在main文件直接引入,这种是最简单的方式import myTabItem from '@/components/myTabItem/myTabItem.vue'Vue.component('my-tab-item', myTabItem) // 这种...原创 2021-12-04 22:49:35 · 623 阅读 · 0 评论 -
引用数据和基本数据类型存储
let obj1 = { name:'张三'}let obj2 = obj1obj2.name = '李四'console.log(obj1);// {name: '李四'}console.log(obj2 === obj1);//true一个对象赋值一个变量,变量将对象的值更改了,赋值的对象也会跟随变动,其实赋值的是指针,指针相同,共同指向堆内存中开辟的空间,所以obj2更改name,obj1的name也变动了完!Companionship is the deepest..原创 2021-12-04 18:31:55 · 270 阅读 · 0 评论 -
细谈axios 和 ajax
万物皆可抛,唯有学习高Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axios。使用 npm:$ 1. npm install axios$ 2. 在main.js 挂载到vue原型上起的名字叫$axios,程序员的默原创 2021-11-29 15:40:31 · 914 阅读 · 0 评论