vue
橙可爱
可爱多
展开
-
命令行删除node_modules
1、安装npm包–rimraf,一个工具包。2,选择需要删除的项目 执行以下命令行。原创 2023-03-09 18:16:57 · 663 阅读 · 0 评论 -
vue前端实现的假分页
当接口速度快,响应数据量大的情况下 页面还未渲染完成时,可能会造成短暂的卡顿,所以做下前端假分页 优化下性能。html部分,和平常写法一样的。原创 2023-03-09 18:09:25 · 142 阅读 · 0 评论 -
虚拟DOM
因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。简言之,浏览器对HTML的理解是DOM树,Vue对HTML的理解是虚拟DOM,最后在patch阶段通过DOM操作的api将其渲染成真实的DOM节点。原创 2023-01-28 18:00:35 · 66 阅读 · 0 评论 -
ElementUI +vue 在输入框中按回车键会刷新页面
【代码】ElementUI +vue 在输入框中按回车键会刷新页面。原创 2022-09-25 17:20:40 · 370 阅读 · 0 评论 -
Element 中图片预览后如何快速关闭
Element 中的图片有预览大图的功能,但是预览完毕后只能点击右上角的关闭图标才能关闭,有点不方便。原创 2022-09-20 14:07:59 · 645 阅读 · 0 评论 -
Vue props传递的类型和写法
1、props常用属性。2、props的语法。原创 2022-08-18 11:27:07 · 2706 阅读 · 0 评论 -
vue里面watch监听当前路由信息
vue里面watch监听当前路由信息开发中有这么个小需求,就是重复路由不触发生命周期监听路由触发初始化方法或者是监听路由变化 做出后续处理原创 2022-07-14 18:30:00 · 2827 阅读 · 0 评论 -
前端导出pdf文档-jspdf用法
导出pdf原创 2022-06-08 14:09:54 · 1409 阅读 · 0 评论 -
Vue项目中props传值、data数据初始化、watch(immediate: true)和常用钩子之间先后关系
先后顺序是:beforeCreate > props > data初始化 > watch > created > beforeMount > mounted原创 2022-01-19 15:36:39 · 824 阅读 · 0 评论 -
如何优雅的改造if/else
使用if/else的代码方式编写function fileterNum(num1,num2,action) { if (action === 'add') { return num1 + num2 }else if (action === 'edit') { return num1 - num2 }else if(action === 'delete') { return num1 * num2 }else if (acti原创 2022-01-18 11:04:01 · 393 阅读 · 0 评论 -
解决:vue文本识别 “ \n ” 的换行问题
如何让 \n 页面中显示为换行效果?1:通过 css属性实现white-space: pre-wrap;2:使用v-html+正则实现this.text = res.data.replace(/\\n/g, '<br>')// HTML部分<div v-html="text"></div>原创 2021-12-29 09:13:03 · 1801 阅读 · 0 评论 -
.sync修饰符 简写组件传值
父组件 <myComponent :show.sync='valueChild'></myComponent>子组件在需要传值的地方改写closeDiv() { this.$emit('update:show',false); //触发 input 事件,并传入新值 }原创 2021-11-20 15:31:00 · 442 阅读 · 0 评论 -
Vue父组件直接给孙子组件传值 provide和inject 注入
通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。对于这种情况,我们可以使用一对 provide 和 inject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。场景:只能父组件给子组件传值,不能传回原创 2021-10-29 16:49:24 · 1140 阅读 · 1 评论 -
vue自定义指令
<template> <div class="hello"> <div v-test='name'></div> </div></template><script>export default { data () { return { name:'我是名字', } }, directives:{ test:{ inserted: function (e原创 2021-10-25 15:02:30 · 58 阅读 · 0 评论 -
vue中class和style动态绑定
一:class对象语法:<div class="static" :class="{active:isactive,search:isSearch}"></div>data:{ isactive:ture, isSearch:false}结果div标签的class的样式就是<div class="static active"></div>如果动态绑定的class太多,也可以用对象的形式<div v-bind:class="c原创 2021-02-20 10:29:23 · 294 阅读 · 0 评论 -
vue不同组件之间接口先后调用的顺序
组件与组件之间需要共享数据页面加载后获取接口A,然后获取接口B通过A接口获取uid,uid为接口B的参数A和B在vue不同的组件里,这就涉及到接口返回的一个时间差假如A接口在A组件内,B接口在B组件内。解决方案:A组件请求A接口后存放在vuexstate: { uid:null}B组件内通过computed进行实时计算监听computed: { uid() { return this.$store.state.uid; }}然后,通过watch监听uid,监听原创 2021-02-04 10:25:35 · 3148 阅读 · 0 评论 -
VUE中不能使用箭头函数的地方
1.不应该使用箭头函数来定义一个生命周期方法2.不应该使用箭头函数来定义 method 函数3.不应该使用箭头函数来定义计算属性函数4.不应该对 data 属性使用箭头函数5.不应该使用箭头函数来定义 watcher 函数原因:箭头函数绑定了父级作用域的上下文,this 将不会按照期望指向 Vue 实例。也就是说,你不能使用this来访问你组件中的data数据以及method方法了。this将会指向undefined。...原创 2020-12-23 21:12:27 · 623 阅读 · 1 评论 -
Vue项目打包时去除console、debugger
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true,//移除debugger // drop_console: false,//移除console } }, sourceMap: config.build.productionSourceMap, parallel: true})原创 2020-12-10 18:01:03 · 1311 阅读 · 0 评论 -
vue封装公用的方法集合
//判断设备是移动端还是pc端 export function isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ret...原创 2020-08-07 16:01:22 · 820 阅读 · 0 评论 -
vue项目过大,编译速度慢的,下载dynamic-import-node插件
因公司项目内容过多,编译速度极慢,在网上搜集的插件下载插件 npm install babel-plugin-dynamic-import-node公司项目脚手架为vue-cli2.0所以在.babelrc文件里添加配置dynamic-import-node注:公司项目脚手架为vue-cli3.0,需要在babel.config.js文件里修改转载自:https://juejin.im/post/6844904098072887309...原创 2020-08-07 13:39:49 · 6001 阅读 · 1 评论 -
前端导出下载文件(POST方法)
一般选用post方法全局封装导出export function exportLists(res, filename) { const blob = new Blob([res]); const elink = document.createElement('a'); elink.download = filename; elink.style.display = 'none'; elink.href = URL.createObjectURL(blob);原创 2020-08-01 16:04:02 · 1302 阅读 · 0 评论 -
Vue 中不推荐用 index 作为 key
1,用组件唯一的 id(一般由后端返回)作为它的 key,实在没有的情况下,可以在获取到列表的时候通过某种规则为它们创建一个 key,并保证这个 key 在组件整个生命周期中都保持稳定。,2,别用 index 作为 key,和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 0, 1, 2 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作。3,千万别用随机数作为 ...翻译 2020-04-14 15:55:58 · 649 阅读 · 0 评论 -
页面中定义一个定时器,在哪个阶段清除
在 beforeDestroy 中销毁定时器① 为什么销毁它:在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。② 解决方案 1:mounted(){ this.timer = setInterval(()=>{ console.log(1) },1000)},beforeDestr...原创 2020-04-07 16:28:27 · 1114 阅读 · 0 评论 -
vue项目的hash模式和history模式
默认是hash模式,1,hash模式是带#的,显示在地址栏,相对于用户来说,有些丑, 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。因为对于正常的页面来说,更换url一定是会导致页面的更换的, 而只有更换url中的查询字符串和hash值得时候才不会重新加载页面。2,没有#了,可以像使用正常的url进行访问,需要后台配置支持,如果后台没有正确的配...原创 2020-04-02 10:16:31 · 1020 阅读 · 0 评论 -
vue的mixin的使用
对一个项目中很多会重复使用到的函数我们可以使用到vue的mixin(混入),这样就不需要在多个页面中重复的书写相同的代码1.定义一个mixin// mixin.jsconst mixin = { data() { return { hello: 'hello Mixin' } }, created() { console.log('在mixin...原创 2019-11-30 10:38:13 · 216 阅读 · 0 评论 -
在vue中使用公共过滤器filter的方法和vue 定义filter局部的两种方法
平时我们在vue中使用过滤器时,在模板中定义的过滤器不能在其他模板中使用,所以要在每个模板中定义自己的filter,这样就会出现很多重复的代码,那有没有办法定义一个公用的filter,减少代码的重复呢?下面就给大家展示下使用最多且有效的方法吧!•首先在公用js中定义一个通用的filter.js,如下图所示,记得一定要把代码整个export出来const vFilter={ numFilt...原创 2019-11-30 10:05:41 · 460 阅读 · 0 评论 -
使用axios的post方式传参遇到的坑(@RequestParam和@RequestBody的区别)
发现Form Data成为了这样的格式,把传入的参数都当成了{param:‘11’}找到的解决方法是导入qs库(qs库已经包含在axios中,不需要重新安装),把封装的post方法里面的“ JSON.stringify(data)”改成 qs.stringify(data) 即可总结因为这里我用axios处理的 contentType 为 application/x-www-form-u...原创 2019-11-26 13:40:55 · 3182 阅读 · 0 评论 -
vue中v-if和v-for指令最好不要同时使用的解决方法
建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。 <li class="fr ac" v-for="(i,index) in goodsDetails.goodsSubBeans" :key="index" > <...原创 2019-11-26 13:22:47 · 447 阅读 · 0 评论 -
如何$emit传递多个参数
在子组件ceshi(index,id){this.$emit('ceshi',index,id)}在父组件接受<child@ceshi=‘ceshiFunc(arguments)’metheds:{ceshiFunc(e){conslole.log(e[0]) //输出子组件index的值conslole.log(e[1]) //输出子组件id的值}><...原创 2019-11-21 16:35:48 · 14845 阅读 · 2 评论 -
Vue 全家桶介绍
Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https://github.com/pagekit/vue-resource)。再加上构建工具vue-cli,sass样式,就是一个完整的vue项目的核心构成。axios概括起来就是:、1.项目构建工具、2....原创 2019-11-16 10:17:37 · 221 阅读 · 0 评论 -
vue2.0生成二维码图片并且下载图片到本地
插件有很多方式,第一种用的qrcodejs2第一步,安装依赖cnpm install --save qrcodejs2第二步,在页面中使用<template> <div> <div @click="getQrcode">点击生成二维码</div>//生成二维码 <div id="qrcode"></di...原创 2019-11-13 15:26:12 · 1534 阅读 · 1 评论 -
vue实现点击图片查看图片
使用vue一个组件vue-directive-image-previewer安装依赖npm install vue-directive-image-previewer -D在main.js全局导入使用import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-im...原创 2019-11-08 20:12:13 · 5234 阅读 · 3 评论 -
package.json配置简介
我们先看一个常用的例子{ "name": "buyer_wxs", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --mode test", "build:test": "...原创 2019-11-08 10:49:02 · 594 阅读 · 0 评论 -
vue常见的命令行
一,新建一个脚手架vue-cli2.0项目vue init webpack 项目名称cd 项目名称npm run dev二,新建一个脚手架vue-cli3.0项目vue create 项目名称![在这里插入图片描述](https://img-blog.csdnimg.cn/2019110608594564.png)...原创 2019-11-06 09:00:15 · 484 阅读 · 0 评论 -
MD5加密使用在登录接口
需要安装npm install crypto --save在需要的文件引入import crypto from 'crypto'对密码使用这个方法getMd5 : function(psw){ let md5 = crypto.createHash("md5"); md5.update(psw); let password = md5.digest('hex'); ...原创 2019-10-31 19:10:18 · 523 阅读 · 0 评论 -
vue+elementUI表格导出excel
先安装依赖npm install --save xlsx file-saver2.在需要的组件内引入import FileSaver from "file-saver";import XLSX from "xlsx";vue示例<template> <div> <!-- 导出按钮 --> <div c...原创 2019-09-29 13:58:14 · 844 阅读 · 0 评论 -
关于props实现双向绑定
首先我们学过props知道,这是父组件传给子组件的一个属性,只能单向的父组件传给子组件,而不能够子组件改变父组件的值。下面我们将会实现props双向绑定的功能。父组件pare.vue<template> <div class> <child :a="msg" @get="post"></child> <...原创 2019-09-17 15:58:04 · 959 阅读 · 0 评论 -
Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
问题:使用this.$ref[‘form’] .resetFields()无法重置表单项原因:1.没有给表单添加ref属性<el-form ref="form"></el-form>2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致<el-form ref="form" :model="sizeForm"...原创 2019-10-11 19:56:30 · 3058 阅读 · 1 评论 -
Vue项目图片剪切上传——vue-cropper的使用
安装vue-croppernpm install vue-cropper --save-devmain.js里面使用import VueCropper from 'vue-cropper' Vue.use(VueCropper)新建一个test.vue文件该文件只做用来演示剪切上传图片的功能,下面直接贴出代码test.vue:<template> <div...原创 2019-09-19 14:15:11 · 988 阅读 · 2 评论 -
vue的SEO优化
安装插件npm install vue-meta-info --savenpm install prerender-spa-plugin --save-dev使用方法vue-meta-infomain.js文件中全局导入并使用import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)有路由的组件中export defaul...原创 2019-09-19 13:54:47 · 108 阅读 · 0 评论