JavaScript - 教程之家

58浏览

0评论

vuex的数据渲染与修改浅析

1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方...

2021-05-30

75浏览

0评论

ESLint 是如何检查 .vue 文件的

近期要做一个类似的内容，学习了一下 Vue 是如何做的。ESLint 中的扩展机制首先需要了解一下如何才能扩展 ESLint 的功能。ESLint 扩展机制主要有 Rules、Plugins、Formatters...

2021-05-30

45浏览

0评论

Vue Elenent实现表格相同数据列合并

本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下作者：秋名思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对...

2021-05-30

58浏览

0评论

vue开发chrome插件，实现获取界面数据和保存到数据库功能

前言最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vu...

2021-05-30

77浏览

0评论

keep-alive保持组件状态的方法

keep-alive的设计初衷有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和dom节点，极易造成性能问...

2021-05-30

76浏览

0评论

详解vue 组件注册

一、了解组件注册的两种方式1.1 全局组件的注册方法//main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip =...

2021-05-30

97浏览

0评论

VUE+Element实现增删改查的示例源码

前言&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。
因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直...

2021-05-30

83浏览

0评论

浅析VUE防抖与节流

防抖和节流到底是啥函数防抖（debounce）解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开...

2021-05-30

65浏览

0评论

Vue3配置axios跨域实现过程解析

实现跨域共3个步骤：1，vue3.0根目录下创建vue.config.js文件；module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域...

2021-05-30

58浏览

0评论

vue动态合并单元格并添加小计合计功能示例

1、效果图2、后台返回数据格式（平铺式）3、后台返回数据后，整理所需要展示的属性存储到（items）数组内var obj = { "id": curItems[i].id, "feeName": curItems[i].feeName,...

2021-05-30

91浏览

0评论

Vue如何实现验证码输入交互

最近做一个H5的页面，里面有个输入验证码交互，就是移动端比较常见的那种验证码输入交互。就是那种，对，就是那种，一个数字一个下划线，移动端非常常见的那种验证码交互。实现过程中主...

2021-05-30

81浏览

0评论

详解Vue中的自定义指令

　　除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，...

2021-05-30

73浏览

0评论

vue添加自定义右键菜单的完整实例

一、写原生方法
1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolde...

2021-05-30

67浏览

0评论

Vue+element-ui添加自定义右键菜单的方法示例

1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件<template><el-button size="medium" @contextmenu.prevent.native="openMenu($event)">......</template>2...

2021-05-30

65浏览

0评论

vuex Module将 store 分割成模块的操作

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（mo...

2021-05-30

52浏览

0评论

vue $router和$route的区别详解

一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样...

2021-05-30

60浏览

0评论

Vue实现图书管理小案例

本文实例为大家分享了Vue实现图书管理的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...

2021-05-30

56浏览

0评论

用vue设计一个日历表

日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。先贴图功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录...

2021-05-30

60浏览

0评论

vue使用echarts图表自适应的几种解决方案

1.使用window.onresizelet myChart = echarts.init(document.getElementById(dom))window.onresize = function () { myChat.resize()}优点：可以根据窗口大小实现自适应缺点...

2021-05-30

91浏览

0评论

解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

1.在vue项目根目录下新建vue.config.js（不是在src下面）
vue.config.js配置文件：module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputD...

2021-05-30

65浏览

0评论

在vue中动态修改css其中一个属性值操作

我就废话不多说了，大家还是直接看代码吧~<template> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5...

2021-05-30

142浏览

0评论

vue祖孙组件之间的数据传递案例

**解决的问题：**使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。**注意：**本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的...

2021-05-30

50浏览

0评论

vuex页面刷新导致数据丢失的解决方案

解决vuex页面刷新导致数据丢失问题
vuex数据是存在内存当中，当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessio...

2021-05-30

53浏览

0评论

vue使用exif获取图片经纬度的示例代码

我上一篇文章写了怎么压缩图片和旋转。这篇写一下怎么看图片的经纬度注意！！！只有原图有大量的元数据信息。通过拍照软件如：b612等，拍摄的照片是软件处理过的，所以一定要使用原图来...

2021-05-30

107浏览

0评论

vue3.0+vue-router+element-plus初实践

Vue3中文文档 Vue3.0对比Vue2.x优势框架内部做了大量的性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听，更小的打包文件等。新增的组合式API（即Composition API），更适合大型...

2021-05-30

52浏览

0评论

vue3.0中setup使用(两种用法)

一、setup函数的特性以及作用　　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法但是当你真正开始使用 Vue3...

2021-05-30

74浏览

0评论

如何实现vue的tree组件

前言Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。效果节点可以无限的递归延伸
可...

2021-05-30

67浏览

0评论

如何正确解决VuePress本地访问出现资源报错404的问题

背景
最近发现好多小伙伴刚用VuePress，然后一build完就直接用本地浏览器访问，结果出现黑块。仅仅出现那种问题还好，给项目安装 vuepress-plugin-serve 插件就行了，
但是如果有需...

2021-05-30

58浏览

0评论

vue-calendar-component 封装多日期选择组件的实例代码

实现效果安装vue-calendar-component日历组件cnpm i vue-calendar-component --save //国内镜像引入import Calendar from "vue-calendar-component";export default { com...

2021-05-30

75浏览

0评论

解决vue下载后台传过来的乱码流的问题

后台返回的乱码流解决办法：请求方式用的是axios，主要加关键的 {responseType: 'blob'}axios封装export function postDownload(url, data) {　　return new Promise((resolve,...

2021-05-30

40浏览

0评论

Vue $attrs & inheritAttr实现button禁用效果案例

components/Button.vue<template> <div> <button :disabled="$attrs.disabled">点击</button> </div></template> <script> export default { inheritAttrs: false, }</s...

2021-05-30

69浏览

0评论

vue中利用three.js实现全景图的完整示例

粗暴一点,直接上代码:第一步:通过指令下载three.jsnpm install three -S第二步:
在组件中引用import * as THREE from 'three'第三步:html部分<div id="container"></div>js...

2021-05-30

114浏览

0评论

element中Steps步骤条和Tabs标签页关联的解决

步骤条和标签页的简单关联1.步骤条：

步骤条的acitve属性用来设置当前激活的步骤，类型为number<el-steps :active="active - 0" finish-status="success"> <el-step title="...

2021-05-30

65浏览

0评论

vue使用exif获取图片旋转，压缩的示例代码

<template> <div> <input type="file" id="upload" accept="image" @change="upload" /> </div></template><script>export default { data() { return { picValue:{},...

2021-05-30

69浏览

0评论

Vue router传递参数并解决刷新页面参数丢失问题

Vue Router 传参方式：
1. this.$router.push({ name: '模块名称', params: { // 各参数 } })
router.js：
export default new Router({ routes: [ { path: '/paramsPassing...

2021-05-30

80浏览

0评论

实用的 vue tags 创建缓存导航的过程实现

需求是要做一个tag，当切换页面的时候保留状态。效果图：思路既然涉及了router跳转，那我们就去查api 发现keep-alive，巧了就用它吧。这里我们用到了include属性，该属性接受一个数组...

2021-05-30

70浏览

0评论

vue表单验证之禁止input输入框输入空格

测试小姐姐让输入框不允许输入空格，安排。刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才...

2021-05-30

80浏览

0评论

vue基于Echarts的拖拽数据可视化功能实现

背景
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，...

2021-05-30

87浏览

0评论

vue+element_ui上传文件,并传递额外参数操作

需求：1、文件大小验证2、文件类型验证3、额外参数传输<template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUplo...

2021-05-30

47浏览

0评论

vue-router定义元信息meta操作

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound fr...

2021-05-30

94浏览

0评论

在vue中使用inheritAttrs实现组件的扩展性介绍

1、首先我们创建一个input组件<template> <div class="inputCom-wrap"> <input v-bind="$attrs" /> </div></template> <script lang="ts">import { defineComponent } from...

2021-05-30

112浏览

0评论

vue中如何自定义右键菜单详解

在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.p...

2021-05-30

75浏览

0评论

基于vue项目设置resolves.alias: '@'路径并适配webstorm

在webpack的配置项中添加下面代码function resolve (dir) { return path.join(__dirname, dir)}webpackConfig = { resolve: { alias: { '@': resolve('src') } }}...

2021-05-30

81浏览

0评论

详解Vue3 Teleport 的实践及原理

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新，Vue3 还新增了一个内置组件： Teleport 。这个组件的作用主要用来将模板内的 DOM...

2021-05-30

82浏览

0评论

对vue生命周期的深入理解

一.Vue生命周期简介官网：https://cn.vuejs.org/v2/api/#beforeCreateVue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、...

2021-05-30

77浏览

0评论

浅谈Vue使用Elementui修改默认的最快方法

相信大家都需要过，在Vue中使用Elementui的时候，遇到最多也最蛋疼的问题就是修改默认样式，接下来直奔主题；// template <el-progress :text-inside="true" :stroke-width="26"...

2021-05-30

110浏览

0评论

详解vue-cli项目在IE浏览器打开报错解决方法

首先要知道VUE官网已表明仅支持IE8以上版本（不包括IE8），css弹性布局flex各浏览器支持如下:假如项目用到弹性布局，则项目仅支持IE10以上版本。另外兼容其他低版本的，请另寻它法。...

2021-05-30

74浏览

0评论

vue 基于abstract 路由模式实现页面内嵌的示例代码

abstract 路由模式
abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实...

2021-05-30

68浏览

0评论

vue 在服务器端直接修改请求的接口地址

一个项目可能有很多环境，开发，测试，预生产，生产等环境，如果每一个环境都需要重新打包会显得比较麻烦，那么如何解决这个问题呢在vue和uniapp中以及其他框架下的都是可以按照如下操...

2021-05-30

135浏览

0评论

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

1.如果只使用config配置的相关js接口可采用如下方式引入执行 npm weixin-sdk-js --save局部引入在vue页面中 import wx from 'weixin-sdk-js';全局引入在vue 的main.js...

2021-05-30

热门文章