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都十分聰明,並且遊戲過程中都使用最佳...