分类：Vue

2021
01-29

vue 项目@change多个参数传值多个事件的操作

vue 项目@change多个参数传值多个事件的操作 首先是只有一个change事件changelevel()//选择值若想改变select同时改变row里的值多个事件用；分割开来此时发现changelevel()不执行那么加上（）呢changelevel(val){console.log(val)=>//undefined}表示未传参数输出undefined那么要传值传谁呢传入$event再次输出就可获取选择值补充：element-ui@change添加自定义参数element-ui的change事件默认参数是一个value值，比如下拉框的change事件默认参数是选中的value值，但是实... 继续阅读 >
2021
01-29

vue 实现click同时传入事件对象和自定义参数

vue 实现click同时传入事件对象和自定义参数 仅仅传入自定义参数HTML<divid="app"><button@click="tm(123)">ddddd</button></div>JS代码newVue({el:'#app',methods:{tm:function(e){console.log(e);}}})仅仅传入事件对象HTML<divid="app"><button@click="tm">ddddd</button></div>JS代码newVue({el:'#app',methods:{tm:function(e){console.log(e);}}})同时传入事件对象和自定义参数HTML<divid="app"><button@click="tm($event,123)">dd... 继续阅读 >
2021
01-29

聊聊vue 中的v-on参数问题

聊聊vue 中的v-on参数问题 vue中v-on:clock的使用最近在学习vue.js框架。记下其中遇到的一些问题，以便以后查阅。首先，这是一个页面(为了便于观察，将各个标签都一一着色)：其中html代码：<divclass="groupbody"><ulclass="list"><liv-for="cellintodo.groupbody"class="pagegroupcell"v-on:click="exchange($event)"><divclass="pagecelltext">{{cell.left}}</div><divclass="pagecellmin">{{cell.min}}</div>... 继续阅读 >
2021
01-29

vue集成一个支持图片缩放拖拽的富文本编辑器

需求：根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor富文本编辑器。最初使用的是vue2Editor富文本编辑器，vue2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业... 继续阅读 >
2021
01-29

vue 中this.$set 动态绑定数据的案例讲解

感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定.话不多说直接上代码：<template><div><!--单个数据--><button@click="text0a">text0</button><p>text0:{{text0}}</p><!--对象--><button@click="textObja">textObj</button><p>textObj.text1:{{textObj.text1}}</p><!--数组--><button@click="textArra">textArr</button><p>textArr[1... 继续阅读 >
2021
01-29

vue使用transition组件动画效果的实例代码

transition文档地址定义一个背景弹出层实现淡入淡出效果<template><div><button@click="show=!show">Toggle</button><transitionname="fadeBg"><divclass="bg"v-if="show">hello</div></transition></div></template><script>exportdefault{data:()=>({show:true}),};</script><stylelang="less"scoped>.fadeBg-enter-active,.fadeBg-leave-active{transition:opacity0.3sease;}... 继续阅读 >
2021
01-29

Vue ​v-model相关知识总结

​v-model是Vue的一个指令，它提供了input和form数据之间或两个组件之间的双向数据绑定。这在Vue开发中是一个简单的概念，但是v-model的真正威力需要一些时间才能理解。到本教程结束时，你将了解v-model的所有不同用例，并学习如何在自己的项目中使用它。准备好了吗?我也是。让我们编写代码。什么是v-model?正如我们刚才讨论的，v-model是一个我们可以在模板代码中使用的指令。指令是一个模板令牌，它告诉Vue我们想要... 继续阅读 >
2021
01-29

Vue 数据响应式相关总结

在说数据响应式之前，我们要解决一个很重要的问题，那就是Vue到底对data做了什么？先从getter和setter说起，我们用那个他们来对虚拟的属性进行读写。getter和setter有如下代码letobj0={姓:"高",名:"圆圆",age:18};//需求一，得到姓名letobj1={姓:"高",名:"圆圆",姓名(){returnthis.姓+this.名;},age:18};console.log("需求一："+obj1.姓名());//高圆圆此时我们log出来的结果是高圆圆，这个大家都能看... 继续阅读 >
2021
01-29

vue+echarts实现中国地图流动效果(步骤详解)

vue+echarts实现中国地图流动效果(步骤详解) @vue+echarts实现中国地图流动效果#话不多说看效果图操作步骤：执行命令:npmrunecharts-s并回车看到这样的提示代表安装成功PS：网络不好的情况建议用cnpm淘宝镜像（全局终端执行命令：npmi-gcnpm--registry=https://registry.npm.taobao.org）下载china.js链接:https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q提取码:gjz4引入importechartsfrom'echarts/lib/echarts';import'@/map/china.js';写一个echarts容器... 继续阅读 >
2021
01-27

vue 组件基础知识总结

组件基础1组件的复用组件是可复用的Vue实例。<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style><scriptsrc="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><divid="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script>//定义一个名为button-counter的新组件Vue.co... 继续阅读 >
2021
01-27

如何在 Vue 表单中处理图片

问题：我在Vue中有一个form表单，用于上传博客帖子，它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在Express中设置了一个API来处理这个问题。我在Postman中测试正常，但是我不知道如何通过浏览器将文件发送给数据库。我一直收到500错误，并且我将数据打印到控制台，而图片字段为空，所以我确信这就是问题所在，但我就是搞不清楚怎么办。这是我前端页面的form表单:<template><divclass="conta... 继续阅读 >
2021
01-27

Vue实现摇一摇功能(兼容ios13.3以上)

Vue实现摇一摇功能(兼容ios13.3以上) 最近做了个摇一摇类似的功能，使用的是shake.js，但在ios13.3之前的版本中可以触发摇一摇，之后的版本需要兼容，需要制作一个让用户能手动点击的弹框，才能使用户授权动作与方向的权限。（需使用https协议）<van-popupv-model="isTip"class="popInfo":close-on-click-overlay="false"><divclass="mainBody"><h3class="systemTip">温馨提示</h3><divclass="confirm">由于ios系统需要手动获取访问动作与方向的权限，为保障... 继续阅读 >
2021
01-26

Vue中的nextTick作用和几个简单的使用场景

目的理解下nextTick的作用和几个简单的使用场景正文起什么作用？在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。我想各位都知道或了解Vue的渲染流程，Vue在监听到数据变化后会重新渲染，配合VDOM更新真实的DOM，而nextTick的触发时机就是在调用方法后的第一次重新渲染完毕后。如何使用？有两种使用方法，一种是传入回调，另一种是Promise，官方使用示例如下：//修改数... 继续阅读 >
2021
01-26

Vue使用Ref跨层级获取组件的步骤

Vue使用Ref跨层级获取组件实例示例介绍在开发过程中，我们难免会使用到跨层级的ref实例获取，大部分情况下，我们都可以通过组件自身的parent或者children去找到需要的实例。但是当层级不明显或者太深的时候，用此方法难免过于臃肿和低效率。如下图所示，我们通过组件E去获取组件D的组件实例。文档目录结构分别有A、B、C、D、E和index六个组件，并按照上图的组件顺序，分别插入到各自的页面中。页面样式如下：安装vue-ref下载vue-re... 继续阅读 >
2021
01-26

如何在Vue项目中添加接口监听遮罩

一、业务背景使用遮罩层来屏蔽用户的非正常操作，是前端经常使用的方式。但是在一些项目中，并没有对遮罩层进行统一管理，这就会造成如下的问题：（1）所有的业务组件都要引入遮罩层组件，也就是每个.vue业务组件，都在template中引入了Mask组件。组件在项目的各个角落都存在，不利于管理，代码极度冗余。（2）Mask组件都分散到业务的各个角落，所以控制是否显示遮罩层的变量也散在业务组件中。比如使用maskShow来控制是否展示遮罩... 继续阅读 >