vue
2b勿扰
专注技术的研究
展开
-
vue3.0系列实现表格导出,表头合并功能复杂表格功能
安装如下包npm i js-xlsx项目中引用在按钮中执行exportList方法就好了,表头合并null必须占位//导出排柜汇总表 exportList() { salesApi.cabinetExpolexcel().then(response => { console.log(response.data.data) }); ...原创 2020-04-03 08:51:51 · 17480 阅读 · 0 评论 -
vue中实现element-ui 表格的单元格编辑功能和单元格之间的计算
<el-table :data="list" max-height="700" border style="width: 100%" @cell-click="tabClick" :row-class-name="tableRowClassName" > <el-table-column ...原创 2020-03-29 17:38:12 · 18789 阅读 · 0 评论 -
vue中实现element-ui dialog的弹窗拖拽+水平方向伸缩
import Vue from "vue";// v-dialogDrag: 弹窗拖拽+水平方向伸缩/** 使用方法* 将以下代码复制到一个js文件中,然后在入口文件main.js中import引入即可;* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。* 给dialog设置 :close-on-click-mo...原创 2020-03-29 17:32:51 · 20749 阅读 · 8 评论 -
vue实现表格的导入,导出操作
表格导入导出首先安装:npm install vue-json-excel//表格导出npm install vue-xlsx-table//表格导入在vue的main.js文件中加入全局配置//导入表格import vueXlsxTable from 'vue-xlsx-table'Vue.use(vueXlsxTable, {rABS: false})//导出表格impor...原创 2020-03-21 13:39:05 · 20039 阅读 · 5 评论 -
(实战项目篇)vue3.0系列(vue2.6-cli3.x)使用vuex
第一种方式:直接挂载到vue上store.jsimport Vue from 'vue'import Vuex from 'vuex'// 引用 Vuex插件Vue.use(Vuex)// 将home相关的状态抽取为一个模块const home = { state: {// 存放状态(共享属性) count: 1 }, // 改变 sta...原创 2019-12-18 21:08:18 · 11501 阅读 · 0 评论 -
(实战项目篇)vue3.0系列(vue2.6-cli3.x)使用echart
```bash<template> <div class> <div id="myChart" :style="{ height: '500px',}"></div> </div></template><script>// 引入基本模板let echarts = require('ec...原创 2019-12-18 09:59:15 · 9412 阅读 · 0 评论 -
(实战项目篇)vue3.0系列(vue2.6-cli3.x)生产环境和开发环境变量配置
.env.development# 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用 process.env.VUE_APP_xxxxxx# 目标服务接口地址,这个地址是按照你自已环境来的, 添加 或者更改配置后,需要重启服务VUE_APP_SERVICE_URL = 'http://easymock/...........' # 开发环境的前缀...原创 2019-12-15 21:12:26 · 7486 阅读 · 0 评论 -
(实战项目篇)vue3.0系列(vue2.6-cli3.x)vue配置解决跨域问题
vue.config.jsmodule.exports = { devServer: { port: 8888, // 端口号,如果端口号被占用,会自动提升1 host: "localhost", //主机名, 127.0.0.1, 真机 0.0.0.0 https: false, //协议 open: true, //启...原创 2019-12-15 21:09:26 · 5466 阅读 · 0 评论 -
(实战项目篇)vue3.0系列(vue2.6-cli3.x) axio的封装和使用
request.jsimport axios from 'axios'import { Loading, Message } from 'element-ui';const loading = { loadingInstance: null, // Loading 实例 // 打开加载 open: function () { // 创建实例,而且会...原创 2019-12-15 20:08:23 · 5355 阅读 · 0 评论 -
(实战项目篇)vue3.0系列(vue2.6-cli3.x)自定义配置文件使用
在根目录下创建vue.config.js文件module.exports = { // 选项... // publicPath: '/demo2', devServer: { port: 8001, // 端口号,如果端口号被占用,会自动提升1 host: "localhost", //主机名, 127.0.0.1, 真机 0.0.0.0...原创 2019-12-15 12:59:13 · 4494 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)webpack配置解析
// 引入node中的path模块,处理文件路径 的小工具const path = require('path')// 引入插件const HtmlWebpackPlugin = require('html-webpack-plugin')// 1. 引入 vue-loader插件const VueLoaderPlugin = require('vue-loader/lib/plugin...原创 2019-12-15 09:43:28 · 4390 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)路由传参(监听路由参数)
;(function () { const template = `<div class="jumbotron"> <h1>{{ id }}</h1> <h2>{{ sportDetail.title }}</h2> <p>{{ sportDetail.content }...原创 2019-12-14 19:42:35 · 5978 阅读 · 1 评论 -
vue3.0系列(vue2.6-cli3.x)生命周期(钩子函数)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-12-14 16:09:06 · 4103 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)组件传参(兄弟) 第三方pubsub-js 的使用
进行兄弟传参方式有很多(vuex,new vue等方式)本节介绍第三方库pubsub-js 的使用一:组件订阅; (function () { const template = `<div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li ...原创 2019-12-14 16:00:32 · 3659 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)插槽的使用slot
;(function () { // 组件模板中,必须包含有且只有一个根元素 const template = `<div id="#app"> <!--头部导航区域--> <app-navbar></app-navbar> <!--核心区域:分左...原创 2019-12-13 23:47:17 · 4098 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)组件传参(子到父)
父组件;(function () { const template = `<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <!--右边上半区域--> <!--<h1 class="page-header">Dashboar...原创 2019-12-13 23:41:34 · 3499 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)组件传值(父到子)
父组件;(function () { const template = `<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <!--右边上半区域--> <!--<h1 class="page-header">Dashboar...原创 2019-12-13 23:33:50 · 4375 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)组件化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-12-13 10:59:50 · 2684 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x)自定义过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-12-13 10:56:00 · 4236 阅读 · 1 评论 -
vue3.0系列(vue2.6-cli3.x) 插件开发
插件js文件(function(){ //声明 MyPlugin 插件对象 const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { alert(...原创 2019-12-13 10:05:03 · 2875 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x) todomvc的实现
js部分(function (Vue) { //表示依赖了全局的 Vue, 其实不加也可以,只是更加明确点 var STORAGE_KEY = 'items-vuejs'; // 本地存储数据对象 const itemStorage = { fetch: function () { // 获取本地数据 return JSON.parse...原创 2019-12-13 09:44:53 · 2723 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x) 自定义指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-12-12 23:44:46 · 3482 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x) 函数,计算属性,监听器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-12-12 22:58:35 · 3091 阅读 · 0 评论 -
vue3.0系列(vue2.6-cli3.x) 事件处理(DOM原生,事件冒泡,默认事件)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-12-12 22:56:20 · 3672 阅读 · 0 评论