vue
文章平均质量分 95
Missy Peng
小猫在午睡,地球在转圈。
展开
-
Vue2响应式原理解析和实现
核心原理Vue通过 Object.defineProperty 的 getter/setter 对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据。监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者;订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理;订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图;Object.definePropertyObject.def原创 2021-09-25 21:39:08 · 1091 阅读 · 0 评论 -
浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程
简介项目部署完成后的项目结构以及解释如下图所示项目运行项目的运行入口index.html为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js,以及他们之间的关系是如何联系起来的呢,这块的配置文件位于build文件夹下,包括webpack.dev.conf.js等,感兴趣的可以了解下。通过项目的配置文件,可以加载运行我们的index.html文件以及自动关联vue相关的模块。首先我们来看一下index.html中的内容转载 2020-11-23 11:24:16 · 517 阅读 · 0 评论 -
前端性能优化之vue-cli3 开启gizp压缩及nginx配置
需求项目build后的文件过大,导致网站加载时间过长,所以需要尽量压缩文件的大小,之前的文章介绍过cdn加速方法进行优化(vue cdn加速 解决vendor.js文件过大),这次在介绍一个更加厉害的优化方法——gzip,可以在原先的基础上,再压缩50%以上gzip压缩原理一般浏览器都已支持.gz的资源文件,在http请求的Request Headers中能看到 Accept-Encoding:gzip客户端http请求头声明浏览器支持的压缩方式,服务端配置启用压缩,压缩的文件类型,压缩方式。当客原创 2020-10-30 17:46:45 · 731 阅读 · 0 评论 -
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件。ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的,我们需要能够上传自制的MP3音频格式的文件。那么如何实现呐,下面介绍一种方法:分析其实ueditor的视频上传功能是可以上传音频文件的,只是在加入到编辑器里面的时候,html结构不正确而已。所以,我们可以根据这个思路去找解决的方法。效果图先po一下效果图实现第一步:选择配置文件在页面加载.原创 2020-10-23 11:34:26 · 2930 阅读 · 2 评论 -
Vue 子组件修改父组件值的解决方法
分析vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控; 此外,每次父组件的数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告但我们可能会遇到,需要在子组件修改父组件值的需求,这里介绍三种方法实现:实现方法一:通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改子组件:接受父组件传来的cateId值,但是子组件原创 2020-10-21 22:51:30 · 11118 阅读 · 0 评论 -
Element-ui Radio单选框中label绑定数据类型问题
:label绑定的是Boolean布尔类型或Integer整型数值label绑定的是String字符串类型例如:用 lable绑定的是字符串类型 <el-radio-group v-model="form.type"> <el-radio label="1">学习体会</el-radio> <el-radio label="2">学习任务</el-radio></el-radio-group>用 :la.原创 2020-10-19 17:41:56 · 7577 阅读 · 0 评论 -
element-ui 表格中带有按钮的loading详细解决方案
最近写项目遇到一个问题就是表格里的按钮加载状态设置,就是表格里的按钮在进行操作时,显示相应的加载状态,操作完成后,恢复正常状态。解决思路在找到解决方案前,还进行了其它方案尝试:方案一:data中设置一个对象,里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,... }缺点:不知道会列表里会有多少条数据(鸡肋,不建议采用,本篇文章不再介绍)方案二:按钮直接设置 v-loading="scope.row.MarkUpPirceLoad原创 2020-09-19 16:01:32 · 12511 阅读 · 1 评论 -
Vue集成UEditor(vue-ueditor-wrap)
第一步:下载依赖npm i vue-ueditor-wrap -S第二步:下载ueditor并将其复制到public目录下Ueditor下载下载完成后会发现怎么需要根据官网的Readme.md文档,进行相应操作执行完上述步骤后,项目下会产生一个dist文件把utf8-php文件下的所有文件复制到自己的项目的publc目录下的ueditor目录下第三步:引入到项目中import VueUeditorWrap from 'vue-ueditor-wrap'第四步:在模板中使用组件原创 2020-09-12 11:19:11 · 3185 阅读 · 0 评论 -
Vue+Echarts+百度地图 小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下。1、安装echarts(使用3.x,4.x)npm install echarts --save通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。ECharts 目前暂停地图下载,所以使用百度地图作为底图,需要安装百度地图扩展 2、安装.原创 2020-08-06 16:25:57 · 2104 阅读 · 1 评论 -
vue 上传图片时压缩大小——image-conversion
1、安装模块npm i image-conversion --save2、引入imageConversion,进行压缩在需要用到图片压缩的地方,引入imageConversion,并在相应的方法里进行压缩import imageConversion from 'image-conversion' //把图片文件座位参数传递到方法中beforeAvatarUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.原创 2020-08-02 09:11:11 · 16900 阅读 · 31 评论 -
Elememt-UI 导航高亮与路由同步
1、index配置为导航的路由地址2、default-active 绑定为当前路由 $route.path<el-aside width="200px"> <el-row class="tac"> <el-col> <el-menu class="el-menu-vertical-demo" router原创 2020-07-25 22:42:55 · 267 阅读 · 0 评论 -
一看就会之ElementUI修改默认样式
(一)内嵌法通过:style修改,用于局部组件块:<el-button :style="selfstyle">默认按钮</el-button><script> export default { data() { return { selfstyle: { color: "white", marginTop: "10px", width: "100px", backgroundColor: "cadetblu原创 2020-07-18 16:04:15 · 737 阅读 · 0 评论 -
一看就会之vue路由懒加载
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。介绍支持webpack支持的懒加载方法有:这种方法比较通用,而且支持性好(resolve) => require(['./Foo'], resolve)法是官方文档Vue Router 推荐的,如下const Foo = () => import('./Foo')注意:如果使用的是Babel,需原创 2020-07-18 15:37:32 · 174 阅读 · 0 评论 -
vue cdn加速 解决vendor.js文件过大
项目打包完 十分巨大 首页加载缓慢 所以必须 要进行优化此文章将介绍cdn引用方法对其进行优化:步骤第一步:配置webpack,引入第三方cdn地址、打包忽视掉vue等包vue.config.js// cdn预加载使用const externals = { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', 'element-ui': 'Element', 'js-cookie': 'Cookies',}const cdn原创 2020-07-18 11:46:48 · 1354 阅读 · 0 评论 -
Vue 复用组件路由变化,页面不刷新 解决方法
路由参数变化,但是页面没有刷新这是Vue组件复用的默认处理方式不想复用的话,就在父组件的<router-view>标签上加个key<router-view :key="$route.fullPath"></router-view>原创 2020-07-12 13:14:11 · 936 阅读 · 0 评论 -
一看就会之Element 上传文件 设置请求头
<template> <el-upload action="test" :headers="myHeaders"></el-upload></template><script>var token = localStorage.getItem('token') // 获取tokenexport default { data () { return { myHeaders: {Aut原创 2020-07-12 13:08:24 · 12422 阅读 · 0 评论