vue
文章平均质量分 64
qq2276031
这个作者很懒,什么都没留下…
展开
-
vue3 组件学习
2-1prettier安装prettier配置文件 (.prettierrc){ "semi": false, //是否要写分号 "singleQuote": true, //是否使用单引号 "arrowParens": "always", //是否要单参数函数是否要加括号 `(x) => x` "trailingComma": "all"}用户会应用于所有项目,工作区应用于当前项目提取props,有问题的加上下面as...原创 2021-12-02 09:12:08 · 363 阅读 · 0 评论 -
vue-移动端适配-postcss-pxtorem
vue-移动端适配-postcss-pxtorem安装lib-flexiblenpm i lib-flexible --save在main.js引入lib-flexibleimport 'lib-flexible/flexible'安装postcss-pxtoremnpm install postcss-pxtorem -D配置postcss-pxtorem 在根目录的.postcssrc.js文件中修改 此文件自动生成,若没有,手动添加module.exports原创 2021-11-30 17:18:17 · 1857 阅读 · 0 评论 -
Vue生命周期与常见的八个钩子函数的解释
首先,每一个vue实例都有一个完整的生命周期,也就是从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。这是官方文档上的图片很熟悉:可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:beforeCreate created beforeMount mounted beforeUpdat原创 2021-10-29 23:07:00 · 2774 阅读 · 0 评论 -
Vue2.0 传值方法
Vue2.0 传值方法在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍。引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组原创 2021-10-29 16:10:42 · 657 阅读 · 0 评论 -
element中dialog出现滚动条记录位置问题
element中dialog出现滚动条记录位置问题//弹窗出现滚动条的时候滚动到最底下,下次在点开的时候还在最底下,可以通过以下方式解决<el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 :close-on-click-modal="false"原创 2021-05-12 15:02:03 · 3137 阅读 · 0 评论 -
1.vue-element-admin使用svg图标
vue-element-admin基础模板中,已经封装好了使用svg图标的组件,所在路径为:@/icons,在其中我们可以找到相关的代码,所有在文件夹中的svg图片注册到全局中,可以在项目中任意地方使用。所以图标均可在 @/icons/svg。可自行添加或者删除图标,所以图标都会被自动导入,无需手动操作。使用方式:<!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class--><svg-icon icon-class="pass原创 2020-07-28 18:10:46 · 5164 阅读 · 0 评论 -
vue-element-admin难点,知识点
1.@/store/index 引入modules// https://webpack.js.org/guides/dependency-management/#requirecontextconst modulesFiles = require.context('./modules', true, /\.js$/)// you do not need `import app from './modules/app'`// it will auto require all vuex mod..原创 2020-06-30 23:39:54 · 365 阅读 · 0 评论 -
图文详解 vue diff 核心方法 updateChildren
updateChildren function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0] let oldEndVnode = oldCh[oldEndI原创 2020-05-28 16:20:00 · 2391 阅读 · 1 评论 -
vue中8种组件通信方式, 收藏了!
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的作者简介:koala,专注完整的 Node.js 技术栈分享,从 JavaScript 到 Node.js,再到后端数据库,祝您成为优秀的高级 Node.js 工程师。【程序员成长指北】作者,Github 博客开源项目 github.com/koala-codin…vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先.原创 2020-05-25 16:39:50 · 161 阅读 · 0 评论 -
官人:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗?
前言本文标题的题目是由其他问题延伸而来,面试中面试官的常用套路,揪住一个问题一直深挖,在产生这个问题之前一定是这个问题.React/Vue不同组件之间是怎么通信的?Vue父子组件用Props通信 非父子组件用Event Bus通信 如果项目够复杂,可能需要Vuex等全局状态管理库通信 $dispatch(已经废除)和$broadcast(已经废除)React父...原创 2020-05-04 16:29:26 · 208 阅读 · 0 评论 -
Vue的举一反三
面试必备的13道可以举一反三的Vue面试题前言Vue框架部分我们会涉及一些高频且有一定探讨价值的面试题,我们不会涉及一些非常初级的在官方文档就能查看的纯记忆性质的面试题,比如:vue常用的修饰符? vue-cli 工程常用的 npm 命令有哪些? vue中 keep-alive 组件的作用?首先,上述类型的面试题在文档中可查,没有比官方文档更权威的答案了,其次这种问题没有太...原创 2020-05-04 11:19:49 · 182 阅读 · 0 评论 -
vue的双向绑定原理及实现
vue的双向绑定原理及实现前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位:代码: 效果图:...原创 2020-04-30 18:05:40 · 123 阅读 · 0 评论 -
vue组件 销毁定时器问题
我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示:解决方法1:首先我在data函数里面进行定义定时器名称:data() { return { timer: null // 定时器名称 } },然后这样使用定时器:this.timer = (() => { // 某些操作...原创 2020-04-28 16:53:46 · 917 阅读 · 0 评论 -
Vue 点击导航栏滑动到指定位置
效果图:assignBlock.gif方法1:<template> <div class="hold"> <!-- 跳转到指定模块 --> <div class="btn-box"> <button v-for="(i,index) in 5" @click...原创 2020-04-14 17:26:25 · 4553 阅读 · 1 评论 -
ElementUI换主题
项目仓库在这:https://github.com/ElementUI/theme-preview实现其实很暴力:先把默认主题文件中涉及到颜色的 CSS 值替换成关键词:https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274 根据用户选择的主题色生成一系列对应的颜色值:https://gith...原创 2020-03-31 04:24:22 · 243 阅读 · 0 评论 -
Vue的自定义滚动el-scrollbar
为什么要用el-scrollbar?最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用overflow: scroll;啊!嗯嗯,又不是不能用!如果我不曾见过太阳,我本可以忍受黑暗。大家总会见过不少滚动条比较优雅的实现,不可否认,美是让人愉悦的。所以这些年行走江湖我满怀愧疚,让大家见丑了。为什么要用el-...原创 2020-03-18 18:11:31 · 1205 阅读 · 0 评论 -
带你五步学会Vue SSR
SSR大家肯定都不陌生,通过服务端渲染,可以优化SEO抓取,提升首页加载速度等,我在学习SSR的时候,看过很多文章,有些对我有很大的启发作用,有些就只是照搬官网文档。通过几天的学习,我对SSR有了一些了解,也从头开始完整的配置出了SSR的开发环境,所以想通过这篇文章,总结一些经验,同时希望能够对学习SSR的朋友起到一点帮助。我会通过五个步骤,一步步带你完成SSR的配置:纯浏览器渲染 服务...原创 2019-10-15 16:49:41 · 340 阅读 · 0 评论