vue
文章平均质量分 50
云卷云舒%
这个作者很懒,什么都没留下…
展开
-
vue中两个没有关系的页面如何通讯
A页面中的一个子组件 点击按钮跳转到B页面,B页面是在A页面窗口之上新开的窗口。B页面中是一个表单,提交后关闭B页面,同时A页面中要渲染B页面选择的数据。重写localStorage的setItem方法。,B页面监听vuex中的数据,失败。解决办法:使用原生js监听缓存。A页面mounted中监听。,window监听,失败。,依旧监听不到,失败。原创 2023-03-07 11:07:04 · 619 阅读 · 0 评论 -
基于element表格的二次封装
tableHeader数据:可以根据type类型去渲染列,formatter和render中的渲染逻辑按需修改~实现的功能:表格列渲染(formatter、render)、操作(插槽)、表格多选、筛选、排序,分页组件。原创 2022-11-11 14:46:41 · 417 阅读 · 0 评论 -
vue实时更新sessionStorage中的数据
若是将这个数量存储到vuex的话,刷新页面数据会丢失【可以使用vuex数据持久化插件解决这一问题,原理也是帮助我们存储在localStorage或者sessionStorage中】,所以我这里直接将数据存储在了sessionStorage中,但是当我修改数据时页面并没有及时更新,只有刷新页面后数据才会更新。最近在做一个需求是:页面右上角显示未读消息数量,当用户读过消息后,数量要时时更新。beforeDestroy: 在页面销毁的时候移除监听。mounted:页面创建的时候添加监听。原创 2022-09-23 11:22:52 · 2847 阅读 · 0 评论 -
Vue项目打包优化
因为项目里用的element ui的组件较多,优化前后打包体积无太大明显变化,只是减小了一点。注:(官网提供的完整组件列表缺少Scrollbar,需要手动添加)优化后打包体积大概会减小0.5M。2、按需引入element ui。...原创 2022-08-16 11:17:27 · 565 阅读 · 0 评论 -
vue element 动态生成表单
场景:表单中的项是由后端返回的,不是前端提前定义好的。需要注意的点:1、因为表单上需要绑定v-model来获取此表单项的值,但是要绑的值名称是根据后端数据来的,所以请求回来后端的数据后再渲染整个表单,否则会报错【v-if="configLabelData"】,根据请求到的后端数据动态创建form中的属性2、渲染多个checkbox或者radio时,label绑定值,{{}}中渲染名称,这样v-model拿到的数据可以直接传到后端3、对动态生成的表单做校验,提前定义好各种数据类型的校验规则:在da原创 2022-06-27 15:28:58 · 3756 阅读 · 6 评论 -
vuex中使用vuex-persistedstate插件实现数据持久化
vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。那么我们可以采用存储到localStorage的方式来解决这一问题, 也可以监听页面刷新的时候重新处理数据 也可以用现在比较流行的插件vuex-persistedstate来解决让我们来看下使用插件是如何做到持久化的1.安装插件npm i vuex-persist原创 2022-05-18 14:47:53 · 1821 阅读 · 2 评论 -
Vue路由及原理
1.vue-router 有 3 种路由模式:hash、history、abstract,对应的源码如下所示:switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstrac原创 2021-12-03 10:42:34 · 769 阅读 · 0 评论 -
Vue中使用总线bus
1.新建一个文件bus.jsimport Vue from 'vue'const bus = new Vue()export default bus 2..可以在main.js中引入该文件,并将其挂载到Vue函数上,这样在Vue实例或组件中不用再去重复引用busimport bus from '@/utils/bus'Vue.prototype.$bus = bus3.使用bus发送消息,进行事件触发,附加参数都会传给监听器回调this.$bus.$emit(event, [原创 2021-11-25 09:02:20 · 1939 阅读 · 0 评论 -
vue2创建项目
1.安装node(不需手动配置环境变量,会自动帮我们配置好)检查是否安装成功:node -V ,npm -V2.安装vue-cli (npm install -g vue-cli)检查是否安装成功:vue-V需要配置环境变量:在文件夹下全局搜索vue.cmd将其所在的路径添加到环境变量的PATH中我遇到的一个问题是:安装好了vue-cli,执行vue -V却报错解决办法:全局搜索PowerShell,右键管理员打开输入命令:set-ExecutionPol...原创 2021-10-18 15:40:14 · 167 阅读 · 0 评论 -
Vue filters获取data中的数据
场景:通过filters中的方法去修改data中的数据时出现报错。补充:filters中的this指的并非vue的实例,在vue的filters中使用this引用data中的数据是无法获取的。那么问题来了:如何在filtres中使用data中的方法?方法一:可以申明全局变量,改变this方法。1.在对应的组件中申明全局变量2.在beforeCreated申明周期中修改this的指向,并在filters中使用。就可以获取data中申明变量方法二:可以直接给filter传递参..原创 2021-09-06 14:39:31 · 1184 阅读 · 0 评论 -
父组件向子组件传值 / 父组件调用子组件中的方法($ref)
需求:父组件既能调用子组件中的方法,也能在调用方法的同时传递值1.首先,父组件在引用子组件时,要给子组件绑定ref来标识子组件2.接下来,在父组件methods中某个方法里通过$refs来调用子组件的方法,方法里传递参数3.接下来子组件中定义方法名来接收参数就可以使用啦...原创 2020-12-21 17:08:33 · 1436 阅读 · 0 评论 -
Vue父组件向子组件传值(props)
方法1.父组件data中定义向子组件传递的值(属性)2.子组件props中定义属性来接收【改方法也适用爷爷组件向父组件传递值,然后父组件拿到值之后向孙子组件传值】example:1.爷爷组件data中定义的属性2.爷爷组件在引用父组件时定义属性传参3.父组件props中定义属性接收爷爷组件传递过来的值4.父组件在引用孙子组件时传参5.孙子组件中使用props定义属性来接收父组件传递过来的值‘6.孙子组件就可以使用爷爷组件传递过来的值辣...原创 2020-12-21 17:00:38 · 269 阅读 · 0 评论 -
Vue子组件向父组件传值 方法二($emit)
方法二:子组件向父组件传值 $emit1.子组件中data中的属性想要传递给父组件2.子组件methods中定义一个方法,向父组件发射一个方法,并携带参数(data中想要传递给父组件的)3.父组件引用子组件时绑定子组件发射的方法,在methods中定义一个方法拿到值example:...原创 2020-12-21 16:49:16 · 284 阅读 · 0 评论 -
Vue子组件向父组件传值方法一($emit(update: prop, “newPropVulue“) &&.sync )
子组件向父组件传值方法一:$emit(update: prop, "newPropVulue") &&.sync假如有这样一种需求:我们在子组件data中定义的属性想要传递给父组件1.首先在子组件的props中定义要传递的属性(类型要和data中的一致)2.当子组件data中的属性变化时,使用this.$emit('update:props中定义的属性',data中的值)3.父组件引用子组件时绑定属性使用.sync example:...原创 2020-12-21 16:23:03 · 1389 阅读 · 0 评论 -
Vue.js 虚拟DOM原理(DOM是如何更新的)
一、什么是DOM?DOM的作用?文档对象模型(Document Object model,简称DOM)是针对HTML和XML文档的一个API(应用程序编程接口)。也就是说:DOM是一个接口,一个API,我们可以通过DOM这个接口来对文档进行修改。DOM会把文档表示为一棵树,这里以(HTML)为例:HTML代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-09-01 11:56:55 · 4770 阅读 · 8 评论 -
Vue路由跳转的四种方式
Vue路由跳转的四种方式router-linkthis.$router.push() [ps:函数里面调用]this.$router.replace() [ps:函数里面调用]this.router.go(n) 向前或者向后跳转n个页面,n可为正整数或负整数不带参数跳转:1. router-link<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行,原创 2020-07-30 12:15:14 · 1040 阅读 · 0 评论