原创 Vue main.js 文件中全局組件註冊部分

在 \src\components\index.js 文件中export組件 import HeaderList from './HeaderList' import HeaderMenu from './HeaderMenu' imp

原创 time-formater 時間格式化插件

time-formater 不是 time-format[t]er English 在javascript中顯示日期。 使用方法   npm i -S time-formater   const time = requir

原创 Vue中this.$router.push(參數) 實現頁面跳轉

很多情況下,我們在執行點擊按鈕跳轉頁面之前還會執行一系列方法,這時可以使用 this.$router.push(location) 來修改 url,完成跳轉。 push 後面可以是對象,也可以是字符串: // 字符串 this.$rou

原创 this.$route.path

//獲取當前路由地址 //http://localhost:8002/#/addGoods => addGoods this.$route.path.replace('/','')  

原创 JS 異步編程與Promise async await語法糖

promise 這裏新構建了一個函數readSync包裝了一下,讓它返回一個Promise. //json數據 { "compilerOptions": { "module": "commonjs", "target

原创 第8章 BOM——window對象

8.1window對象 BOM的核心對象是window,它表示瀏覽器的一個實例。既是javascript訪問瀏覽器窗口的一個接口,又是ECMAScript規定的Global對象。這意味着在網頁中定義的任何一個對象、變量和函數,都以wind

原创 6.3繼承

繼承是oo語言中一個概念。許多oo語言都支持兩種繼承方式:接口繼承和實現繼承。ECMAScript只支持實現繼承,而且其實現繼承主要依靠原型鏈來實現的。 6.3.1原型鏈 原型鏈是實現繼承的主要方法。基本思想是利用原型讓一個引用類型繼承另

原创 const {a} = b 是啥意思? es6解構賦值

const {a} = b  相當於:  const a = b.a 栗子1: const  { a , b }  = c   相當於:    const a = c.a const b = c.b  

原创 Vue.extend() 動態創建實例(全局一個對話框或者彈出一條信息)

應用場景:顯示一個對話框或者彈出一條信息 下面我用一個全局提示組件爲例,類似element-ui的message組件爲大家演示一遍如何封裝一個包含操作dom的的全局組件的,步驟主要有3步: 1, 在componenets/Message

原创 Vue的slot-scope的場景

Vue的插槽slot,分爲3種 匿名插槽 具名插槽 作用域插槽 作用域插槽的慨念,文檔卻只有一句描述 有的時候你希望提供的組件帶有一個可從子組件獲取數據的可複用的插槽。 下面是2個父子的vue組件,先解釋一下2個組件做了什麼事情 父組件僅

原创 $route.meta 路由meta 使用

  router/index.js const routes = [ { path: '/', component: login }, { path: '/manage', component: manage,

原创 vuex的使用實例

一:store數據倉庫位置: 二:store/user.js代碼:(僅關於用戶註冊的數據) import Vue from 'vue' export const USER_SIGNIN = 'USER_SIGNIN' //登錄

原创 vue-lazyload 圖片懶加載插件使用

一:安裝 cnpm install vue-lazyload -D 二:main.js入口 引用 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { //參數

原创 開發一個 實時時間轉換指令 v-time

效果: 需求: 1分鐘前,顯示‘剛剛’。 1分鐘前~1個小時,顯示‘xx分鐘前’。 1小時~1天之間,顯示‘xx小時前’。 1天~1個月(31天)之間,顯示‘xx天前’。 大於1個月,顯示‘xx年xx月xx日’。 <div id="a

原创 可從外部關閉的下拉菜單

<div id="app1" v-cloak> <div class="main" v-clickoutside="handleClose"> <button @click="show =!show">點擊顯示下拉菜單</but