Vue
文章平均质量分 50
关于Vue框架开发的那些事儿
椰卤工程师
这个作者很懒,什么都没留下…
展开
-
【避坑指“难”】el-table表格实现单选
el-table选择多行数据时使用 Checkbox,那么同样的,如果想支持单选的话,我们就可以把Checkbox的功能改为Radio即可。<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label="选择项" width="55"> <t原创 2022-05-05 12:42:14 · 19288 阅读 · 8 评论 -
【知识总结】前端高频Vue面试题合集
v-if 和v-show的区别共同点都能控制元素的显示和隐藏不同点v-show:通过css的display:none控制隐藏,只会编译一次v-if:动态的向DOM树添加或者删除DOM元素,若初始值为false,就不会编译了v-if不停的销毁和创建比较消耗性能。所以如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大);如果不需要频繁的切换某节点使用就使用v-if(初始渲染开心较小,切换开销较大)v-if和v-for的优先级v-for优先于v-if被解析。如果同时出原创 2021-09-20 18:45:47 · 345 阅读 · 0 评论 -
【每日卤一题】请讲述下VUE的MVVM的理解?
MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发,而不需要考虑页面的表现,具体说来如下:Model代表数据模型:主要用于定义数据和操作的业务逻辑。View代表页面展示组件(即dom展现形式):负责将数据模型转化成UI 展现出来。ViewModel为model和view之间的桥梁:监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model原创 2021-03-05 14:17:38 · 201 阅读 · 2 评论 -
【避坑指“难”】ant-design-vue中Upload上传组件使用customRequest:httpRequest后进度条消失
<a-upload style="margin-left: 10px;" name="file" :multiple="true" action="#" :customRequest="httpRequest" :beforeUpload="beforeUpload" .原创 2021-01-20 18:58:21 · 4239 阅读 · 0 评论 -
Vue源码解析——组件化机制
组件化机制组件声明:Vue.component()initAssetRegisters(Vue) src/core/global-api/assets.js 组件注册使用extend方法将配置转换为构造函数并添加到components选项组件实例创建及挂载:观察生成的渲染函数"with(this){return _c('div',{attrs:{"id":"demo"}},[ _c('h1',[_v("虚拟DOM")]),_v(" "), _c('p',[_v(_s(foo))]),_v(" "),原创 2021-01-03 14:25:22 · 236 阅读 · 0 评论 -
Vue源码解析——模版编译
模版编译的主要目的:将模版template转换为渲染函数render即template => render()模版编译必要性Vue 2.0需要用到VNode描述视图以及各种交互,手写显然不切实际,因此用户只需编写类似HTML代码 的Vue模板,通过编译器将模板转换为可返回VNode的render函数。体验模版编译带编译器的版本中,可以使用template或el的方式声明模板。compiler.html(function anonymous(){with(this){return _原创 2021-01-03 14:15:41 · 127 阅读 · 0 评论 -
如何在面试中回答:描述diff算法的实现过程
如何描述diff算法过程1、自顶上下,同层比较:比较两棵树是否有孩子节点,若有,比较孩子节点,此时比较的是一个数组,采用深度优先算法。比较时会采用的策略:比较key是否相同、tag是否相同等一系列判断,都相同的情况下才会判定这两个节点相同。整个流程:判断是否元素=>双方都有孩子=>比较孩子=>新节点有孩子=>清空老节点文本关于Diff是什么性能、好处:跨平台+兼容性在什么地方使用、落地:在patch打补丁时,存在新旧虚拟dom时怎么比较的:总体来说,深度优先原创 2021-01-03 13:37:16 · 724 阅读 · 0 评论 -
Vue源码解析——异步更新队列+虚拟dom
Vue源码解析——异步更新队列+虚拟dom异步更新队列Vue高效的秘诀是一套批量、异步的更新策略。每一个组件对应一个watcher实例,在一个队列中插入watcher,再进行批量操作。概念事件循环:浏览器的一套工作机制。浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务。宏任务:一系列任务的集合,代表着一个个离散的、独立工作单元。浏览器完成一个宏任务,在下一个宏任务执行开始前,会对页面进行重新渲染。主要包括创建主文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络原创 2021-01-03 12:46:39 · 325 阅读 · 2 评论 -
【每日卤一题】在 Vue 中,子组件为何不可以修改父组件传递的 Prop
子组件为何不可以修改父组件传递的 Prop单向数据流,易于监测数据的流动,出现了错误可以更加迅速的定位到错误发生的位置。如果修改了,Vue 是如何监控到属性的修改并给出警告的。if (process.env.NODE_ENV !== 'production') { var hyphenatedKey = hyphenate(key); if (isReservedAttribute(hyphenatedKey) || config.isReservedAt.原创 2020-12-08 19:04:01 · 617 阅读 · 0 评论 -
【每日卤一题】nextTick 的实现原理
<template> <div> <div>{{number}}</div> <div @click="handleClick">click</div> </div></template>export default { data () { return { number: 0 }; }, methods:原创 2020-11-28 20:06:37 · 177 阅读 · 0 评论 -
【每日卤一题】React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n)是怎么得来的?
关于O(n^3)怎么计算出来的这里的n指的是页面的VDOM节点数(虚拟节点数),这个不太严谨。如果更严谨一点,我们应该应该假设变化之前的节点数为m,变化之后的节点数为n。React 和 Vue 做优化的前提是“放弃了最优解“,本质上是一种权衡,有利有弊。React 和 Vue 做的假设是:检测VDOM的变化只发生在同一层检测VDOM的变化依赖于用户指定的key注意:如果变化发生在不同层或者同样的元素用户指定了不同的key或者不同元素用户指定同样的key, React 和Vue都不会检原创 2020-11-24 09:52:34 · 816 阅读 · 0 评论 -
【避坑指“难”】unicode的那些坑:将emoji编码为unicode
问题描述:例如贴吧、微博、论坛等有发帖和评论的功能,android、ios、前端需要对用户输入的emoji表情进行编码后存入数据库,保持三端统一,在内容显示上保持同步。解决方案:可以使用 unescape() 对 escape() 编码的字符串进行解码。1、前端拿到数据后,通过unescape()对unicode进行解码,可以正常显示emoji表情2、前端提交数据时,需要把emoji编码传回给数据库在这个一来一回的过程中,发现编码后的格式会出现误差,需要把符号替换成unicode格式这样原创 2020-09-23 17:13:04 · 1061 阅读 · 0 评论 -
【避坑指“难”】el-popover 点击取消按钮,弹窗仍然无法关闭
给el-popover添加属性:ref="popover-${scope.$index}" <el-popover placement="bottom" width="200" :ref="`popover-${scope.$index}`" :visible.sync="reviewVisible" > <div style原创 2020-09-08 11:19:38 · 1657 阅读 · 3 评论 -
【每日卤一题】列表组件中为什么要用到key?不写行吗?
React和Vue官网都推荐的使用key,应该理解为:使用唯一id作为key因为index作为key,和不带key的效果是一样的。index作为key时,每个列表项的index在变更前后也是一样的,都是直接判断为sameVnode然后复用。说到底,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。正是因为带唯一key时每次更新都不能找到可复用的节点,不但要销毁和创建vnode,在DOM里添加移除节点对性能的影响更大。所以会才说“不带key可能性能更好”。不信试试看原创 2020-11-19 18:46:30 · 235 阅读 · 0 评论 -
基于vue+element-ui实现Cascader级联选择器+Table树形数据
开发进度提前50%,啊,真香。下面,看图说话Table树形数据Cascader级联选择器功能实现+详细代码Cascader级联选择器options属性指定选项数组即可渲染出一个级联选择器,所以后端接口返回的数据结构要保持一一致性,这样处理起来会省很多事。element官网给出的options需要的数据格式:options: [{ value: 'zhinan', label: '指南', children: [{原创 2020-11-13 13:09:14 · 2255 阅读 · 1 评论 -
【避坑指“难”】DateTimePicker 日期时间选择器:结束时间不能小于开始时间
选择开始时间:选择结束时间:DateTimePicker 组件:```typescript <template v-slot:start_time="{ form, formItemKey }"> <el-date-picker v-model="form[formItemKey]" type="datetime" placeholder="选择开始时间" va原创 2020-10-22 11:04:05 · 919 阅读 · 2 评论 -
【避坑指“难”】代码详解:阿里云oss上传视频,服务端签名后直传(vue+element-ui)
文档直达:服务端签名后直传没有采用JS客户端签名直传上是因为,此过程AccessKey ID和AcessKey Secret会暴露在前端页面,因此存在严重的安全隐患。所以查找阿里云决定使用服务端签名后直传的方案。一、功能拆分视频上传组件 el-upload:<el-upload style="marginTop:-5px;" class="upload-demo" :action="ossParams.host || ''"原创 2020-10-21 17:38:46 · 560 阅读 · 0 评论 -
非父子组件通信传值——Bus.js
Bus作为一个中转站,实现非父子之间组件之间的通信,具体使用方法如下在任意位置定义bus.js:// 公共bus.js// 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果import Vue from 'vue'export default new Vue()A组件中引用bus.js:import Bus from './bus.js'export default{ components:{}, methods:{原创 2020-10-15 11:04:25 · 747 阅读 · 0 评论 -
【避坑指“难”】vue-video-player 实现Vue播放视频
vue-video-player实现很快,包含的功能也挺多,比较全面,推荐大家适用这个库。下面看看效果图:Main.jsimport VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)demo.vue <video-player class="原创 2020-10-14 15:17:51 · 869 阅读 · 0 评论 -
【避坑指“难”】用Moment.js库将UTC格式时间转换成标准时间(YYYY-MM-DD)
1、在项目中install moment 库npm install moment --save2、引用 import moment from 'moment'3、方法定义近日,Moment.js 库的维护者表示,Moment.js 将进入维护状态,后续将不会再对其进行更新,同时建议开发人员考虑替代方案。Moment.js 是一个轻量级 JavaScript 日期处理类库,提供了日期格式化、日期解析等功能,诞生于 2011 年。近十年的时间里,Moment.js 收获了很多开发者的支持,原创 2020-09-24 10:25:09 · 2323 阅读 · 0 评论 -
【避坑指“难”】Element-ui中Tabs标签禁止切换disabled的使用
<el-tabs @tab-click="handleTabs" class="el-tabs"> <el-tab-pane label="标签一" name="one" :disabled="tabOne" ></el-tab-pane> <el-tab-pane lab原创 2020-08-28 23:13:46 · 6305 阅读 · 4 评论 -
Nuxt.js 异步获取api接口数据
nuxt.config.jsmodules: [ // Doc: https://axios.nuxtjs.org/usage // '@nuxtjs/axios', // '@nuxtjs/proxy', '@nuxtjs/axios' ]index.vue<template> <div class="sp-policy"> <div>{{ Title }}</div> <div v-ht原创 2020-08-25 16:40:42 · 1380 阅读 · 0 评论 -
【5毛特效】不就是台iphone嘛,Vue纯手工实现“手机预览”and“网页预览”
手机预览?你以为我差的是那台iphone吗?我差的是那5毛钱!不然几百台我都给你分分钟整的明明白白。本次5毛钱主角登场:能力有限,先整台iphone7营业,等条件好了,再把iphone12搬来。预览前效果一:手机预览话不多说,看看我们iphone7的优秀表现:效果二:网页预览代码实现预览组件:ViwModal/index.vue<template> <Drawer :visible.sync="visible" //是否显示 Drawer,支持 .原创 2020-08-11 16:49:49 · 1489 阅读 · 1 评论 -
【避坑指“难”】前端如何用Vue+element实现可预览的图片墙
上传为缩略图,可点击放大图片、删除图片。<el-upload action="#" //必选参数,上传的地址 list-type="picture-card" //文件列表的类型 :limit="9" //最大允许上传个数 :auto-upload="true" //是否在选取文件后立即进行上传 :on-preview="handlePictureCardPreview" //点击文件列表中已原创 2020-08-10 16:23:10 · 1381 阅读 · 0 评论 -
【避坑指“难”】Vue实现图片懒加载
v-imgLazy这里我是用的IntersectionObserver API去实现的。IntersectionObserver 对象的observe() 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根, 但是可以监视多个目标元素,以查看这些目标元素可见区域的变化。简单来说可以监听dom元素进出可视区域,并且可以控制具体的变化。具体的使用请看 IntersectionObserver API:https://developer.mozill原创 2020-08-10 15:36:50 · 192 阅读 · 0 评论 -
【场景实现】Vue数据监听 ,场景——给每个帖子打上标签
帖子标题旁显示标签: <div class="post-title"> <span class="title-name">{{ 这里是帖子标题 }}</span> <el-tag class="post-title" v-for="item in choicetags1" :key="item.value" :label="item.label".原创 2020-07-29 11:41:55 · 248 阅读 · 0 评论 -
【场景实现】基于Vue搭建的后台管理系统,如何实现修改密码功能(md5加密)
首先创建一条数据:看看chrome的控制台,创建时传了哪些参数:设置的password和confirm_password为123456,这里看到的是已经经过md5加密处理过的数据。接下来修改这条数据的密码为:123修改成功,如下图:下面就看看该功能的核心代码部分: <template slot-scope="scope"> <el-button size="small" type="te原创 2020-07-29 10:43:43 · 2179 阅读 · 0 评论 -
【避坑指“难”】返回一大串html,Vue通过v-html解析展示成功
vue中不解析html标签,会把html标签给正常输出,vue中提供了v-html来解决这一问题。不解析的时候,拿到的数据是下面这样的:<div class="post-content "> {{ objData.content }}</div>使用v-html后的样子: <div class="post-content " v-html="objData.content"> </div>轻轻松松,简简单单搞定。...原创 2020-07-21 19:41:46 · 417 阅读 · 2 评论 -
【场景实现】Vue+element如何让帖子评论带上emoji,这个需求让我在富文本Quill开始了踩坑连连看
天降巨坑1:Quill富文本输入的内容提交后显示的有文本+标签到底是个啥说不明道不白的情况,来看看效果图:emm…看起来让人感觉真是怪别扭的。我也是前前后后想了很多种办法,却忽略了一种最原始的!最简单的!直接将输入的内容中的<>标签符号替换成空字符串不就完事了吗。二话不说定位一下这个发表评论的核心代码位置。先来来看看这个button:<div class="reply-btn-box" style="text-align:center"> <el-b原创 2020-07-10 18:45:45 · 2124 阅读 · 2 评论 -
【避坑指“难”】如何实现富文本编辑quill自定义图片、视频、文件等上传
图片与视频上传 <el-upload ref="uploadBox" :action="接口地址" :before-upload="checkFileSize" //再往下翻写了方法 :auto-upload="true" :on-success="uploadSuccess" //再往下翻写了方法 :file-list="detailPics" .原创 2020-06-08 10:53:09 · 2156 阅读 · 4 评论 -
【避坑指“难”】vue 如何通过点击触发另一个点击事件,即模拟点击事件
在前端中有时候会有这样的需求,通过点击一个按钮触发另一个按钮或者另一个链接的点击事件,在vue中我们通过下面方法解决:1、给另一个按钮添加ref <el-button ref="uploadImgBtn">上传图片</el-button>2、触发事件this.$refs.uploadImgBtn[0].$el.click()...原创 2020-06-03 10:02:13 · 5612 阅读 · 0 评论 -
el-table实现拖拽排序
SortableJS是功能强大的JavaScript 拖拽库其特点为:兼容性好-支持触屏设备和大部分浏览器简单-简单的API,方便使用原生-基于原生HTML5中的拖放APICSS框架兼容性-支持所有的css框架,像Bootstrap零依赖-不依赖Jquery等其他框架SPA支持良好-支持多种框架(angular、vue、react等)安装npm install sortablejs --save配置函数setSort() { const el = document原创 2020-05-27 20:02:28 · 2199 阅读 · 2 评论 -
踩坑:为什么 Nuxt.js 应用会出现重复的 Meta 标签?
为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。拿下面的例子来说,对于描述 meta 标签, 我们给 hid 属性设定一个唯一的标识值为:description, 当有组件定义了相同 hid 的 meta 标签时, vue-meta 将知道覆盖父级的配置。在应用配置文件 nuxt.config.js 中配置默认 meta:...head: { title: 'starter', meta: [原创 2020-05-22 14:35:02 · 908 阅读 · 1 评论 -
别再说你不会用Vue.nextTick()
Vue.nextTick( [callback, context] )参数:{Function} [callback]{Object} [context]定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的原创 2020-05-22 11:45:55 · 184 阅读 · 0 评论 -
关于Vue插槽(slot)你需要了解的事
Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 slot元素作为承载分发内容的出口。它允许你像这样合成组件:<navigation-link url="/profile"> Your Profile</navigation-link>然后你在 navigation-link的模板中可能会写为:<a v-bind:href="url" class="nav-link"> <s原创 2020-05-21 17:16:05 · 128 阅读 · 0 评论 -
关于Nuxt.js部署和配置,那些你闭着眼睛都要会写的步骤
如何使用外部资源?1、全局配置这样写,在 nuxt.config.js 中配置你想引用的资源文件:module.exports = { head: { script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' } ], link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.c原创 2020-05-13 15:40:20 · 2107 阅读 · 0 评论 -
Vue中不用for循环怎么遍历图片?你值得拥有
通常我们引用图片时,会直接这样写 <img src="~/assets/images/img1.png" alt="" />但是这样有一个弊端,如果图片数量巨大的话,很容易出错,造成图片不显示的情况,所以下面用一种遍历数组的方式来解决这个问题。1、首先,在images.js中定义一个图片数组img1、img2…为每张图片的名字(这些图片的后缀都是.png)import comm...原创 2020-04-27 19:55:13 · 1203 阅读 · 0 评论 -
vue-cli2脚手架:router实现子路由
在之前页面跳转的实例基础上,实现嵌套路由的效果:(三层嵌套)children:[{},{}]创建新的A1.vue页面:<template> <div> <p>我是A1</p> <p><router-link to="/a">返回上一级</router-link>&...原创 2020-04-27 10:03:57 · 610 阅读 · 0 评论 -
vue-cli2脚手架:router实现页面跳转
接下来,我们要实现在首页,可以通过链接进入a,b两个“页面”,与此同时,在还可以返回首页。创建A.vue和B.vue两个页面:修改index.js页面:修改A.vue和B.vue:<template> <div> <p>我是B...</p> <p><router-link to=...原创 2020-04-27 09:59:31 · 832 阅读 · 0 评论 -
vue-cli2脚手架:更改项目hello
接下来我们将vue-cli的默认首页更改为显示自定义的helloword。首先启动上一篇创建的项目hello,在浏览器直接打开:http://localhost:8080启动vscode打开hello文件夹,在src-components下创建新的.vue文件:修改first.vue:修改index.js:打开浏览器检测:无需运行,修改完后,浏览器会自动更新。...原创 2020-04-27 09:57:08 · 359 阅读 · 0 评论