Vue
文章平均质量分 72
vue笔记
jcat_李小黑
下凡渡劫中~~~坐标北京,有合适工作可推~
展开
-
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs1. 打印插件属性方法 定义-print.js// 打印类属性、方法定义/* eslint-disable */const Print =function(dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ '转载 2021-09-06 14:20:09 · 972 阅读 · 1 评论 -
vue2/vue3使用tinymce封装富文本
tinymce官网:http://tinymce.ax-z.cn/vue2语法前期准备npm/cnpm/yarn install tinymce vue @tinymce/tinymce-vue -S{ "@tinymce/tinymce-vue": "^3.0.1", "tinymce": "^5.8.2", "vue": "2.6.10",}配置页面 - 项目public公共部分存放tinymce的中英翻译,皮肤等静态资源;从node_model中直接赋值到项目中原创 2021-08-31 15:27:58 · 1616 阅读 · 7 评论 -
Vue3.0里为什么要用 Proxy API 替代 defineProperty API 原因?
原理Object.defineProperty只能遍历对象属性进行劫持;Proxy直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的;Proxy可以直接监听数组的变化(push、shift、splice);Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等,这是Object.defineProperty不具备的;Proxy 不兼容IE,也没有 polyfill, defineProperty 能支持到IE9;因为原创 2021-08-30 17:19:16 · 457 阅读 · 0 评论 -
vue3语法封装element中的upload上传组件
vue3语法1.1 upload组件<!-- * @Author: lijie * @Date: 2021-06-10 16:21:09 * @LastEditTime: 2021-06-22 16:56:54 * @LastEditors: lijie * @Description: 上传 组件 * @FilePath: \code\fe-web-message\src\components\Upload\index.vue--><template> <原创 2021-06-22 17:00:41 · 5073 阅读 · 1 评论 -
vue3.0中如何使用router路由、vuex、element-plus
前言vue3 已经出来大半年了,之前一直没有项目可以实际上手使用,这次刚好有机会,并且 vue3 已经可以和 element-plus 配合起来稳定开发了!那么就来一起用用 vue3(这篇对比 vue2 主讲如何使用,之后再探究原理),其实说 vue3 最好的教程就是vue3 官网,官网写的很好,都可以照着官网和现成的案例直接学习!当然,在 vue3 中也可以书写 vue2 的语法,我不想写成完全的初级教程,所以会选择性的写我认为重要的,很基础的东西大家有需要可以评论留言~正文这里使用 vue3 +原创 2021-06-01 15:50:19 · 3297 阅读 · 0 评论 -
vue2中使用路由跳转打开新页面
使用路由导航 toSeeInfo(row) { const { href } = this.$router.resolve({ name: "Info", query: { id: row.id, }, }); window.open(href, "_blank"); },<vue-link>标签<router-link target="_blank" :to="{原创 2021-05-18 13:43:49 · 1245 阅读 · 0 评论 -
vuecil3+版本下如何兼容谷歌ie等不支持es6的低版本浏览器
前言在之前的文章中介绍了如何升级vue老项目到最新版本,不可避免的要面临一个困扰前端开发一生的问题:vuecil4版本下如何兼容谷歌ie等不支持es6的低版本浏览器!新版本更替,网上很多关于兼容性的文章都是vuecil2时的版本时效性都太差了,只能参考,而且很多文件都没有思考啊,只是单纯的把所有兼容性方法都写了一个遍,造成代码冗余和我强迫症。。。这里讲一下vuecil3+关于兼容性有针对性的、亲测的解决办法!看完这一篇,希望能解决大家关于兼容性问题的疑问。废话不多说,开始吧~正文vue cil官原创 2020-07-21 17:42:00 · 5906 阅读 · 4 评论 -
vue项目升级(02):vue项目中的旧版本npm包怎么持续升级维护
vue项目升级(02):vue项目中的旧版本 npm包怎么持续升级维护前言话说身为一个站在巨人的肩膀上的API工程师,在日常开发中,肯定会使用很多插件,如果你当前项目的插件已经落后新版很多代了,怎么办?之前介绍了vuecil3的语法和配置,而我的项目升级是直接替换了整个src文件夹来完成的,但是那我们插件包怎么升级?那这篇来介绍vue项目中的npm包怎么持续的升级维护一、替换package.json升级过程后,将旧版本的packag.json文件中的npm包相关代码复制到新版本;cnpm in原创 2020-07-08 15:27:11 · 4213 阅读 · 2 评论 -
vue项目升级(01):全面解析vuecil3/vuecil4的vue.config.js等常用配置
前言前端变化日新月异,层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用过程中很多东西都不能实现,所以升级真的是迫在眉睫;此篇会逐步解析:vuecil2如何升级到vuecil3+vuecil3+的语法二次升级维护手册webpack配置项目的优化…一、vuecil2如何升级到vuecil3+卸载旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/原创 2020-06-15 15:29:47 · 6549 阅读 · 15 评论 -
vue+element项目全局注册el-pagination分页组件和el-upload上传组件并使用
为什么我要写这个博客?因为记录一下平时怎么偷懒写代码~~不然怕忘了;其实主要为了记录全局注册组件的方法,在项目中就不用单页面调用了,需要的地方直接用,整理了一下vue+element中常用的分页组件封装和上传组件封装;原创 2020-05-13 17:44:32 · 1517 阅读 · 2 评论 -
vue项目中实现前台导出和后台导出Excel或其他类型文件的方法合集
前言此篇记录一下导出功能,分为后端导出和前端导出;网上都有很多方法了,特记录一下,方便之后查阅;正文一、后台导出后端导出指的是,后端已经封装好二进制流,前端只需要做的就是请求接口和下载;在写其他代码之前一定测试接口是否正常;例如接口:http://197.23.46.97:8088/exprotExcel,参数:type:'exprot',name:'excel002',get请求,正常流在浏览器中直接访问接口路径http://197.23.46.97:8088/exprotExcel?typ原创 2020-05-13 09:34:36 · 4773 阅读 · 4 评论 -
VueCil代理本地proxytable无效报错404的解决方案
前言因为项目中遇到了这个bug:Vue代理本地proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人;正文1. 为什么要使用代理?代理的作用是:把请求代理转发到其他服务器的中间件;例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请...原创 2020-04-29 18:02:32 · 9647 阅读 · 8 评论 -
基于Vue的单页面格式化数据高亮编辑器组件:兼容json/xml/html/txt多种格式
前言项目中遇到这样的需求:vue项目中格式化XML,JSON等数据并高亮显示并支持修改保存;我在网上没有找到特别合适的插件,所以在前人的基础上开发一下,完成这个功能并封装为单页面组件;正文1. 介绍项目是基于ACE高亮编辑器和vkbeautify格式化显示基础上开发的;因为懒得写样式,所以使用到了element(愿意写样式的就不用下了);其中复制功能使用到了vue-clipboard2...原创 2020-04-01 13:23:46 · 4669 阅读 · 9 评论 -
分析理解 vue2.x和3.0的响应式系统的异同
我原创 2019-10-14 14:29:56 · 265 阅读 · 0 评论 -
vue-cli项目全局使用和配置vuex
vuex前言vuex是什么?官网解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。正文vuex官方文档:https://vuex.vuejs.org/zh/ 具...原创 2019-03-01 18:11:27 · 2204 阅读 · 0 评论 -
vue-router和element组件动态面包屑导航
vue-cli项目中—根据路由变换的动态面包屑导航1、在src文件夹下的router/index.js中配置路由配置对应的路由import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/',...原创 2019-02-28 16:18:34 · 6762 阅读 · 1 评论 -
vue中的动画相关知识
Vue中的动画为什么要有动画:动画能够增加页面趣味性,目的是为了让用户更好的理解页面的功能;Vue中的动画,都是简单的过渡动画,并不会有 CSS3 那么炫酷;Vue中动画的基本介绍每个都动画分为两部分:入场动画:从不可见(flag = false) -&gt; 可见(flag = true)出场动画:可见(flag = true) -&gt; 不可见(flag = false...原创 2018-10-20 14:11:51 · 223 阅读 · 0 评论 -
vue中如何复制文字内容到剪切板
插件:vue-clipboard2使用:npm install --save vue-clipboard2在main.js中导入import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)在vue中正式使用<template> <div&...原创 2019-04-28 15:19:34 · 4981 阅读 · 0 评论 -
vue2.x组件间传值及在vue子组件中操作父组件数据时生命周期的问题
前言在做项目中遇见一个bug, vue在子组件内部操作父组件数据时,在生命周期mounted和created中给页面渲染父组件的值页面渲染是正常的,但是控制台会报错找不到值! 此文记录下vue组件之间如何传值取值,和bug的解决方法。正文父组件给子组件传值—props 实现父组件向子组件传值。父组件内:msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样<child...原创 2019-07-26 16:07:01 · 2131 阅读 · 1 评论 -
解决element的表单校验输入框有值但校验未通过的问题
实际项目中,为了精简代码,会涉及到在同一个表单中同时完成 查看编辑 新增等功能,此篇解决:1. 编辑的时候,明明给页面回显赋值了,但是校验非空却没有通过的问题。2. 表单刚一进页面就校验非空,显示红色提示的问题。3.常规表单关于校验的规则。原创 2019-07-26 17:32:19 · 45655 阅读 · 17 评论 -
vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程
vue项目的前期配置封装axios实例封装API原创 2019-09-03 11:26:06 · 100528 阅读 · 189 评论 -
vue-cli配置安装步骤
安装nodevue-cli 全局安装命令行执行 : npm install -g vue-cli执行命令: vue init webpack demo(你新建的项目名称/文件名称)执行之后将会 自动初始化一个文件夹 :demo手动打开demo文件夹可以看到已经初始化好了 一个基本的项目启动项目执行初始化项目以后,下面会有对应的命令:继续执行: cd demo (这是进入到demo...原创 2019-06-14 15:57:02 · 226 阅读 · 0 评论