JavaScript - 教程之家

75浏览

0评论

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

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

2021-05-30

110浏览

0评论

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

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

2021-05-30

83浏览

0评论

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

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

2021-05-30

70浏览

0评论

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

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

2021-05-30

68浏览

0评论

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

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

2021-05-30

64浏览

0评论

梳理一下vue中的生命周期

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

2021-05-30

247浏览

0评论

element 动态合并表格的步骤

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

2021-05-30

187浏览

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

54浏览

0评论

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

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

2021-05-30

366浏览

0评论

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

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

2021-05-30

35浏览

0评论

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

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

2021-05-30

56浏览

0评论

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

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

2021-05-30

70浏览

0评论

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

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

2021-05-30

53浏览

0评论

vue中activated的用法

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

2021-05-30

33浏览

0评论

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

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

2021-05-30

55浏览

0评论

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

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

2021-05-30

57浏览

0评论

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

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

2021-05-30

64浏览

0评论

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

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

2021-05-30

42浏览

0评论

vue编写简单的购物车功能

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

2021-05-30

47浏览

0评论

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

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

2021-05-30

63浏览

0评论

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

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

2021-05-30

58浏览

0评论

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

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

2021-05-30

43浏览

0评论

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

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

2021-05-30

29浏览

0评论

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

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

2021-05-30

54浏览

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

50浏览

0评论

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

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

2021-05-30

46浏览

0评论

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

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

2021-05-30

36浏览

0评论

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

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

2021-05-30

32浏览

0评论

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

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

2021-05-30

56浏览

0评论

vue element el-transfer增加拖拽功能

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

2021-05-30

47浏览

0评论

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

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

2021-05-30

33浏览

0评论

vue实现防抖的实例代码

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

2021-05-30

44浏览

0评论

详解为什么Vue中的v-if和v-for不建议一起用

本文主要介绍了为什么v-if和v-for不建议一起用？分享给大家，具体如下：一、作用
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染v-for...

2021-05-30

47浏览

0评论

vue element和nuxt的使用技巧分享

1.element的时间选择提交的格式转化
例如Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间)转化为 2020-01-11的格式这记载datepicker中添加一句value-format=”yyyy-MM-dd...

2021-05-30

65浏览

0评论

Vue中引入svg图标的两种方式

Vue中引入svg图标的方式Vue中引入svg图标的方式一安装yarn add svg-sprite-loader --devsvg组件index.vue<template> <svg class="svg-icon" :class="svgCl...

2021-05-30

68浏览

0评论

从源码角度来回答keep-alive组件的缓存原理

今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。
官方API介绍和用法 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <t...

2021-05-30

51浏览

0评论

vuex的使用和简易实现

这里记录一下vuex的使用和vuex的简易实现
首先创建对应的store目录和对应的入口index.jsimport Vue from 'vue'import Vuex from 'vuex'import products from './modules/pr...

2021-05-30

218浏览

0评论

vue 页面跳转的实现方式

一、this.$router.push()1、vue<template> <div id='test'> <button @click='goTo()'>点击跳转4</button> </div></template> 2、script//跳转前页面传参数：goTo(item)...

2021-05-30

55浏览

0评论

如何在vue中使用HTML 5 拖放API

拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具，...

2021-05-30

45浏览

0评论

Vue 如何import服务器上的js配置文件

背景
项目中有一个本地配置文件：// src/image-position.jsexport default { label: '首页', value: 'home', data: [ { label: '轮播', value:...

2021-05-30

78浏览

0评论

vue传值方式的十二种方法总结

一.父传子传递（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性...

2021-05-30

44浏览

0评论

Vue Element前端应用开发之功能点管理及权限控制

概述本篇随笔介绍功能点管理及权限控制，功能点是作为一个业务对象数据进行管理，在角色范畴上进行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定义指令Directives进行控...

2021-05-30

45浏览

0评论

Vue项目优化的一些实战策略

Vue项目完成后就要从开发环境转成生产环境一些第三方的包体积过大，导致生成js文件过于庞大，这是时候可以生成打包报告来查看项目中的问题1.生成报告有两种方式，一种使用npm run...

2021-05-30

50浏览

0评论

React Native实现简单的登录功能(推荐)

React Native 简介：React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的...

2021-05-30

41浏览

0评论

ReactNative-JS 调用原生方法实例代码

第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModulepackage com.mixture;import android.content.Context;import android.widget.Toast;import com.facebook...

2021-05-30

51浏览

0评论

利用React-router+Webpack快速构建react程序

本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序，下面话不多说，感兴趣的可以一起学习学习。初始化项目
我们先创建个空文件夹，然后初始化 package.json ,...

2021-05-30

44浏览

0评论

深入浅析react native es6语法

react native是直接使用es6来编写代码，许多新语法能提高我们的工作效率解构赋值var { StyleSheet,Text,View} = React;这句代码是ES6 中新增的解构(Destructuring)赋值语句。...

2021-05-30

61浏览

0评论

JavaScript的React Web库的理念剖析及基础上手指南

React Web的目的及意义非常明确: 让React Native代码跑在Web上让一套代码运行在各个移动终端，对前端及业务来说，这是开发效率中一个质的提升。在项目初期，我们也曾向 React团...

2021-05-30

49浏览

0评论

在React框架中实现一些AngularJS中ng指令的例子

首先设定一段Angularjs代码的ng-class：<i class="header-help-icon down" ng-class="{up:showMenu}"></i>
比较容易理解的Angularjs ng-class设置样式代码，那我们使用React...

2021-05-30

56浏览

0评论

React.js入门学习第一篇

一、JSX介绍①定义JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清...

2021-05-30

热门文章