![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端框架vue
文章平均质量分 66
那一日面朝大海
好久不见 -q1367156312
展开
-
Vue实现列表拖拽排序
在业务中列表拖拽排序是比较常见的需求,常见的JS拖拽库有Sortable.js,Vue.Draggable等,大多数同学遇到这种需求也是更多的求助于这些JS库,其实,使用HTML原生的拖放事件来实现拖拽排序并不复杂,结合Vue的transition-group,还能快速的给排序添加过渡动画。HTML5拖放API设置元素为可拖放让一个元素能被拖放需要设置 draggable 属性为true(文本、图片和链接的draggable默认就是true)<div draggable="tru转载 2021-08-13 17:53:38 · 9806 阅读 · 5 评论 -
Vue的EventHub组件传值方式
EventHub 是一个非常重要且常用的东西,在不相关组件通信方面有着很强大的作用。EventHub想想如果从最顶层组件传一个 data 给最底层组件,仅仅使用父子传递的方式会变得十分麻烦。而 EventHub 就是用来解决这个问题的:在需要获取 data 的组件上设置一个监听器,每次要传递 data 时,那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个: 监听和广播,当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能,我们可以使用 Vue 来描述这原创 2021-03-08 10:23:36 · 471 阅读 · 0 评论 -
axios的使用
axios是vue官方推荐的http库,详情见官方中文文档。安装:npminstall axios安装依赖:npminstall--save axios vue-axios配置模板://main.js中import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)//然后你就能愉快地使用axios啦如果不想这样安装...转载 2020-11-10 19:17:17 · 119 阅读 · 0 评论 -
Vue清除定时器,延时器setIntederval,setTimeout的优化方案
Vue清除定时器,延时器setIntederval,setTimeout的优化方案:两种方案清除定时器,在开发过程中经常使用方案1,建议使用方案2,方案1:首先定义定时器名称:data() { return { timer: null // 定时器名称 } },使用定时器:this.timer = setTimeout(()原创 2020-09-30 15:28:30 · 3794 阅读 · 0 评论 -
上手Vue3中新增的API
1. 初始化项目//①npmi-g@vue/cli//②vuecreatemy-project//③npminstall@vue/composition-api-S//④main,jsimportVuefrom'vue'importVueCompositionApifrom'@vue/composition-api'Vue.use(VueCompositionApi)2. setup方法setup是vue3.x中新的操作组件属性的方...转载 2020-09-27 16:54:39 · 302 阅读 · 0 评论 -
开始学习 Vue3.0,先来搭建环境
本文转载自微信公号:前端有的玩,作者前端进击者本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容: 使用vite初始化Vue3.0项目 配置ts 配置vue-router 配置vuex 使用Vue3.0开发一个TodoList示例 一、使用vite初始化项目vite 介绍vite是尤大大在今年新鼓捣出来的一个工具,尤大大对vite的描述是这样的: Vite is an opiniona..转载 2020-09-22 17:21:02 · 226 阅读 · 0 评论 -
Vue项目打包文件放在服务器后,浏览器存在缓存问题的解决方案
每次测试构建或者打包更新版本发到服务器上,导致偶尔会出现不能及时更新到最新代码,浏览器存在缓存的问题。解决方法一:vue-cli2.x或者webpack初始化的项目找到webpack .prod.conf.js ,vue-cli3.0 的找到配置文件vue.webpack.js 1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分output: { path: config.build.assets...原创 2020-09-17 17:14:48 · 5005 阅读 · 0 评论 -
VUE组件传值的几种方法
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent/$children、$attrs/$listener..转载 2020-09-08 15:53:23 · 904 阅读 · 0 评论 -
Vue什么情况下会用到 this.$nextTick( callback )呢
this.$nextTick(function(){ // 数据渲染完成之后才会执行的。})什么情况下会用到 this.$nextTick( callback )呢?(1)Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对..原创 2020-07-30 09:56:05 · 692 阅读 · 0 评论 -
ele表格表头调节宽度后缓存在浏览器
使用ele表格的header-dragend方法// 拖动表头 headerDragend (newWidth, oldWidth, column, event) { setTimeout(() => { // console.log(newWidth) // console.log...原创 2020-04-15 11:13:23 · 455 阅读 · 0 评论 -
vue一个界面有两个form表单如何进行校验
可利用Promise异步控制const rule1 = new Promise((resolve,reject) => { this.$refs['xuForm'].validate(valid => { if(valid){ resolve() }else{ ...原创 2020-04-15 10:11:27 · 5153 阅读 · 0 评论 -
vue按钮防止重复点击,防重复提交
注册一个全局自定义指令// 提交以后禁用按钮一段时间,防止重复提交Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-disabled'); el.disabled = true...原创 2020-04-15 09:57:48 · 3278 阅读 · 3 评论 -
总结vue项目 npm装包时-S和-D的区别
1、npm install name -save 简写(npm install name -S) 自动把模块和版本号添加到dependencies。-S后,安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。2、npm install name --save-dev 简写(npm install name -D) 自动把模块和版本号添...原创 2019-12-04 15:32:08 · 1543 阅读 · 0 评论 -
[转]Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/77575077Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我...转载 2018-10-12 09:05:35 · 281 阅读 · 0 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
原 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目 2017年08月25日 17:49:49 FungLeo 阅读数:33729 <span ...转载 2018-10-12 09:28:02 · 199 阅读 · 0 评论 -
前端 -- webpack 详解
随着前端的不断发展,现代前端开发的复杂度和规模越来越庞大。工程化的思想催生了很多流行框架的进程,作为现在最流行的前端构建工具--webpack。1. 对webpack的了解官方文档本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),将项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有...转载 2019-03-31 12:53:00 · 634 阅读 · 0 评论 -
vue +ele表格获取数据加分页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha...转载 2019-04-11 19:21:48 · 926 阅读 · 0 评论 -
VUE 实现tab切换效果
一:vue登录tab切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul li { list-style: none...原创 2019-04-03 18:23:29 · 505 阅读 · 0 评论 -
echarts使用问题:echarts的图表自适应resize问题
最近需要在vue中用echarts弹窗展示表格数据,ele弹窗可自适应,但echarts会随着滚动而变乱,看文档找方法,发现:echart图表本身是提供了一个resize的函数的。于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。单个图表,用window.onresize = myChart.resize; 可以完成自适应,就是把...原创 2019-04-17 14:37:51 · 2395 阅读 · 0 评论 -
vue中使用normalize.css样式重置
Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案(https://necolas.github.io/normalize.css/7.0.0/normalize.css)创造normalize.css有下面这几个目的:保...原创 2019-10-08 15:48:43 · 3334 阅读 · 0 评论 -
怎么理解VUE,VUE的数据驱动原理是什么,解释MVVM框架
一:Vue是什么,怎么理解VueVue是一个基于MVVM模式数据驱动页面的框架,它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点:(1)简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化vue靠数据驱动双向绑定使我们开发页面更简单,开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定,底层是通...原创 2018-01-30 18:06:55 · 14350 阅读 · 3 评论