原创 [vue] 返回頂部組件(可自定義)

一、大致效果圖 默認: 說明:使用非腳手架開發,腳手架開發使用 ==> 可直接新建.vue文件,複製代碼過去即可。 二、主內容 2.0 頁面調用 <go-top :nav-data="navData" ref="backTo

原创 [vue] 多頁應用

1、根目錄 (package.json同級)vue.config.js module.exports = { publicPath: './', pages: { index: { entry: './src/m

原创 [vue] 解決vuex中state頁面刷新恢復默認值的一些思路

現有需求: 公用頭部組件有個購物車圖標及商品數量(數量默認是0); 點擊加入購物車按鈕時(不同頁面都有加入購物車按鈕,它們之間是非父子組件之間關係),實時改變購物車數量的變化; 我們都知道,實現它可以使用vuex,但是頁面

原创 [vue] 解決'vue' 不是內部或外部命令,也不是可運行的程序 或批處理文件的方法

window cmd 下出現 'vue' 不是內部或外部命令,也不是可運行的程序 或批處理文件。的解決方法: 1.查看npm安裝的所在位置 prefix = "C:\\Users\\Administrator\\AppData\

原创 [element ui] 動態表格 / 多選框時翻頁記住之前選擇的數據等

1 、簡單版 <template> <el-table :data="tableDemo.table" style="width: 100%"> <el-table-column :prop="v.prop" :l

原创 [正則] 正則替換內容並變色

1、效果 2、代碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>正則替換內容並變色</title> </head> <body> <

原创 [vue] 實現多條件篩選

大體效果圖是這樣的: ​​ 一、涉及的知識點: vue 組件化開發,不懂的可以參考vue 組件基礎 ==》https://cn.vuejs.org/v2/guide/components.html es6 promise 模擬

原创 [vue] 中使用promise、gennerator、async/await

注:json格式請參考圖片上格式。 一、代碼 Promise封裝axios promiseAxios(url, method = 'get', data = {}) { return new Promise((resolve,

原创 [vue]超簡單錨點平滑滾動demo

1、效果圖 2、代碼(過於簡單,就不多解釋了),直接複製即可運行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue錨點平滑滾動</t

原创 [vue] props傳值,子組件直接改變父組件的值

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態,從而導致你的應用的數據流向難以理解。 2.實

原创 [vue] input點擊獲取焦點時,選中當前input文字,方便輸入

效果圖 說明:兼容性未測試 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>input獲取焦點選中文字</title> <script

原创 [vue] 購物車界面模板效果

1、效果圖如下: 2、代碼.vue文件: 使用的 ui 框架 vant 2.1 組件: <template> <div class="cart flex flex-col"> <div class="flex-a

原创 [element-ui] 表格在 `flex` 時實現自適應

1、最外層設置彈性盒子佈局(爲什麼這麼使用?當你表格有合計show-summary、summary-method時,數據少,又想合計跟在表格的後面,這時候,這佈局很管用) <div class="flex flex-col">

原创 vue-cli3.x vue.config.js 跨域配置

//vue.config.js配置 devServer: { open: true, //瀏覽器自動打開頁面 host: "0.0.0.0", //如果是真機測試,就使用這個IP p

原创 [element-ui]的table組件滾動條位置

1.設置table的ref爲tableList 2.設置滾動至頂部 this.$refs.tableList.bodyWrapper.scrollTop =0; 3.設置滾動至底部 this.refs.tableList.body