JavaScript - 教程之家

139浏览

0评论

vue中封装axios并实现api接口的统一管理

在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创...

2021-05-30

67浏览

0评论

浅析vue中的nextTick

背景
vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可...

2021-05-30

115浏览

0评论

vue实现简易的双向数据绑定

主要是通过数据劫持和发布订阅一起实现的双向数据绑定数据更新时,可以更新视图视图的数据更新是,可以反向更新模型
组成说明
Observe监听器劫持数据, 感知数据变化...

2021-05-30

122浏览

0评论

基于vue+echarts数据可视化大屏展示的实现

获取 ECharts 的路径有以下几种，请根据您的情况进行选择：1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的...

2021-05-30

69浏览

0评论

如何在VUE中使用vue-awesome-swiper

一：首先进入项目目录中安装install vue-awesome-swiper@2.6.7 --save二.使用
全局挂载：import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require...

2021-05-30

73浏览

0评论

vue中父子组件的参数传递和应用示例

1.在父组件中调用子组件，父亲传值给子组件子组件如下，把要传给给父亲的值放在props中template>  <div class="index-bbar"> <ul class="flex" > <li...

2021-05-30

55浏览

0评论

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

what
编程语言里面，除了使用 if 语句来做条件判断，还有另外一个常用的就是 switch 了。而在 vue 中，官方已经帮助我们实现了 v-if 这个指令，但是还没有 switch ，那我们能不能自己...

2021-05-30

59浏览

0评论

手写Vue源码之数据劫持示例详解

源代码: 传送门Vue会对我们在data中传入的数据进行拦截：对象：递归的为对象的每个属性都设置get/set方法数组：修改数组的原型方法，对于会修改原数组的方法进行了重写
在用...

2021-05-30

78浏览

0评论

vue导入.md文件的步骤（markdown转HTML）

前言　　刚接到这个需求的时候，觉得很简单（的确很简单）但是这玩意的坑真的也让人无奈。　　网上找了很多的资料，都没有写出痛点（这就很难过了）。通过实践并且在我们项目中平稳运行...

2021-05-30

102浏览

0评论

Vue 修改网站图标的方法

1、在stateic下新增favicon.ico文件2、修改index.html文件，如图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-widt...

2021-05-30

99浏览

0评论

Vue中强制组件重新渲染的正确方法

有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？...

2021-05-30

58浏览

0评论

vue中使用echarts的示例

1:首先要用到echarts2：在vue中安装这个依赖3：引入要用的页面import echarts from 'echarts';4：然后初始化<template> <a-col span="12" style="min-height:343px;width:100%;ba...

2021-05-30

71浏览

0评论

vue3弹出层V3Popup实例详解

Vue3-Popup 基于vue3构建的手机端自定义弹层组件。一款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3自定义弹层组件。支持上下左右弹出、圆角、自...

2021-05-30

77浏览

0评论

el-table表头根据内容自适应完美解决表头错位和固定列错位

将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式 <el-table v-tableFit></el-table>）
通过计算文字的宽度进行表头设置，其他内容无法计算。
5000个单元格以上根...

2021-05-30

91浏览

0评论

Vue实现简易购物车页面

VUE实现简易购物车效果，供大家参考，具体内容如下简易的购物车小demo引用了一下bootstrap3，的表格<section id="gouwuche"> <table class="table table-hover"> <thead> <tr>...

2021-05-30

74浏览

0评论

Vue中inheritAttrs的使用实例详解

今天举一个例子解释一下inheritAttrs的使用先看代码<body> <div id="app" class="vueclass"> <my-com title="标题" wx-attr1="未定义属性1" wx-attr2="未定义属性2"></m...

2021-05-30

62浏览

0评论

vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body
方式一import Vue from 'vue'/** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */export function create(Co...

2021-05-30

61浏览

0评论

vue调用微信JSDK 扫一扫，相册等需要注意的事项

在VUE里面需要注意的第一个问题就是路由得设置成第二个就是跳转路由的时候不要用this.$router.push 或者this.$router.replace 前者在ios 和安卓端都调不起来的后者只能在...

2021-05-30

93浏览

0评论

element-ui封装一个Table模板组件的示例

大家在做后台管理系统的时候，写的最多的可能就是表格页面了，一般分三部分：搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现，比如说element-ui，或者vuet...

2021-05-30

134浏览

0评论

vue3自定义dialog、modal组件的方法

vue3-layer：基于Vue3.0开发的PC桌面端自定义对话框组件。基于vue3构建的PC网页端自定义弹出框组件。全面覆盖各种弹窗应用场景，拥有10+种弹窗类型、30+种自定义参数配置、7+种...

2021-05-30

106浏览

0评论

jenkins自动构建发布vue项目的方法步骤

简介Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行（这个比较抽象，暂且写...

2021-05-30

88浏览

0评论

vue3.0中友好使用antdv示例详解

前言随着我们vue3.0的出现，我们的ui组件库也有了一些变化，像我们的旧版的element-ui已经不能在vue3.0中使用了，如果要使用element的话需要使用最新版的element-plus，由于发现它...

2021-05-30

82浏览

0评论

vue+elementui通用弹窗的实现(新增+编辑)

本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，分享给大家，具体如下：
组件模板
<el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="fals...

2021-05-30

78浏览

0评论

梳理一下vue中的生命周期

什么是生命周期？
生命周期，以个人之浅见，即一个事物从诞生到消亡的一个过程！以人的一生来做类比，其实就可以简单粗暴的将生命周期看作人的一生，人这一出生就开始了一段美好（艰难）的...

2021-05-30

279浏览

0评论

element 动态合并表格的步骤

前言　　element 官方的例子太简单了，不满足实际的需求　　数据肯定是动态的，合并的行数，列数都是动态的，该如何知道每一行的合并数呢需求　　动态合并表格，数据来源于数据库正文...

2021-05-30

197浏览

0评论

vue 动态生成拓扑图的示例

横向拓扑
在 index.html 文件中引入文件。 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="external no...

2021-05-30

65浏览

0评论

vue+vant 上传图片需要注意的地方

<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />1:上传文件流，提交的模式肯定得 form-data模式2：上传的文件file 做出处理我这里做的...

2021-05-30

399浏览

0评论

vue项目如何监听localStorage或sessionStorage的变化

出现这个问题的起因：在一个VUE页面中，引入两个组件，A组件实现基础信息展示，B组件展示列表，我要通过A组件的一个按钮触发状态，然后B组件根据A组件触发的状态来做业务处理，首先想到的...

2021-05-30

44浏览

0评论

详解基于element的区间选择组件校验(交易金额)

需求：这里以项目的需求为例，基本的需求如下：分为左右值，包含左右值，正整数左侧必须大于等于1，右侧无限大，右侧值必须不小于左侧左侧填写数据，右侧标为必填；右侧填写数据，左侧标...

2021-05-30

70浏览

0评论

利用Vue实现简易播放器的完整代码

看b站某马学习，实现一个属于自己的播放器HTML+CSS+JS<section id="xwyy">  <section class="box" style="margin-top: 30px;"> <div class="nav"> <div cl...

2021-05-30

81浏览

0评论

vue中实现点击空白区域关闭弹窗的两种方法

1. 第一种做法
首页在外层容器里面取一个名字为main，即ref="main",当bankSwitch为true的时候，弹窗出现<div class="selectedBorder" ref="main"> <div class="bankItem" v-if=...

2021-05-30

61浏览

0评论

vue中activated的用法

keep-alive
<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。
说白了被<keep-a...

2021-05-30

54浏览

0评论

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

前言递归相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归...

2021-05-30

65浏览

0评论

vue动态设置路由权限的主要思路

之前看到网上有些动态设置路由的，但是跟目前的项目不是很匹配，就自己动手实现了一种。主要思路就是：1.配置路由的时候绑定好id，可后端开发完成后，与后端同步id就行，这id唯一不变，根...

2021-05-30

76浏览

0评论

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

前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注...

2021-05-30

74浏览

0评论

Vue项目中使用mock.js的完整步骤

在Vue项目中使用mock.js 开发工具选择：Vscode1. 使用命令行创建vue项目（手动选择Babel，Router，Vuex）2. 导入element-ui（为了显示效果好一点），命令行输入npm i element-ui -S3.在mai...

2021-05-30

55浏览

0评论

vue编写简单的购物车功能

使用vue写出简单的购物车，供大家参考，具体内容如下
代码：// An highlighted block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...

2021-05-30

61浏览

0评论

基于VUE实现简单的学生信息管理系统

一、主要功能本次任务主要是使用VUE来实现一个简单的学生信息管理系统，主要功能为：1.显示所有学生的信息（默认为10个)
2. 点击按钮，显示出学号尾号为单数(或双数）的学生信息
3....

2021-05-30

72浏览

0评论

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

遇到一个需求，页面内要自定义快捷键，这就需要可以有地方设置和展示快捷键，找了一圈Element UI发现没有能稍微改改就能用的组件，所以自己动手写了一个。
这个只有快捷键展示功能，...

2021-05-30

70浏览

0评论

vue二选一tab栏切换新做法实现

问题描述
在我们做项目的过程中，有时候会要做一些tab栏切换效果。有两个tab的，有三个tab的，甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了，但是偶尔自己闲着没...

2021-05-30

56浏览

0评论

如何在vue-cli中使用css-loader实现css module

【前言】
无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：<...

2021-05-30

39浏览

0评论

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

watch的作用：监听vue实例上数据的变动示例：
queryData: {name: '',creator: '',selectedStatus: '',time: [],},1、普通的watchdata() { return { frontPoints: 0 }},watch:...

2021-05-30

63浏览

0评论

解决vue使用vant轮播组件swipe + flex时文字抖动问题

原抖动效果改后效果解决方法在外层容器的css里加上：transform: translateZ(0);部分页面代码<van-swipe-item v-for="(item,index) in meetingList" :key="index"> <div cla...

2021-05-30

61浏览

0评论

vue-quill-editor插入图片路径太长问题解决方法

最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。
由于项目是用 Vue 开发的，所以找编辑器的时候选了 vue-quill-editor 。...

2021-05-30

56浏览

0评论

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

场景：
我们比较常用的父子组件之间的交互方式：
父组件通过props将数据流入到子组件；
子组件通过$emit将更新后的数组发送的父组件；今天，我们通过另一种方式实现交互，参考input框的...

2021-05-30

45浏览

0评论

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

前言
本文将对vue组件如何解析以及渲染做一个讲解。我们可以通过Vue.component注册全局组件，之后可以在模板中进行使用<div id="app"> <my-button></my-button></div><scrip...

2021-05-30

40浏览

0评论

vue+element table表格实现动态列筛选的示例代码

需求：在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，用户使用起来可能会觉得抓不住自己的重点。设想实现：用户手动选择表格的列隐藏还是展示，并...

2021-05-30

66浏览

0评论

vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；
原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装 sudo npm i sortablejs --save-devhtml代...

2021-05-30

58浏览

0评论

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

使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：但是，❌，这里的watch是无效的!!!因为 obj 是引用类型！！！引用类型的指针是固定的...

2021-05-30

45浏览

0评论

vue实现防抖的实例代码

防抖：防止重复点击触发事件
首先啥是抖？抖就是一哆嗦！原本点一下，现在点了3下！不知道老铁脑子是不是很有画面感！哈哈哈哈哈哈典型应用就是防止用户多次重复点击请求数据。vue实现...

2021-05-30

热门文章