分类：vue

2022
01-12

vue.js中methods watch和computed的区别示例详解

目录前言介绍一、作用机制上二、从性质上三、watch和computed的对比四、methods不处理数据逻辑关系，只提供可调用的函数五、从功能的互补上看待methods,watch和computed的关系六、利用computed处理watch在特定情况下代码冗余的现象，简化代码总结computedwatch前言这篇文章主要简述vue中的watch和computer区别，还有methods首先，先说一下这几个不同在哪里，那当然是长得不一样啦~~~，哈哈哈哈哈不开玩笑了，截下来进入正题。介绍m... 继续阅读 >
2022
01-12

vue.js管理后台table组件封装的方法

目录问题分析为什么封装封装的内容都有哪些封装table组件确认数据格式封装组件封装全局组件table组件封装分页组件封装数据定义封装总结最近开了新的项目，简单说了自己的table封装。问题分析为什么封装首先为什么封装，是因为追求技术吗，不，是因为懒，不想一直的去粘贴复制代码，所以就想把table封装下，可以在创建新的table的时候，只需要填充数据就行了。封装的内容都有哪些主要有两个，一个是table组件，一个是分页组件搞清楚... 继续阅读 >
2022
01-12

vue使用GraphVis开发无限拓展的关系图谱的实现

vue使用GraphVis开发无限拓展的关系图谱的实现 1、去GraphVis官网下载对应的js，新版和旧版的js有所不同，看自己需求引入旧版还是新版（GraphVis官方网址：http://www.graphvis.cn/）visgraph.min.js（基本配置js）visgraph-layout.min.js（配置布局js）2、在需要的vue文件引入js文件importVisGraphfrom'@/assets/js/GraphVis/old/visgraph.min.js'//自己对应的js文件位置importLayoutFactoryfrom'@/assets/js/GraphVis/old/visgraph-layout.min.js'//自己对... 继续阅读 >
2022
01-12

vue实现简易计时器组件

在做项目中难免会碰到需要实时刷新，广告动画依次出现等等需求，刚最近基于业务需求，需要实现一个累加通话时长的计时器，这时候就需要定时器登上我们的代码舞台了，其实对于计时器，它的原理就是通过定时器来实现的，那么在写业务需求之前，我先说说关于定时器的一些知识。window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。在Javascript中，代码一般都是同步执行的，但定时器却是异... 继续阅读 >
2022
01-12

Vue生产和开发环境如何切换及过滤器的使用

目录一、生产环境，开发环境切换第一种方法：通过配置.env文件来实现第二种方法二、过滤器三、moment时间库使用一、生产环境，开发环境切换开发环境：开发环境就是在/config/index.js下配置proxyTable生产环境：打包项目后代理就失效啦，所以再生产环境下要重新配置一下第一种方法：通过配置.env文件来实现参考：https://cli.vuejs.org/zh/guide/mode-and-env.html第二种方法第一步：通过创建不同环境js文件，再通过cross-env来切... 继续阅读 >
2021
12-16

图文详解vue中proto文件的函数调用

图文详解vue中proto文件的函数调用 1、编译proto在src文件夹下新建proto文件夹用以存放所有的.proto文件。在proto文件夹下打开终端，输入如下命令：//进入proto文件夹执行下列编译，将helloworld.proto替换为当前的.proto文件名protoc-I=.helloworld.proto\--js_out=import_style=commonjs,binary:.\--grpc-web_out=import_style=commonjs,mode=grpcwebtext:.一个.proto文件（helloworld.proto）编译后生成2个js文件：helloworld_pb.jshelloworl... 继续阅读 >
2021
12-14

浅谈vue实现双向事件绑定v-model的原理

目录解释：总结补充与js或者jquery直接改变操作dom不同，vue使用v-model实现数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值官方文档这么解释：v-model只不过是一个语法糖而已,真正的实现靠的还是v-bind:绑定响应式数据触发input事件并传递数据(核心和重点... 继续阅读 >
2021
12-13

Vue后台中优雅书写状态标签的方法实例

目录前言优化抽离变量二次封装el-tag组件使用总结前言在后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询条件，同时状态显示对应不同颜色，在写代码时有些人往往是这么做的：<template><el-form:model="query"><el-form-itemlabel="审批状态"prop="status"><el-selectv-model="query.status"clearable><el-optionv-f... 继续阅读 >
2021
12-11

Vue封装通用table组件的完整步骤记录

目录前言为什么需要封装table组件？第一步：定义通用组件第二步：父组件与子组件进行render通信第三步：使用组件总结前言随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。为什么需要封装table组件？后台管理系统表格使用频率高，减少关于... 继续阅读 >
2021
12-10

Vue组件封装上传图片和视频的示例代码

Vue组件封装上传图片和视频的示例代码  首先下载依赖：cnpmi-Svue-uuidali-oss图片和视频字段都是数组类型，保证可以上传多个文件。UploadImageVideo：<!--UploadImageVideo分片上传--><template><divclass="UploadImageVideo"><el-uploadaction:on-change="handleChange":on-remove="handleRemove":limit="limitFileNumber":on-exceed="handleExceed":file-list="_fileList":http-request="handleHttp... 继续阅读 >
2021
11-19

Vue实现固定底部组件的示例

目录【实现效果】【实现方式】【实现效果】【实现方式】<template><divid="app"><divclass="main"><imgalt="Vuelogo"src="./assets/logo.png"><HelloWorldmsg="WelcometoYourVue.jsApp"/><imgalt="Vuelogo"src="./assets/logo.png"></div><divclass="footer">这是固定在底部的按钮</div></div></template><script>importHelloWorldfrom'./components/HelloWorld.vue'exportde... 继续阅读 >
2021
11-19

Vue 可拖拽组件Vue Smooth DnD的使用详解

Vue 可拖拽组件Vue Smooth DnD的使用详解 目录简介和Demo展示API:Container属性生命周期回调事件API:Draggable实战简介和Demo展示最近需要有个拖拽列表的需求，发现一个简单好用的Vue可拖拽组件。安利一下~VueSmoothDnD是一个快速、轻量级的拖放、可排序的Vue.js库，封装了smooth-dnd库。VueSmoothDnD主要包含了两个组件，Container和Draggable，Container包含可拖动的元素或组件，它的每一个子元素都应该被Draggable包裹。每一个要被设置为可拖动... 继续阅读 >
2021
11-17

超详细的vue组件间通信总结

超详细的vue组件间通信总结 目录前言一、props、$emit单向数据流二、$parent、$children三、$attrs、$listeners四、provide、inject五、eventBus(事件总线)六、vuex七、localstorage总结前言组件通信在我们平时开发过程中，特别是在vue和在react中，有着举足轻重的地位。本篇将总结在vue中，组件之间通信的几种方式：props、$emit$parent、$children$attrs、$listenersprovide、injecteventBusvuex本地存储一、props、$emit单向... 继续阅读 >
2021
11-17

Vue使用echarts可视化组件的方法

Vue使用echarts可视化组件的方法 echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html1.找到脚手架项目所在地址，执行cnpminstallecharts，安装echarts组件（脚手架的地址就是你vue项目的地址）（E:\demo\vuepro）这是我的项目地址，vuepro为项目名2.按需导入，以加快打开速度//引入echarts组件importechartsfrom"echarts"//引入基本模板letechart=require('echarts/lib/echarts')//引入柱状图组件require('ech... 继续阅读 >
2021
11-16

Vue + element实现动态显示后台数据到options的操作方法

Vue + element实现动态显示后台数据到options的操作方法 需求：实现selector选择器中选项值options数据的动态显示，而非写死的数据，我的角色ID数据如下：现在实现把这些数据请求显示option上实现如下：使用element-ui中selector选择器：<el-form-itemlabel="角色ID："prop="roleId"><el-selectv-model="addUserForm.roleId"placeholder="请选择角色ID"><el-optionv-for="iteminroleList":key="item.value":label="item.label"... 继续阅读 >