Vue
Ace.三阶斗尊
web前端全栈工程师,熟悉vue2/vue3、react/react-native、node、uniapp、nuxt、electron、python.....
斗之气,斗者,斗师,大斗师,斗灵,斗王,斗皇,斗宗,斗尊,斗圣,斗帝
展开
-
vue2/3的函数式组件
1. 函数式组件:函数组件不需要实例化,无状态,没有生命周期,所以渲染性能要好于普通组件,不需要实例化,没有this,this式通过render函数的第二个参数context来替代,所以在外部通过ref去引用组件时,实际引用的时HTMLElement。没有生命周期,也就不能使用computed,watch。不能通过$emit对外暴露事件,调用事件只能通过context.$emit.click方式调用外部传入的事件。在vue2中使用函数组件:需要指定functional:trueexport defa原创 2022-05-11 22:37:39 · 1336 阅读 · 1 评论 -
electron+vue3自定义toast提示组件
1. 创建new-toast目录。2. 创建new-toast/index.vue:<template> <div id="msg-box" v-if="visible"> <div class="msg-text">{{ msgText }}</div> </div></template><script setup lang='ts'>import { ref } from 'vue'原创 2022-04-16 16:16:24 · 1133 阅读 · 0 评论 -
vue-router报错:Avoided redundant navigation to current location
解决:修改router/index.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}..原创 2021-02-26 20:01:15 · 92 阅读 · 0 评论 -
js手写简化版的bus
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = false// 1. new Vue作为bus// const bus = new Vue()//2. 自定义封装一个bus类型class Bus{ constructor(){ this.callbac.原创 2020-10-17 17:10:31 · 460 阅读 · 0 评论 -
vue自定义右键菜单及其事件
<template> <div class="right-footer h100"> <div class="h100 flex a-center j-start flex-row"> <div class="tag" v-for="(item,index) in tagList" :key="index" @contextmenu.prevent="contextmenu(i.原创 2020-09-04 00:30:08 · 1784 阅读 · 0 评论 -
vue自定义实现iveiw的split-pane组件,实现拖拽
1. 封装split-pane.vue组件:<template> <div class="split-pane" ref='outer'> <div class="left pane" :style="leftStyle">left</div> <div class="mid pane" :style="midStyle" @mousedown="mousedown"></div> <div cl原创 2020-08-18 17:17:41 · 1673 阅读 · 0 评论 -
vue项目中常用的优秀插件库
1. vue的ui框架:pc端UI框架:iview,element-ui移动端UI框架:参考https://www.jianshu.com/p/c3c671787d1d2. vue的数字动画插件:countup.js库:npm i countupvue-animate-number库:npm ivue-animate-number,参考https://www.npmjs.com/package/animated-number-vue3. vue项目适配:即px转化为rem。参考ht..原创 2020-08-18 11:49:33 · 940 阅读 · 0 评论 -
vue cli3+搭建vue项目的后端接口返回路由权限(页面级/按钮级)
(一)页面级权限:1. 原理是基于vue-router的router.addRoutes(routes)动态路由添加。2. src/router/index.js:初始化vue-router实例,做路由拦截。import Vue from 'vue'import VueRouter from 'vue-router'import { commonRoutes } from './router'import store from '@/store/index.js'Vue.use(Vu原创 2020-08-13 16:03:15 · 2303 阅读 · 0 评论 -
vue cli3+/electron-vue项目中基于svg-sprite-loader依赖实现字体图标
1. 在开发环境安装svg-sprite-loader依赖:npm i svg-sprite-loader -D //-D开发依赖2. 在vue.config.js中配置:// vue ui 可视化界面管理配置/eslint/依赖。const path = require('path')function resolve (dir) { // 传值相对路径dir,返回绝对路径 return path.join(__dirname, dir)}module.exports =原创 2020-08-12 15:33:04 · 843 阅读 · 2 评论 -
vue封装简易版的vuex
1. 在src/a-store/index.js:import Vue from 'vue'import AStore from './store'Vue.use(AStore)export default new AStore.Store({ state: { count: '' }, mutations: { setCount (state, val = '') { state.count = val } }, actions: {原创 2020-08-11 15:23:21 · 316 阅读 · 0 评论 -
vue项目中下载存放在项目中的文件到本地
<div> <a href="1.txt" target="_blank" download="1.txt">下载实例</a></div>在基于vue cli3搭建项目的public文件下放入要下载的文件1.txt。原创 2020-08-11 10:01:23 · 5055 阅读 · 1 评论 -
vue递归实现自定义tree组件
1. 在tree/index.vue中:<template> <div> <ul> <item :model='data'></item> </ul> </div></template><script>import Item from './item'export default { components:{ ..原创 2020-08-02 22:11:09 · 753 阅读 · 0 评论 -
简单仿写element-ui的表单组件以及校验
1. 创建组件目录结构:2. 在form.vue组件中:<template> <div> <slot></slot> </div></template><script>export default { provide(){ return { form:this //祖先后代传值:祖先传值 } }, props:{ model:{原创 2020-08-02 17:07:22 · 430 阅读 · 0 评论 -
vue自定义指令实现滚动div中的元素滚动到指定位置
参考:https://blog.csdn.net/ZTJ_123/article/details/103909346。1. src/directive/scroll.js:中写入自定义指令。import Vue from 'vue'//全局自定义指令 给目标元素动画滚动到指定偏移位置 如果绑定值为true 则滚动到顶部Vue.directive('scroll-top', { /** * * @param {object} el * @param {object}转载 2020-07-17 14:45:02 · 3437 阅读 · 0 评论 -
vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配
1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。2. 下载:npm install --savepostcss-px2remnpm install --save'postcss-plugin-px2rem3. 使用:在vue.config.js中module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/onli..原创 2020-07-17 13:58:01 · 1480 阅读 · 0 评论 -
vue实现简单封装分页组件
1. new-pagination.vue文件:<template> <div class="new-pagination flex a-center j-between flex-row"> <div class="left flex a-center j-start flex-row"> <div>共 {{total}} 条</div> <div class..原创 2020-07-12 18:03:14 · 702 阅读 · 0 评论 -
vue全局引入二次封装element-ui表格组件
1. 创建一个文件夹new-table:new-table/index.vue文件。<template> <div class="new_table"> <div class="table_main"> <el-table class="table" ref="table" :data="tableDataList"原创 2020-07-12 17:57:50 · 479 阅读 · 0 评论 -
vue全局过滤器以及datef 格式化时间插件
1. src/filters/time.js文件中: 下载格式化时间库datef:npm i --save datefimport datef from 'datef'export default function (Vue) { Vue.filter('fdatetime', function (val, format) { if (!val) return '' return datef(format || 'YYYY-MM-dd HH:mm:ss', parseInt(val...原创 2020-07-10 16:06:08 · 439 阅读 · 0 评论 -
vue中的插槽slot以及插槽向外传值
1. vue 2.6.0版本之前的slot插槽: 用slot='' 替代表示对应的插槽。<!--1.插槽组件中: 匿名插槽和具名插槽--><div> <slot></slot> <slot name='content'></slot></div><!--2. 使用插槽组件:--><child> <div></div> <di原创 2020-06-30 23:41:52 · 6681 阅读 · 0 评论 -
vue的路由管理包括路由取别名,页面懒加载,重定向,动态路由传参,嵌套路由,命名试图,404页面
1. router/index.js:实例化路由。import Vue from 'vue'import VueRouter from 'vue-router'import routes from './router'Vue.use(VueRouter)const router = new VueRouter({ routes})export default router2. router/router.js:路由配置管理。import Home from './vi原创 2020-06-27 17:22:20 · 450 阅读 · 1 评论 -
vue的动态组件component
1. 使用:如用于动态绑定表单组件。<component :is="item.type" v-model='item.value'> <component :is="item.type" v-model='item.value' v-if="(tag,i) in item.children" v-if='item.children' is="tag.type" v-model='item.value' :key="`${_uid}_${index}`"> <.原创 2020-06-25 12:40:22 · 1098 阅读 · 0 评论 -
vue项目大量数据渲染页面优化---vue-virtual-scroll-list插件
0. git库:https://www.npmjs.com/package/vue-virtual-scroll-list1. 下拉列表数据很多时的优化渲染:引入vue-virtual-scroll-list插件。通过每次只渲染指定条数,比如6条,即使下拉列表中有上千条数据,也能很每次只渲染6条,从而减少渲染,优化页面。 1.1 下载:npm install --savevue-virtual-scroll-list。 1.2 使用:iview的下拉/多选框组件的中大量数据...原创 2020-06-25 12:14:05 · 7348 阅读 · 0 评论 -
vue页面跳转,以及携带参数,获取参数
js操作路由(即编程式的导航)进行页面跳转: 1. 返回/前进一页:返回:this.$router.go(-1)、this.$router.back()。前进:this.$router.go(1) 2. 跳转到其他页: //params只能用name来引入路由,类似于post,在浏览器地址栏中不显示参数,//而query 要用path引入,似于我们ajax中get传参,在浏览器地址栏中显示参数this.$router.push("/parent")thi...原创 2020-06-25 11:09:09 · 3119 阅读 · 0 评论 -
vue cli3+ 搭建的vue项目中的vue.config.js相关简单配置
1. vue cli官网:https://cli.vuejs.org/zh/2. vue.config.js:如果没有,就在根目录下创建一个vue.config.js文件。const path = require('path')const resolve = dir => path.join(__dirname,dir)module.exports={ baseUrl:process.env.NODE_ENV ==='procution'?'/static-prd':'/',原创 2020-06-25 11:01:37 · 459 阅读 · 0 评论 -
vue中使用mock
1. 开发者模式下下载mockjs:npm install mockjs -D。mock拦截axios请求,响应自定义数据。2. 在mock/index.js文件下:import Mock from 'mockjs'Mock.mock(/user\.json/, { 'list|1-10': [{ 'id|+1': 1, 'email': '@EMAIL' }]})export default Mock3. 在axios请求mock数据:axios..原创 2020-06-25 10:35:08 · 128 阅读 · 0 评论 -
vue cli3+搭建项目的相关配置-----之.editorconfig文件配置
1..editorconfig文件配置官网:https://editorconfig.org/。2..editorconfig配置说明:# 告诉EditorConfig插件,这是根文件,不用继续往上查找root = true# 匹配全部文件[*]# 设置字符集charset = utf-8# 缩进风格,可选"space"、"tab"indent_style = tab # 缩进的空格数indent_size = 4# 结尾换行符,可选"lf"、"cr"、"crlf..原创 2020-06-23 18:10:05 · 2256 阅读 · 0 评论 -
render函数的渲染
1. 官网:https://cn.vuejs.org/v2/guide/render-function.html。2. render使用:render:h=>{ return h(a,b,c) //a为标签字符串或引入的组件名(如'div'/ mySwiper),b为对象,表示该标签的属性,可以不写该参数,c为字符串或者数组子元素(内容或者子标签)。}//1. 使用方法1render:h=>{ return h(mySwiper,{ 'cla原创 2020-06-10 08:48:01 · 1036 阅读 · 0 评论 -
vue通过h5拖拽实现假拖拽效果
1. h5的拖拽浏览器的支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。在 Safari 5.1.2 中不支持拖放。1. 设置标签可以拖拽属性:draggable="true"<div draggable="true" ></div>2. 拖拽顺序:3.在拖拽事件中遇到目标元素ondrop事件没有效果,需要在目标元素上写ondragover事件,阻止ondragover的默认行为..原创 2020-06-04 20:26:55 · 667 阅读 · 1 评论 -
vue实现可以滑动的轮播图
<template> <div class="my-swiper wh" ref="mySwiper"> <ul class="my-swiper-wrap" :style="{width:classobj,transform: translateXVal}" v-if="isShow" @mouseenter="enter" @mouseleave="leave" @mousedown="mousedown($event).原创 2020-06-03 15:56:34 · 2859 阅读 · 0 评论 -
element-ui的表单重置方法resetFields()的坑,及简单解决
<el-form :model='form' ref='formDom'></el-form>add(){ this.form={} //先复制为{} this.$nextTick(()=>{ this.$refs.formDom.resetFields() //在调用resetFields方法 })}参考:https://blog.csdn.net/nidunlove/article/details/100975379...转载 2020-05-23 18:35:36 · 1148 阅读 · 0 评论 -
关闭 Windows 平台 Google Chrome 浏览器的跨域警告- axios请求 前端跨域
1. 在电脑上任意位置新建一个目录,例如:C:\MyChromeDevUserData2. 在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData,–user-data-dir 的值就是刚才新建的目录地址。3. 重启浏览器即可:...转载 2020-05-20 12:42:49 · 614 阅读 · 0 评论 -
Vue.Draggable 实现vue拖动组件
参考:https://blog.csdn.net/zjiang1994/article/details/79809687。转载 2020-05-15 09:21:48 · 762 阅读 · 0 评论 -
自定义title属性
1. 通过封装组件<Tip/>,两层标签去实现。其中white-space: nowrap;是不换行。content: attr(titleInfo)是鼠标移入的文本内容。<template> <div class='tip title-info' :titleInfo='text'> <div class="nowrap">{{text}}</div> </div></template..原创 2020-05-15 09:16:53 · 1122 阅读 · 0 评论 -
vue clic3.0+下根据启动/打包指令不同 请求的后端地址不同
1. 创建prod.env.js:'use strict'const URL = require('./request.json');const target = process.env.NODE_ENVlet obj = {}console.log("target:",process.env.NODE_ENV)if(target === 'dev') { obj = { NODE_ENV: '"development"', _BASEURL: `'${URL.dev.baseU原创 2020-05-09 12:27:07 · 288 阅读 · 0 评论 -
!!判断一个对象的属性是否存在
在vue实际项目中,时长需要根据一个属性值是否存在,去渲染组件/标签:var person={ name:"Ace", age:18, source:{ job:"IT" }}<div v-if="!!person.source.job">{{person.source.job}}</div>...原创 2020-01-22 11:12:21 · 1675 阅读 · 0 评论 -
数据劫持实现mvvm(简单模拟vue实现数据驱动视图/以及双向绑定)
1. 新建一个index.html文件:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v...原创 2020-01-15 11:14:15 · 1084 阅读 · 0 评论 -
数据劫持实现mvvm(简单模拟vue实现数据驱动视图/以及双向绑定)
1. 新建一个index.html文件:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v...原创 2020-01-25 20:59:30 · 632 阅读 · 0 评论 -
vue中的v-html,v-text,{{}}三种渲染模板
1. v-html:存在安全性问题。<input v-model='password' id='password' text='password' placeholder='这是输入的密码'/><div>请输入富文本内容:</div><div v-html='msg'></div><!--当用户输入:`<img...原创 2020-01-14 16:57:14 · 2615 阅读 · 0 评论 -
Vue实战项目中的一些技巧
1.vue-cli3+搭建vue项目:https://blog.csdn.net/qq_42231156/article/details/82949962。2. 如果vue-cli3+没有创建vue.config.js文件,就在项目根目录下创建一个vue.config.js:const path=require('path')const bodyParser=require('bod...原创 2020-01-14 10:52:02 · 2326 阅读 · 0 评论 -
Vue的响应式原理/数据劫持是基于Object.defineProperty实现的
1. vue的数据劫持/响应式原理:是基于Object.defineProperty实现的(IE8以下不支持Object.defineProperty),监听data里面的数据,如果data里面的数据改变,就触发视图改变(重新渲染)。let options={ data:{ name:"Ace", age:18 }, render(){...原创 2020-01-13 16:15:48 · 691 阅读 · 0 评论