vue
文章平均质量分 67
小王编程w
这个作者很懒,什么都没留下…
展开
-
vue 自定义富文本
1. 下载 vue 插件npm install vue-quill-editor --save2. 引用到 main.js 里面// 富文本样式.cssimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'// 引入 富文本插件import VueQuillEditor from 'vue-quill-editor'Vue.u原创 2022-02-25 10:00:06 · 858 阅读 · 0 评论 -
打包报告+进度条+第三方CDN引入+路由懒加载
1.添加进度条首先我们先打开项目控制台,打开依赖(vue ui),安装nprogress,打开我们配置的相应拦截和请求拦截的页面,,我们在这里配置进度条//导入进度条插件importNProgressfrom'nprogress'//导入进度条样式import'nprogress/nprogress.css'////当进入request拦截器,表示发送了请求,我们就开启进度条,,,我们放到请求拦截的header头中 NProgress.start()//当进...原创 2021-06-24 00:44:22 · 283 阅读 · 2 评论 -
vue双向绑定原理
我们先说面试题答案:答:vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图他的具体实现步骤:1: 需要observer的数据对象进行递归遍历 ,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化2:compile解析模板指令,将模...原创 2021-06-17 08:48:35 · 228 阅读 · 1 评论 -
webpack打包优化
项目开始时webpack的配置vue-cli3以后,我们修改webpack配置,需要自己在项目根路径下创建vue.config.js文件配置proxy跨域使用vue-cli开发项目,在本地开发环境中,如果遇到跨域问题,跨域通过配置proxy的方法,来解决跨域的问题module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060,...转载 2021-06-04 15:27:58 · 335 阅读 · 0 评论 -
vue-router 鉴权 守卫
文章目录permission.js router.js store/index.js store/getters store/modules/permissionpermission.js//路由配置文件import router from './router'import store from './store'//需要安装nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css'//转载 2021-06-03 23:51:41 · 92 阅读 · 0 评论 -
axios拦截,api统一管理
axios说明Axios是一个基于 promise的http库,可以用在浏览器和node.js中,axios的封装和api接口的统一管理,其实主要的目的就是帮助我们简化代码和有利于后期的更新维护,在vue项目中,和后台获取数据这块,我们通常使用的是axios库,他是基于promise的http库,可运行在浏览器和node.js中,他有很多的特性,比如拦截请求和相应请求等等.......axios封装安装cnpm install axios --save //安装axi...原创 2021-06-03 23:30:50 · 115 阅读 · 0 评论 -
多环境变量配置
1 . vuecli3.0搭建的vue项目,配置多个环境变量 新建两个或多个文件,和package.json同级的:比如 .env.dev和env.prod通过 npm run serve 启动本地的项目,执行development 通过 npm run stage 打包测试 ,执行staging 通过 npm run build 打包正式,执行production "scripts": { "serve": "vue-cli-service serve --open",...转载 2021-06-02 23:02:05 · 135 阅读 · 0 评论 -
去哪儿的项目开发流程
确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant +rem + rem + sass + webpack搭建项目yarn ,npm(cnpm) // 包管理工具yarn add axios -Scnpm install axios -S-S // --save-dev 生产环境的依赖 (dependencies)-D // --dev 开发环境的依赖 (devDependencies)从0...原创 2021-06-02 22:48:24 · 72 阅读 · 0 评论 -
创建vue项目空框架
Vue3.x脚手架的安装 我们先检测有没有安装node和npm node -v //检测是否安装了node npm -v //检测是否安装了npm cnpm -v // 检测是否安装了cnpm cnpm 是国内的工具,方便以后我们下载其他的依赖,用cnpm比较快检测是否安装了vue3.x版本 vue -V //检测vue是否安装 // 如果没有安装的情况下,我们全局安装 cnpm install -g @vue/cli@3....原创 2021-06-01 21:46:17 · 704 阅读 · 0 评论 -
vue的transition
transition介绍keep-alive和transition相似(https://blog.csdn.net/qwerwjs/article/details/117449446?spm=1001.2014.3001.5501),只是一个抽象组件,他不会在DOM树中渲染(真实或虚拟的都不会)过渡的类名在进入或离开的过渡中,会有6个class切换 1 . v-enter : 定义过渡的开始状态 在元素被插入之前生效,在元素被插入之后的下一帧移除...原创 2021-06-01 21:13:49 · 64 阅读 · 0 评论 -
vue中的keep-alive
keep-alive的概念 keep-alive是Vue的内置组件,当他包裹;它自身不会渲染成一个DOM元素,也不会出现在父组件链中.作用 在组件切换过程中将状态保留在内存中,防止重新渲染DOM,减少加载时间以及性能消耗,提高用户体验原理 在createdh函数调用时将需要缓存的 VNode 节点保存在this.cache中 / 在render(页面渲染)时,如果在VNode的name符合缓存条件,则会从this.ca...原创 2021-06-01 20:18:51 · 78 阅读 · 0 评论 -
数组常用的方法(es4,es5,es6)
1.什么是数组存储一组关联数据2.数组定义方式 1.数组直接变量(常用)var arr = [] ;var arr2 = [10,20,30]; 2.也可以通过new来创建var arr3 = new Array();var arr4 = new Array(10,20,30)console.log(arr4) // [ 10, 20, 30 ]3.数组访问数组名[下标(索引)] 索引0 1 2 3....数组的长度可以通过数组名.length访问...原创 2021-05-25 20:57:13 · 109 阅读 · 0 评论 -
js中数据类型判断
console.log(1 + "1") // 11console.log(2 * "2") // 4console.log([1, 2] + [2, 1]) // 1,22,1console.log("a" + + "b") // aNaNjavascript中检测对象的类型的运算符有:typeof,constructor和instanceoftypeof:typeof是一个一元运算符,返回结构是一个说明算数类型的字符串.但是typeof的能力有限,对于Data,RegExp,.原创 2021-05-24 21:10:36 · 140 阅读 · 1 评论 -
JavaScript的数据类型
js数据类型有哪些:基本数据类型(值类型):Number,String,Boolean,Undefined,Null,Symbol(es6新增第一五二的值)和Biglnt(es10新增的)引用数据类型:Object.包含Object,Array,function,Data,RegExp.备注: 基本数据类型,又称值类型栈堆存储值类型栈存储:主要针对(Number,String,Boolean)三种数据.直接存储在栈(stack)中,占据空间小,大小固定,属于被频繁使用数据,所以放在栈.原创 2021-05-24 19:52:25 · 192 阅读 · 0 评论 -
深拷贝
什么是深拷贝:首先我们要明白一点,js中数据类型分为基本数据类型(Number, String, Boolean, Null, Undefined, Symbol)对象数据类型(Object)引用数据类型的值时保存在栈内存和堆内存中的对象.栈区内存保存变量标识符和指向堆内存中该对象的指针。当寻找引用值时,解释器会先寻找栈中的地址。然后根据地址找到堆内存的实体。为什么要进行深拷贝首先我们先看代码:let a = b = 2a = 3console.log(a)con..原创 2021-05-23 21:45:13 · 63 阅读 · 0 评论 -
vue-route 的使用
我们先来说vue-route的两种模式以及区别为什么要有hash和history?对于Vue这类渐进式前端开发框架,为了构建spA(单页面应用),需要引入前端路由系统,这也就是vue-route存在的意义,前端路由的核心,就在于------改变视图的时不会向后端发出请求.为了达到这个目的,浏览器当前提供了以下两种支持: 1:hash----即地址栏URL中的#符号比如这个 URL:http://www.abc.com/#/hello,hash 的值为#/hello。它的特点在于:h...原创 2021-05-23 21:26:05 · 567 阅读 · 0 评论 -
Vuex概念
Vuex是什么?Vuex是一个专门为vue.js应用设计的 (状态管理架构) , 统一管理和维护各个vue组件的可变化状态 (可以理解成vue组件李某些data).Vue有五个核心概念,分别是"state,getters,mutations,actions,modules".文本将对这个五个狠心概念进行梳理.总结:state是基本数据类型getters是从基本数据派发的数据mutations是提交更改数据的方法,同步actions他像是一个装饰器,包裹mutatuons,是之可以原创 2021-05-23 19:38:55 · 107 阅读 · 0 评论 -
vue的生命周期
vue的生命周期分为8个阶段简记:##创建前/后##:在beforeCreated阶段,vue实例的挂载元素el和数据对象 data 都为undefined,还未初始化。在 created阶段,vue实例的数据对象data有了,el还没有。##载入前/后##:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染##更新前/后##:转载 2021-05-21 07:56:18 · 747 阅读 · 0 评论