個人總結基本用法,十分鐘學會vue

2021-09-25 21:29:35 字數 2014 閱讀 1388

vue很流行,我覺得得益於它的易用性~廢話不多說,開始表演~(以下為偽**)

「:」 是指令 「v-bind」的縮寫,「@」是指令「v-on」的縮寫;

2.建立基本路由(並做基本判斷):

const router = new router(

]});

router.beforeeach((to, from, next) => else })}

} else

});

3.簡單封裝axios,並作判斷:

import axios from 'axios'

import qs from 'qs'

const service = axios.create()

service.interceptors.request.use(

config =>

}if (localstorage.getitem("test_token"))

return config

},error =>

)service.interceptors.response.use(

response => ,1000)

return res

} else

},error =>

)export default service

4.view層引用自定義元件展示:

5.父子元件間傳值:

1.父元件訪問子元件變數及方法:

(1)使用ref

引用的子元件:

使用方式:

this.$refs.childref.name //訪問子元件變數

this.$refs.childref.say() //訪問子元件方法

(2)使用props:

子元件中宣告props陣列:

props:[childname]

引用的子元件(繫結引數):

name為父元件的引數,進行賦值等操作;

2.子元件訪問父元件變數及方法

(1)使用$parent

直接使用this.$parent.xx即可訪問父元件,和ref類似

(2)使用$emit

首先在父元件中引入子元件並繫結方法:

然後在子元件中使用

this.$emit("childmethod","可帶引數")訪問父類方法parentmethod

6.使用vuex進行全域性狀態變數的統一使用:

import vuex from 'vuex'

import vue from 'vue'

vue.use(vuex);

const store = new vuex.store(

},mutations:

},getters:

},actions:

}});

export default store;

大概意思時:state儲存了乙個全域性變數,getters用來訪問變數,mutations用來處理變數,actions用來執行mutations(並且支援非同步,例如延時執行等);

解決的痛點就是如果引入多個元件,那麼他們如果有共同的狀態也可以認為他們data有共同引數,那麼就可以使用這個vuex進行管理,省略相互傳值;

注意點是getters這裡取出來的是state中的物件,如果取得是物件具體變數,那麼後面展示時候無法做到實時變化;

父元件:}

name:this.$store.state.getuser.name

//如果在以上兩個子元件中都有使用this.$store.state.getuser獲取全域性變數

//那麼執行更改actions時:

change: function () ,

//則父子元件中變數都會發生相應更改

未完待續~

十分鐘學會less

譯者 wleonardo 我們都知道在大型的專案中,當css有數千行 的時候,css的編寫有一些麻煩。我們經常會出現複製相同的 到不同的地方或者通過我們的編輯器來替換所有相同的顏色。這需要我們費很大的力氣去保持css的可維護性。但是其實我們並不是一定要這樣。幸運的是,web開發社群已經解決了這個問題...

十分鐘學會Excel匯出

excel匯出在內網系統一般用的很多,一般分為poi和jxl兩種,前者支援excel2003 xls 和excel2007 xlsx 而後者只支援excel2003 xls 所以我們這裡使用poi來做excel 的匯出 我們以匯出員工資訊的資料為例子 第一步 匯入poi的jar包 第二步,在前台寫乙...

課間十分鐘

時間限制 1000 ms 記憶體限制 128 mb 兩人都是數學愛好者,便發明了乙個遊戲。在遊戲開始前,他們先約定乙個正整數n,同時令m 1。遊戲過程中,每個人都可以將m的值擴大2到9中的任意倍數。第乙個使m n的人就是最後的贏家。181818181818和zbt都十分聰明,並且遊戲過程中都使用最佳...