前端火熱的框架層出不窮,作為碼農的我們,依舊需要去學習,去探索新的問題,學習新技術,其實就是為了寫一手好的,自認為是高質量的程式碼。今天主要分享一下前端最火的框架vue,也是我比較喜歡的框架。
vue上手可以說是比較輕鬆而且簡單,如果你用過angular,react,你也會很喜歡vue。vue的核心思想依舊是:構建使用者介面的漸進式框架,關注檢視的變化。這也是為什麼新建的檔案是結構是template script style
vue的使用由很多種,可以直接引入vue.js就可以開啟vue的開發。但是這是初級的使用。在vue官網中推薦vue-cli,這個會幫我們自動引入全家桶開發環境。這裡不做過多的解釋,下面主要分向vue使用的一些經驗,如果有不對的地方,請大神指正。
在任何系統總我們都會涉及到使用者需要登入的驗證才可以去訪問某個頁面,這裡我的做法是藉助vue的router元件,實現我的頁面驗證功能。在面試中,有可能面試官會問到我們有關於使用者的許可權設定。使用者許可權是基於角色的設計的,對於我們而言,就是在不同的使用者訪問我們的系統的時候,你需要根據使用者的不同顯示不同的元件狀態(個人習慣把整個頁面作為模組化,元件化區分);這裡我們將進一步討論元件的使用
在vue中我們常用的元件是父子元件,父子元件可以通過prop,而自元件是用自定義事件,$on(eventName)
監聽事件 ,使用 $emit(eventName)觸發事件 詳細見教程 面試的時候提到這個一定要說到元件的通訊,非元件通訊手段狀態管理。
vue的生命週期有哪些 beforeCreate(建立前),created(建立後),beforeMount(載入前),mounted(載入後),beforeUpdate(更新前),updated(更新後),beforeDestroy(銷燬前),destroyed(銷燬後)。
vue中es6的使用,這裡需要注意下es6語法的一些新特性:比如箭頭函式,變數命名,如果你的簡歷中涉及到es6那麼推薦去看看這個es6特性。這個對於自己的提升可以說是相當大的。對於日後的快速開發,優雅程式碼會比較好。
vuex的掌握需要注意以下幾點:
1.為什麼用vuex?
2.vuex怎麼用
3.vuex的外掛的用法
針對上面這幾點:很多前端入門者,很迷茫,做幾點解釋
1.vue什麼時候用vuex,首先推薦不知道vuex的同學去看看vuex; 1)簡單的單頁面應用不用它2)能用store解決就不用它vuex
2.vuex的使用需要掌握state,getter(接收state),mutations(同步操作,元件中提交this.$store.commit(`xxx`)),action(Action 提交的是 mutation,而不是直接變更狀態。Action 可以包含任意非同步操作。),module(模組化state),其中state是基礎,module是對於state過大時的劃分模組,需要之一名稱空間
3.vuex外掛在外掛中不允許直接修改狀態——類似於元件,只能通過提交 mutation 來觸發變化
最後,vue的學習是要不斷去實踐的,嘗試的,包括腳手架的使用需要自己去掌握,開發環境的可配置化,多個不同環境對應api的修改。