分类：Vue

2021
01-14

vue 递归组件的简单使用示例

前言递归相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归相加，直到满足目标数条件。递归虽然能解决大部分，但弊处在于，很容易写出死循环的代码，导致爆栈。下面以我实际业务场景讲讲递归在vue组件中的应用。在vue中使用完成一个完整的递归，我个人认为最重要的有两点：确定好进入递归的条件;确定好跳出... 继续阅读 >
2021
01-14

vue element和nuxt的使用技巧分享

1.element的时间选择提交的格式转化例如FriSep07201800:00:00GMT+0800(中国标准时间)转化为2020-01-11的格式这记载datepicker中添加一句value-format=”yyyy-MM-dd”<el-date-pickertype="date"v-model="createdate"@change="formatTime"value-format="yyyy-MM-dd"placeholder="选择时间"></el-date-picker>2.动态循环复选框时，无法选中问题this.menulist[index].sonList.map((item)=>{this.$set(item,'checked',... 继续阅读 >
2021
01-13

vue组件是如何解析及渲染的？

前言本文将对vue组件如何解析以及渲染做一个讲解。我们可以通过Vue.component注册全局组件，之后可以在模板中进行使用<divid="app"><my-button></my-button></div><script>Vue.component("my-button",{template:"<button>按钮组件</button>",});letvm=newVue({el:'#app'});</script>全局组件解析原理为了保证组件的隔离，每个组件通过extend方法产生一个新的类，去继承父类。并把用户通过Vue.component方法传入... 继续阅读 >
2021
01-13

vue实现一个获取按键展示快捷键效果的Input组件

遇到一个需求，页面内要自定义快捷键，这就需要可以有地方设置和展示快捷键，找了一圈ElementUI发现没有能稍微改改就能用的组件，所以自己动手写了一个。这个只有快捷键展示功能，快捷键实际绑定生效的话是依赖传回的快捷键数据，由另外的组件处理的。目前只测试了Chrome的环境。效果如下：关键点虽然看起来像是一个Input但在组件内实际上是展示一个标签效果，还需要有删除按钮。这就得在输入框内放下html代码，浏览器的Input组件... 继续阅读 >
2021
01-13

vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能

一、准备工作下载vue-quill-editornpminstallvue-quill-editor--save或者yarnaddvue-quill-editor二、定义全局组件quill-editor下载好vue-quill-editor后，我们需要定义一个全局组件，把这个组件名字命名为quill-editor1、定义template模板<div><quill-editorv-model="value"ref="myQuillEditor":options="editorOption"@change="onEditorChange"></quill-editor><inputtype="file"hiddenaccept=".jpg,.png"ref... 继续阅读 >
2021
01-13

vue自定义组件实现双向绑定

场景：我们比较常用的父子组件之间的交互方式：父组件通过props将数据流入到子组件；子组件通过$emit将更新后的数组发送的父组件；今天，我们通过另一种方式实现交互，参考input框的v-model，实现自定义组件的双向数据绑定。即：父组件值改变，子组件的值跟着改变；反之，子组件值发生变化，父组件值随之变化子组件定义：由于不能直接修改props属性值，我们这里定义valueData，通过监听实时接收value值，通过click方法修改valueDat... 继续阅读 >
2021
01-13

vue 页面跳转的实现方式

一、this.$router.push()1、vue<template><divid='test'><button@click='goTo()'>点击跳转4</button></div></template>2、script//跳转前页面传参数：goTo(item){//storageData中数据用于跳转到下一个页面之后，进行返回时能够返回到跳转之前的页面letstorageData={searchWords:this.keyWord,pageSize:this.paging.pageSize,pageNo:this.paging.currentPage};//data中数据用于将本页面中... 继续阅读 >
2021
01-13

Vue过滤器,生命周期函数和vue-resource简单介绍

一、过滤器使用例子：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="vue.js"></script></head><body><divid="app">//把msg的内容的abc替换成'你好123'，最后添加上'========'<p>{{msg|msgFormat('你好','123')|test}}</p></div><script>//定义一个Vue全局的过滤器，名字叫做msgFormatVue.filter('msgFormat',function(msg,arg,arg2){//字... 继续阅读 >
2021
01-13

详解template标签用法(含vue中的用法总结)

一、html5中的template标签html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。<!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见--><template><div>我是template</div></template><abc>我是自定义表现abc</abc>二、template标签操作的属性和方法content属性:在js中te... 继续阅读 >
2021
01-12

Vue中ref和$refs的介绍以及使用方法示例

前言在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向该子组件实例通俗的讲，ref特性就... 继续阅读 >
2021
01-10

Vue实现一种简单的无限循环滚动动画的示例

本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例，分享给大家，具体如下：先看实现效果：这种类似轮播的效果，通常可以使用轮播的方案解决，只不过相对于我要分享的方案来说，轮播实现还是要复杂些的。Vue提供了一种过渡动画transition-group，这里我便是利用的这个效果//template<transition-groupname="list-complete"tag="div"><divv-for="vinitems":key="v.ix"class="itemlist-complete-itempro-panel"... 继续阅读 >
2021
01-08

vue编写简单的购物车功能

vue编写简单的购物车功能 使用vue写出简单的购物车，供大家参考，具体内容如下代码：//Anhighlightedblock<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>.cl{border:1pxsolidblack;width:300px;margin:30px;padding:15px;}</style></head><body><divid="app"><divclass="cl"v-for="(item,index)... 继续阅读 >
2021
01-08

vue watch监控对象的简单方法示例

watch的作用：监听vue实例上数据的变动示例：queryData:{name:'',creator:'',selectedStatus:'',time:[],},1、普通的watchdata(){return{frontPoints:0}},watch:{frontPoints(newValue,oldValue){console.log(newValue)}}2、数组的watchdata(){return{winChips:newArray(11).fill(0)}},watch:{winChips:{handler(newValue,oldValue){for(leti=0;i<newValue.lengt... 继续阅读 >
2021
01-08

vue.js watch经常失效的场景与解决方案

使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：但是，❌，这里的watch是无效的!!!因为obj是引用类型！！！引用类型的指针是固定的，所以如果不是重新赋值，那么其赋值的变量自然也不会发生变化。举个例子：letobj={a:1};letobj1=obj;letobj2={...obj};obj1.a=2;obj2.a=3;//这里肯定是true，因为obj和obj1都是同一个指针，不明白的搜下引用类型cons... 继续阅读 >
2021
01-08

通过vue.extend实现消息提示弹框的方法记录

前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注册信息先做一次简单的验证，并根据验证弹出一个对应消息提示弹框我们拿到这个需求后，便开始着手准备要通过局部注册消息弹框组件的方法来实现这个场景，在通过局部注册消息弹框组件的方法解决完这个需求后，自然是沾沾自喜，紧接着又迎来了一个需求，... 继续阅读 >
2021
01-08

vue3中轻松实现switch功能组件的全过程

what编程语言里面，除了使用if语句来做条件判断，还有另外一个常用的就是switch了。而在vue中，官方已经帮助我们实现了v-if这个指令，但是还没有switch，那我们能不能自己实现一个呢？这篇文章就是来探索这个问题，并且最终实现一个Switch组件以终为始先来看看我们希望用户是如何使用Switch的用js的方式来对比一下：用户可以通过一个VSwitch组件来应用switch功能通过case来确定匹配的条件然后每一个case匹... 继续阅读 >