
vue
援笔赋惊鸿
人生总是在转角处发现更多的风景
展开
-
elementUI Upload实现自定义阿里云上传文件
2.封装上传方法upload_oss.js3.封装上传组件UploadFile.vue4.在页面上调用这样就ok了原创 2022-06-07 17:32:34 · 460 阅读 · 0 评论 -
vue配置开发环境,测试环境,生产环境
开发环境:一般是本地开发时所使用的环境,改动很频繁测试环境:较为稳定的版本,一般用于部署测试生产环境:发布到线上的版本配置不同环境变量可避免切换不同环境时手动修改项目配置,请求url等,vue项目中可先在package.json文件中这样设置:"scripts": { "dev": "vue-cli-service serve --mode development", //开发环境 "dev:test": "vue-cli-service serve --mode t.原创 2022-04-18 15:01:25 · 6899 阅读 · 1 评论 -
Vue 面试点
目录1.Vue 如何实现数据双向绑定2.Vue 怎么实现对象和数组的监听3.Vue中vm.$set 的实现原理4.Vue 中的 key 有什么作用5.虚拟 DOM 实现原理6.vue-router 路由模式有几种7.vue-router 中常用的 hash 和 history 路由模式实现原理8.Vue 服务端渲染SSR9.组件中 data 为什么是一个函数10.对 SPA 单页面的理解和它的优缺点11.v-show 与 v-if 有...原创 2021-11-30 16:55:43 · 465 阅读 · 0 评论 -
Vue 项目优化
1.代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key,且避免同时使用 v-if 长列表性能优化 事件的销毁 图片资源懒加载 路由懒加载 第三方插件的按需引入 优化无限列表性能 服务端渲染 SSR or 预渲染 2.Webpack 层面的优化 Webpack 对图片进行压缩 减少 ES原创 2021-11-30 11:03:33 · 364 阅读 · 0 评论 -
keep-alive用法
在<router-view />外包裹keep-alive,这样在不刷新页面的情况下每个页面只会在首次进入触发生命周期,之后再重新进入页面就不会触发created(),mounted()等钩子函数如果需要在指定页面解除keep-alive的缓存,实现每次进入页面都会触发生命周期,keep-alive有2个属性:include,exclude原创 2021-11-25 10:50:40 · 223 阅读 · 0 评论 -
vue中使用less
第一步:安装less依赖npm install less less-loader --save第二步:修改build/webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",},...原创 2018-08-01 14:51:36 · 686 阅读 · 0 评论 -
VUE使用总结
一.Vue 的父组件和子组件生命周期钩子函数执行顺序Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated原创 2020-05-15 16:43:33 · 242 阅读 · 0 评论 -
VUE 3.0项目搭建
默认进行懒观察,只会对「被用于渲染初始可见部分的数据」创建观察者新加入了 TypeScript 以及 PWA 的支持目录结构和依赖版本的变更新建cli4项目由下面教程所示:原创 2020-04-28 15:22:05 · 1882 阅读 · 0 评论 -
基于vue封装axios请求
import axios from 'axios';import qs from "qs";const url = "https://www.baidu.com"; //访问地址域名axios.interceptors.request.use( config => { //如需添加token if (localStorage.getItem('token')) { config.headers["token"] = local.原创 2020-10-31 14:00:07 · 298 阅读 · 0 评论