分类：Vue

2020
10-08

浅谈vue中$bus的使用和涉及到的问题

Hello大家周末好，最近项目比较忙所以没有及时的更新抱歉，今天给大家讲一vue.bus。使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到（每一个领域都是会有坑的呀）。1：创建$bus文件创建一个文件内容如下：importVuefrom'vue'exportdefaultnewVue();2：引入$busmain.js:importBusfrom'./views/bus/bus';Vue.prototype.$bus=Bus;//注意这里的Vue是我上面引入的vueimportVuefrom'vue... 继续阅读 >
2020
10-08

vue内置组件component--通过is属性动态渲染组件操作

vue内置组件component--通过is属性动态渲染组件操作 我就废话不多说了，大家看代码吧~<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><divid="app"><input@click="currentrouter='Home'"type="button"value="首... 继续阅读 >
2020
10-08

Vue的自定义组件不能使用click方法的解决

先贴代码varmyButton=Vue.extend({//设置标签props:['names','item2'],//names为按钮名,item2为数据template:'<span><spanv-for="objinitem2"v-if="obj.name==names"v-html="obj.code"></span></span>'})Vue.component('my-button',myButton);//注册组件这是上篇博客的自定义按钮权限的代码,然后调用代码:<my-buttonnames="修改"v-bind:item2="btdata"></my-button>当你在这个标签上加@click事件的时... 继续阅读 >
2020
10-08

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题 bus总线是vue中路由跳转传递数据的常用方法，适用于传递数据不多的情况，但是在使用的过程中发现，bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法，均没有出错，错就错在没有理解Vue的生命周期！！！我们知道bus的$on的监听应该位于$emit之前，如果在emit之前没有创建监听事件，那么肯定是得不到需要的数据。因此，我通过两个页面来了解路由跳转时两个页面的生命周期，下面给出其中一... 继续阅读 >
2020
10-08

解决vue bus.$emit触发第一次$on监听不到问题

$emit与emit与emit与$on的用法新建bus.jsimportVuefrom'vue'exportconstbus=newVue()引用bus.jsimport{bus}from'./bus'bus.$on('test',function(msg){console.log(msg)})bus.$emit('test',11)bus.$emit触发第一次emit触发第一次emit触发第一次$on监听不到因为$emit先于$on执行了，VUE并没有储存监听事件，所以无法监听到数据。我这里遇到的是在调用$emit的时候子组件并没有创建，所以无法监听到数据，子组件... 继续阅读 >
2020
10-08

vue+element-ui JYAdmin后台管理系统模板解析

项目搭建时间：2020-06-29本章节：讲述基于vue/cli，项目的基础搭建。本主题讲述了：1、跨域配置2、axios请求封装3、eslint配置4、环境dev,test，pro（开发，测试，线上），run自动调用对应的接口（proxy多代理配置）vue+element-uiJYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一个与时俱进、高效易懂、高... 继续阅读 >
2020
10-08

vue实现虚拟列表功能的代码

vue实现虚拟列表功能的代码 当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10wdom节点,是极其耗费时间的,那我的Macbookair举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data(){return{list:[],//贼大的数组li:{//列表项信息height:50,... 继续阅读 >
2020
10-08

Vue $emit()不能触发父组件方法的原因及解决

$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名如果修改后还是不行的话，就改用：this.$parent.Event(Event为父组件中的自定义方法)补充知识：Vue.js使用$emit触发事件填坑vue的组件内触发外部事件不起作用vue的组件内触发自定义事件（发外部事件）不起作用今天学习vue的自定义组件功能，在组件内部触发一个事件，在使用组件的地方使用v-on绑定这个事件，然而触发一直不生效，检查了很多遍的代码都没看出什么问... 继续阅读 >
2020
10-08

vue 遮罩层阻止默认滚动事件操作

在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。vue中提供@touchmove.prevent方法可以完美解决这个问题<divclass="dialog"@touchmove.prevent></div>如果不是使用Vue的话，可以给body添加overflow:hidden属性解决补充知识：vue项目中禁止页面滚动/滚动事件穿透(弹出蒙版时，弹出层下面还可以滚动)vue项目中弹出层时，蒙版下还可以滚动页面。移动端解决方案在蒙层所在div上加@touchmove.prevent<divclass="ma... 继续阅读 >
2020
10-08

vue中touch和click共存的解决方式

vue中touch和click共存的解决方式 在vue开发手机端项目时，我们经常会遇到touch和click共存的情况，比如城市选择页面的字母滑动touch事件在手机端会触发浏览器滑动，所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上，会影响到click事件的发生。touch事件和click事件发生先后顺序：touchstart，touchmove，touchend，click补充知识：touchstart与click同时触发产生冲突的原因我们可以给某个元素同时绑定touch... 继续阅读 >
2020
10-08

vue中echarts引入中国地图的案例

vue中echarts引入中国地图的案例 如下所示：<divid="myChartChina":style="{width:'100%',height:'500px'}"></div>mounted(){this.drawLine();},drawLine(){//基于准备好的dom，初始化echarts实例varmyChartContainer=document.getElementById('myChartChina');varresizeMyChartContainer=function(){myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小}resizeMyChartContai... 继续阅读 >
2020
10-08

vue 监听窗口变化对页面部分元素重新渲染操作

问题在处理页面重新渲染时通常的做法是：用vue-router重新路由到当前页面，页面是不进行刷新的采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好使用v-if重新渲染部分组件或容器需要重新渲染的内容<divv-if="render">...</div>vue监听窗口大小发生改变使用window.addEventListener()添加resize事件监听窗口变化newVue({el:'#app',data(){return{render:true}},mounte... 继续阅读 >
2020
10-08

Vue组件跨层级获取组件操作

Vue组件跨层级获取组件操作 this.$parent访问父实例this.$children当前实例的直接子组件。(不保证顺序,不是响应式)this.$parent.$parent.$refs.xxx跨级访问父组件this.$children.$children.$refs.xxx跨级访问子组件这种递归的方式代码繁琐性能低效ref只能获取当前组件上下文组件无法跨层级ref是字符串被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在... 继续阅读 >
2020
10-08

vue 解决兄弟组件、跨组件深层次的通信操作

vue 解决兄弟组件、跨组件深层次的通信操作 兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一,这种问题的最根本方法就是：把兄弟组件内部的变量提升到一个中央仓库。借助父级组件链式交互使子组件1通过$emit通知父级,父级再通过响应子组件1的事件去触发子组件2的事件，这样的链式操作，在子组件不多的时候，但是一个不错的解决方法子组件1<template><div><p@click="$emit('fromFirst','来自A组件')">first组件</p></div></template><script>... 继续阅读 >
2020
10-08

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件) vue中我们常常用到组件.那么组件总体可以分为如下的几种关系.父子组件,爷孙组件,兄弟组件.这几种组件之间是如何通信的呢?父子组件通信根据vue中的文档可知,组件的props属性用于接收父组件传递的信息.而子组件想要向父组件传递信息,可以使用$emit事件.我们定义两个组件,一个为父组件名为father,另外一个为子组件child.子组件通过props属性接收父组件传递的值,这个值为fname,是父组件的名字.点击子组件的按钮,触发... 继续阅读 >