js
低調的D吖
这个作者很懒,什么都没留下…
展开
-
vue-admin-template 新手學習(十一)實現導出zip包
如下圖想把列表的數據導出zip包來(其實是有60條數據)需要安裝依賴npm install jszipnpm install file-saver然後需要增加Export2Zip的jsimport { saveAs } from 'file-saver'import JSZip from 'jszip'export function export_txt_to_zip(th, jsonData, txtName, zipName) { const zip = new...原创 2020-05-21 17:17:14 · 179 阅读 · 0 评论 -
vue-admin-template 新手學習(十)實現pdf下載
簡單寫一個下載的頁面<router-link to="/pdf/download"> <el-button type="primary" @click="clickBtn"> 下載pdf </el-button> </router-link>methods: { fetchData() { import('./content.js').then(data => {.原创 2020-05-20 14:20:12 · 260 阅读 · 2 评论 -
vue-admin-template 新手學習(九)選擇excel 並解析內容在前端展示
引入xlsx依賴模塊npm install xlsx --save在vue文件引入依賴import XLSX from 'xlsx'使用組件選擇文件<div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"></input> <div>原创 2020-05-14 15:27:57 · 198 阅读 · 1 评论 -
vue-admin-template 新手學習(八)Echarts圖表
安裝依賴 npm install echarts --save在main.js全局引入import echarts from 'echarts'Vue.prototype.$eacharts = echarts原创 2020-05-09 15:48:28 · 1089 阅读 · 0 评论 -
vue-admin-template 新手學習(七) 本地/後端 mock 數據
假設我們要添加商品mock數據 達到如下效果1.我們需要在mock數據下添加product的模擬數據import Mock from 'mockjs'const data = Mock.mock({ 'items|10': [{ id: '@id', name: '@sentence(1, 5)', typeName: 'HUAWEI@integer...原创 2020-05-07 15:50:05 · 580 阅读 · 0 评论 -
vue-admin-template 新手學習(五) 國際化多語言
在各種項目中會涉及到多語言(國際化項目?) 所以這個時候語言包非常重要1.首先在 src加入 lang/index.js & index.js & en.js & zh.js//lang index.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import Cookies from 'js-c...原创 2020-04-29 17:39:47 · 637 阅读 · 0 评论 -
vue-admin-template 新手學習(四) 頁面權限控制
1.創建vue實例的時候 掛載vue-router2.用戶登錄後獲取role 將role和路由美國頁面權限比較 生成最終用戶可訪問的路由表3.調用router.addRoutes 添加可訪問路由4.使用vuex管理路由 根據vuex中可訪問路由渲染側邊欄組件完整版登錄的時候記得改vue.config.js下面的環境為developmentlintOnSave: pro...原创 2020-04-15 17:17:55 · 380 阅读 · 1 评论 -
vue-admin-template 新手學習(六) 導出excel
需要先安裝三個依賴npm install -S file-saver xlsxnpm install -D script-loader封裝Export2Excel.jsfunction generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = ...原创 2020-01-18 14:16:13 · 211 阅读 · 0 评论 -
vue-element-admin-template 分頁組件實現
分頁組件實現 ,使用element 的pagination組件進行再一次封裝https://element.eleme.io/#/zh-CN/component/pagination#<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pa...原创 2020-01-16 18:25:56 · 445 阅读 · 0 评论 -
vue promise/async/await 區別與聯繫
1、只有一個異步請求,且只需要做錯誤處理情況下,使用promise getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response...原创 2020-01-16 11:28:38 · 290 阅读 · 0 评论 -
vue-element-admin-template 權限控制整理
vue-element-admin是個強大的管理後台框架https://github.com/PanJiaChen/vue-element-admin/tree/master/src/directive經過了一些琢磨,終於知道vue-element-admin-template如何增加權限控制首先,先把邏輯關係理清楚: 登錄後通過token獲取用戶對應的角色rol...原创 2020-01-10 11:12:02 · 1769 阅读 · 20 评论 -
Vue router 的路由的跳轉方式 以及原理
一、路由概念 路由:網絡工程術語 互聯網中把信息從源地址發送到目的地二、路由進化的三個階段 2.1 後端路由 頁面請求不同路徑的內容時,交給服務器來處理,服務器渲染好整個頁面並且返回客戶端 2.2 前端路由 後端提供api,前端使用ajx獲取數據,通過javascript將數據渲染到頁面...原创 2019-11-21 14:10:56 · 287 阅读 · 0 评论 -
mpvue 開發微信小程序(四) 引入騰訊地址並逆地址解析
一、註冊騰訊lbs的keyhttps://lbs.qq.com二、使用1.在使用頁面引用並使用<script>var QQMapWX = require("../../common/libs/qqmap-wx-jssdk.min.js")methods: { getMyLocation(){ var that = this w...原创 2019-12-19 11:48:31 · 113 阅读 · 0 评论 -
mpvue 開發微信小程序(三)home頁面和跳轉到詳情頁面
要實現如下頁面,那麼在pages 下面新建一個home文件夾,home下面新建main.js & main.json & Home.vue三個文件Home.vue<template> <div class="home"> <swiper class="swiper" indicator-dots="true" aut...原创 2019-12-12 17:08:51 · 121 阅读 · 0 评论 -
mpvue 開發微信小程序(二)index頁面和tabbar和nav
接上一節index頁面的代碼main.js(掛載index頁面)import Vue from 'vue'import Index from './Index.vue'Vue.config.productionTip = falseIndex.myType = 'index'const index = new Vue(Index)index.$mount()m...原创 2019-12-12 16:36:46 · 85 阅读 · 0 评论 -
mpvue 開發微信小程序(一) 環境搭建和index頁面
一、mpvue 腳手架安裝1.npm install -g vue-cli2.vue init mpvue/mpvue-quickstart my-project(my-project是文件夾名字,不能使用中文,vue init mpvue/mpvue-quickstart 這是和vue init webpack 一樣的方式)如果是帶有文件名,那麼需要先cd 到my-pro...原创 2019-12-12 16:03:26 · 94 阅读 · 0 评论 -
vue 組件式開發swiper
必須要先安裝npm install vue-awesome-swiper//組件<template> <div class="my-swiper"> <swiper :optops="swiperOption" class="swiper-menu"> <swiper-slide><img src="~as...原创 2019-12-09 11:51:46 · 65 阅读 · 0 评论 -
vue 組件式開發tabControl
經常在頁面會使用tab切換,如下為tabcontrol組件開發//點擊的時候當前的index 傳給方法然後顏色變化 <div class="tab-control"> <!-- if you click the first tab ,index =0, --> <div v-for="(item,index) in titl...原创 2019-12-04 12:01:21 · 115 阅读 · 0 评论 -
Vuex是什麼 主要用來做什麼 為什麼要使用vuex
一、Vuex是什麼Vuex是一個大管家,多個組件共享的變量全部存儲在一個對象裡 將這個對象放在頂層vue實例中,讓其他組件使用,如下圖為多頁面二、Vuex的五個屬性state:vuex的基本數據,用來儲存變量 getter:從基本數據(state)派生的數據 ,相當於state的計算屬性(computed) mutation:提交更新數據的方法,必須是同步,美國mutation...原创 2019-12-10 18:24:43 · 216 阅读 · 0 评论 -
如何解決vuejs 的路徑問題
我們經常在開發的時候 路徑的問題經常提示:These relative modules were not found我們可以在webpack.base.config.js 的resolve代碼下加入如下resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), ...原创 2019-12-02 14:52:53 · 89 阅读 · 0 评论 -
vue aixos網絡請求的開發封裝
vue-router 以後不再維護了 當前比較多使用的是ajax和axiosajax 是Asynchronous Javascript And XML 異步js 和xml,是一種異步請求的技術aixos在npm上的描述是Promise based HTTP client for the browser and node.js,是一種基於promise封裝的http客戶端在networ...原创 2019-11-29 10:47:43 · 97 阅读 · 0 评论 -
vue 如何解決路徑變化問題--alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'assets':resolve('src/assets'),//vue cli3 'assets':resolve('@/assets') 'components':resolve('s...原创 2019-11-28 16:43:04 · 62 阅读 · 0 评论 -
vue 組件式開發navBar
如下圖 是要實現的效果如下為代碼塊//NavBar.vue<template> <div id="vab-bar"> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> ...原创 2019-11-28 14:37:42 · 344 阅读 · 0 评论 -
vue-cli腳手架install
全局安裝vue-cli:npm install -g vue-cli初始化項目: vue init webpack 出現如下(如下為需要手動安裝routerand npm install劃分項目結構原创 2019-11-28 14:45:04 · 62 阅读 · 0 评论 -
vue 組件式開發tabBar
如下圖 是想實現的效果對此組件進行分析tabbaritem.vue代碼塊<template><div class="tab-bar-item"><div v-if="!isActive" @click="itemClick"> <slot name="item-icon"></slot></di...原创 2019-11-26 16:31:44 · 252 阅读 · 1 评论 -
Promise 的鏈式編程--異步編程的一種解決方案
Promise 異步編程的一種解決方案,比傳統的解決方案(回調函數和事件)更合理強大1.promise 構造函數接受一個函數作為參數,該函數有兩個參數resolve 和 reject (javascript 引擎提供)2.resolve函數的作用是將promise 對象的狀態從未完成變成成功,即pending變成resolved,在異步操作成功時調用3.reject函數的作用是將pro...原创 2019-11-25 16:14:18 · 347 阅读 · 0 评论 -
vue.js v-bind 可以做些什麼事呢
v-bind 動態綁定class<h2 v-bind:class=“{active:isActive,line:isLine}”>{{message}}</h2><button @click=‘btnClick’>按鈕</button>data:{ message:’hello’, isActive:true,...原创 2019-11-24 10:20:34 · 54 阅读 · 0 评论 -
父子組件通訊使用
一、父子組件 1.創建組件構造器 Vue.extend()--> const app = new Vue({}) 2.註冊組件 Vue.component('my-cpn',cpnC) 3.使用組件 <div> <my-cpn></my-cpn></div>//父組件模板<div id="app"&...原创 2019-11-14 14:19:37 · 136 阅读 · 0 评论 -
javascript 高階函數filter & map & reduce 使用
一、filter 函數過濾 後面接回調函數 返回布爾值->true:函數會自動將這次的回調的n 加入新數組->false:函數會自動過濾掉這次的n需求一:取出小於100的數字第一種方式使用for循環,第二種方式使用高階函數filterconst nums = [100,20,49,300,799,10,60]let nums = 0for (let n o...原创 2019-11-12 11:13:25 · 75 阅读 · 0 评论