前端火熱的框架層出不窮,作為碼農的我們,依舊需要去學習,去探索新的問題,學習新技術,其實就是為了寫一手好的,自認為是高質量的代碼。今天主要分享一下前端最火的框架vue,也是我比較喜歡的框架。 vue上手可以說是比較輕鬆而且簡單,如果你用過angular,react,你也會很喜歡vue。vue的核心思 ...
前端火熱的框架層出不窮,作為碼農的我們,依舊需要去學習,去探索新的問題,學習新技術,其實就是為了寫一手好的,自認為是高質量的代碼。今天主要分享一下前端最火的框架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的修改。