Vue系列
文章平均质量分 83
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
八了个戒
愿代码之火永不熄灭,技术之光照耀前行!
展开
-
Vue2.0 不能监测数组和对象的变化原因以及解决方案
前言:众所周知,Vue2.0 对于数据响应式的实现上是有一些局限性的,比如:无法检测数组和对象的新增无法检测通过索引改变数组的操作针对以上问题,我们一般都会把锅甩给 Object.defineProperty。所以,在Vue 3.0 中,尤大把响应式数据部分弃用了 Object.defineProperty,而使用 Proxy 来代替它。难道 Object.defineProperty 真的要背这锅么,下面就来分析一下 Object.defineProperty 真的无法监测数组下标的变化吗?原创 2021-09-22 15:32:01 · 15501 阅读 · 13 评论 -
Element-ui el-table 使用 SortableJS 实现表格拖拽排序,并将排序结果更新到数据库使数据行顺序修改
前言当我们使用 Element el-table 组件时,需要用到拖拽排序的需求时,虽然 el-table 自带支持按列排序,但是当我们自己拖拽进行排序时,现有组件是无法满足的。这个时候我们就需要引入一个强大的js拖拽库:SortableJS该拖拽库简单易上手,官网提供了我们常用的拖拽效果的demo,下面我主要记录一下如何在我们的项目中快速上手使用。一、安装安装方式分为三种:1、npm 安装npm install sortablejs --save2、bower 安装bower inst原创 2021-09-13 14:21:57 · 9260 阅读 · 6 评论 -
Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案
问题:使用 Element el-table 组件时,给列 el-table-column 设置百分比%宽度无效( width="30%" )解决:Vue中要将 el-table-column 的宽度设置成百分比的话,不能通过设置 width来实现,而是要设置 min-width,并且每一列都必须设置 min-width。原因:el-table 组件会被 vue 解析成 html,Vue直接把百分号去掉把数值当做列宽来呈现,所以,width 设置百分比的值直接被解析去掉百分号% 变成 px 了。原创 2021-09-08 10:35:22 · 22746 阅读 · 5 评论 -
从Vue源码学习JavaScript 之 this instanceof Vue
在 lib/sdk.js 中if (!(this instanceof ChainSDK)) { return new ChainSDK(options);}先说结论:这里通过 this instanceof xxx 来判断有没有用 new 关键词调用。那么,为什么可以这么判断呢?我们分别了解一下 this 和 instanceof 的用法。this在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,它可以是全局对象、当前对象或者任意对象,这取决于函数的调用方式。原创 2021-08-16 10:45:29 · 1082 阅读 · 1 评论 -
最新最全的前端面试题集锦之 Vue3.0 篇【干货满满】
该内容主要整理关于 Vue3.0 的相关面试题,关于 Vue 2 的相关面试题请移步至:Vue 全家桶篇,其他内容面试题请移步至 最新最全的前端面试题集锦 查看。1. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API?—— 响应式优化(高频,重点!!!)这是在面试中问的最多的一个问题,无论是大厂还是中小型公司,都喜欢问,也是Vue更新的重点。defineProperty API 的局限性最大原因是它只能针对单例属性做监听。Vue2 中的响应式实现正是.原创 2021-07-08 15:09:07 · 2275 阅读 · 3 评论 -
Vue进阶 之 动态绑定Class 详解
这篇文章主要介绍了 vue 动态绑定 Class 的方式。Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM 绑定到底层数据。被绑定的 DOM 将与数据保持同步,每当数据有改动,相应的 DOM 视图也会更新。基于这种特性,通过 vue.js 动态绑定 class 就变得非常简单。一、数据绑定vue 指令以 v- 前缀标识,数据绑定的指令 v-bind:属性名,简写为 :属性名。例如:<a v-bind:href="https://bl.原创 2021-07-07 16:20:25 · 6519 阅读 · 2 评论 -
Vue进阶 之 自定义指令详解
这篇文章主要介绍了 vue 自定义指令。除了核心功能默认内置的指令 v-model、v-show、v-if 等,Vue 也允许我们注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。一、什么是自定义指令自定义指令是用来操作 DOM 的。尽管 Vue 推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的 DOM 操作,并且是可复用的。自定义指令的第二用处是用于集成第三方插件。我们知道任何软件开发领域都可.原创 2021-07-07 15:52:33 · 3578 阅读 · 0 评论 -
Vue-Router 之 路由导航守卫钩子详解【最全实用总结】
这篇文章主要介绍了 vue-router 路由导航守卫钩子的使用总结。一、什么是导航钩子官方解释:vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的,单个路由独享的,或者组件级的。也就是说:导航钩子就是用来监听路由的变化,当路由发生改变的时候就去触发 vue-router 的导航钩子。二、路由守卫路由守卫主要分为以下几种:全局守卫路由独享守卫组件内守卫下面将对每一个导航钩子进行详细讲解。三、全局守卫1. .原创 2021-07-01 14:00:51 · 1738 阅读 · 2 评论 -
Vue 之 路由跳转传参方式详解【最全实用总结】
这篇文章主要介绍了 vue 路由跳转传参的几种方式总结。一、路由跳转Vue 中路由跳转主要分为两种方式:声明式路由导航(<router-link>)编程式路由导航(js的方式)下面将主要对这两种跳转方式进行详细解析。二、声明式路由导航<router-link>不带参数跳转<router-link :to="{name: 'home' }" > </router-link><router-link :to="{pa.原创 2021-06-29 15:25:30 · 9126 阅读 · 2 评论 -
Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录前言API`MediaDevices.getUserMedia()`拍照功能实例完整代码实现效果录像功能实例完整代码实现效果总结前言最近在做开源实例: Vue.js 实战系列之实现视频类WebApp的项目(仿抖音App)【感兴趣的小伙伴可以看一下】,其中就有一个功能是视频的拍摄发布(摄像头调用,视频录制等功能),所以特意整理一个Vue如何使用该API调用本地摄像头实现录像拍照功能。本文主要包括前端调用本地摄像头实现拍照、录像的使用实例、应用技巧、基本知识点总结和一些需要注意的事项,在项目开发中具有原创 2021-05-31 17:06:53 · 25753 阅读 · 43 评论 -
Vue 之 父子组件通信与事件触发(最全实用总结)
之前写过一篇关于基于 微信小程序的父子组件传值通信与事件触发,今天整理一片关于 Vue 的父子组件的相关内容。一、组件子组件<template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</button> <div>子组件接收父组件.原创 2021-05-25 15:34:04 · 2686 阅读 · 38 评论 -
最新最全的前端面试题集锦之 Vue 全家桶篇(从基础到高级,最新最全最详细解答)
该内容主要整理关于 Vue 的相关面试题,其他内容面试题请移步至 最新最全的前端面试题集锦 查看。一、Vue基础面试题(附答案)1. keep-alive 组件有什么作用?keep-alive 是 vue 的内置组件,而这个组件的作用就是能够缓存不活动的组件。一般情况下,组件进行切换的时候,默认是会进行销毁的,如果我们有需求,在某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用 keep-alive 来实现。在 keep-alive 上有两个属性,可以对字符串或正则表达式进行匹配,匹配.原创 2021-04-08 16:59:14 · 2855 阅读 · 1 评论 -
当 uni-app 遇见 vscode,我该如何让它臣服
前言uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。不过,由于 HBuilderX 没有 Linux 版以及一些不为人知的秘密,想要使用 vs code。如果直接使用 vscode 开发 uni-app,其体验并不是很好,但是碰上了神通广大的我们,必须要让他臣服。其实 uni-app 和 vscode 也可以很搭,接下来为各位小伙伴带来 vscode 中 uni-app 的正确打开姿势。使用一、CLI 工原创 2021-03-16 15:00:10 · 1107 阅读 · 2 评论 -
基于Vue实现一个轻量级富文本编辑器 Vue-Quill-Editor 插件
Vue-Quill-Editor 是一个基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。一、实现效果:二、使用方法:1. 下载 Vue-Quill-Editornpm install vue-quill-editor --save2. 下载 Quill(Vue-Quill-Editor 需要依赖)npm install quill --save也可以使用 CDN 的方式引原创 2021-01-19 15:21:19 · 2464 阅读 · 1 评论 -
迟到的 Vue3.0 与 Vite 的体验学习总结
尤大的 Vue3.0 已经发布有一阵子了, 已经很成熟了。今天想起来,是时候该上手体验一波了。Vue3中文文档 - vuejsVue3.0 亮点Performance:性能更比Vue 2.0强;Tree shaking support:可以将无用模块“剪辑”,仅打包需要的;Composition API:组合式API;Fragment, Teleport, Suspense:“碎片”,Teleport 即 Protal 传送门,“悬念”;Better TypeScript support.原创 2020-12-29 11:20:40 · 1181 阅读 · 7 评论 -
Vue3应用之使用Vite搭建Vue3项目以及TypeScript、Vue Router、Vuex、Ant Design的使用
尤大的 Vue3.0 已经发布有一阵子了, 已经很成熟了。今天想起来,是时候该上手体验分享一波了。前言大家都知道,在 Vue3 生态系统中有一个新构建工具 Vite ,它的开发服务器比 Vue CLI 快 10 ~ 100倍,是不是很好奇?具体的内容可以移步至:迟到的 Vue3.0 与 Vite 的体验学习总结 的 七、Vite 与 Vue CLI 阅读。本文将主要分享如何使用 Vite 来创建一个 Vue3.0 的项目,并且结合相关内容(TypeScript、Vue Router、Vuex、An.原创 2021-01-05 18:06:59 · 15096 阅读 · 11 评论 -
通过JS来判断打开的浏览器页面是PC端还是移动端或者是其他形式(navigator.userAgent)
在进行渠道管理时,由于要在各种不同端(包括任何形式的pc端、移动端、app、Android/IOS、小程序等)中内嵌h5页面来展示不同的内容,且具有良好的兼容性。使用navigator.userAgent 可以实现该功能,且在所有浏览器都支持。一句就可以判断是什么端window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "mobile_web端页面" : "PC端页面"/.原创 2020-09-02 09:20:48 · 5116 阅读 · 0 评论 -
swiper 插件从后台获取数据没问题,css 代码啥的也没问题, 但是图片不动,应该怎么解决?
swiper 插件从后台获取数据没问题,css 代码啥的也没问题,但是图片不动,应该怎么解决?本质上就是数据加载顺序,生命周期的问题。主要原因:swiper提前初始化了,而这个时候,数据还没有完全出来。解决方法:(两个方向)从swiper 入手,在swiper中写 observer:true/observeParents:truelet myswiper = new Swiper(".swiper-container" , { autoplay: true, loop: true,原创 2020-08-24 21:29:17 · 455 阅读 · 0 评论