對 vue.js 的初步了解
對 vue.js 的初步了解。
vue.js框架的定位在官網上已經描述得相當明確：漸進式、自底向上的視圖層開發框架，容易，並且方便和其他優質前端庫、工具整合，在它基礎上能構建複雜的 單頁面應用。
在 vue.js 的世界裡，組件是其一等公民。
在五年前大學的 web2.0程序設計的課堂上，首次接觸前端編程，還是以 html 標籤為基本單位，去構建 web 應用，那時看來一個 web 應用就是由一個個 html 標籤組成，表單類的 控制項接受用戶輸入，提交表單，觸發 action，發送到後台，通過操作 dom，來影響前端界面的展示。慢慢學習了一些 mvc 框架，如 django、flask、tornado等，都有對應的視圖層模板引擎，通常是首先設計頁面的 base.html，裡面是網頁的大體布局，有菜單欄、側邊欄、底部欄、主體內容部分，會放置一些公共的東西，如導航菜單、公用的 css 文件、js 文件等，然後其他的視圖界面會繼承這個 base.html，根據後台返回的動態內容渲染主體部分。在這時候，前端開發思想還是以 html 標籤作為基本單位。
前端面向組件化的開發思想，其實由來已久，簡單來說主要解決構建複雜前端應用問題，能夠進行代碼復用，方便維護，當然還有很多其他好處。這個時候，一個前端應用，可以以組件的形式自底向上構建。vue.js 對面向組件開發提供了更好的支持。vue.js 中，組件對 html 標籤進行了擴展，可以讓一個 vue 組件像一個普通的 html 標籤一樣使用，所謂的聲明式渲染組件。vue 定義一個組件有多種方法，這裡只簡單說說單文件組件（single file component）。每個單文件組件，基本的根元素標籤是三個，template、script 和 style。
template 中是 html 標籤元素，提供組件視圖元素，默認編程語言 html，得益於 webpack 技術，可以使用 jade 類似js 模板引擎。
script 中默認編程語言是 es6，定義組件的狀態，組件是有生命周期的，提供了一些生命周期鉤子如 created，可以在組件創建的時候，調用rest 介面，獲取數據，初始化組件狀態。script 中還會定義methods，這些方法可以作為事件處理器，通過 vue 的v-on 指令，綁定到組件或者 html 控制項的事件上，讓 Vue 框架能監聽特定事件，進而觸發調用它。
style 中，定義渲染組件視圖的css 樣式，得益於 webpack 技術，也可以使用sass 之類的 需要預處理的 css 語言。值得一提的是style 可以通過屬性標記 css 是 scoped 的，所謂的 scoped css，局部作用域的 css，也就是說在這裡定義的 scoped css，只對這個組件的 template 中的 html 標籤渲染起作用，不會影響其他組件。它背後的實現實際是 vue-loader 借用PostCSS，對樣式應用進行了轉換。
vue.js 中所有的組件都是是一個 Vue 對象實例。
父子組件間如何進行通信？
vue 推薦的父子組件通信方式是，props down， events up。父組件傳遞數據給子組件，通過 props，如果是在父組件的template中以 聲明方式使用子組件，那麼數據是通過標籤屬性的形式傳遞。子組件與父組件通信，通過事件，子組件 emit 事件類型，事件參數，父組件在 template 中通過 v-on 監聽子組件事件，調用相關事件處理器，更新狀態。這兩種通信方式，都為了父子組件能卸耦。
在 spa 應用中，不同的組件間如何切換，那麼 vue-router 就上場了。就如同 mvc 框架裡面的 router 或者 url mapping，組件有 path(相當於 url)，name。就如同參數化的 url，當然也可以有組件的動態 path，組件中可以獲取 router 的動態 path 中的參數，通過這些參數向後台請求動態數據。在 router-link 組件中，一般是通過 router 的 name 進行組件導航切換。
提到 vue，不得不提的，當然是它的數據雙向綁定。雙向綁定是 mvvm (Model-View-ViewModel)模式中的應用。傳統的 前端開發是單向的，數據流向是從 Model 到 View。Vue中提供了 v-model 指令，將一個表單控制項的輸入綁定到一個js 的model 對象上，使得用戶在界面表單的輸入即刻改變 model 的狀態，當然其中省掉了傳統的 js 通過 dom api 獲取表單輸入內容，再設置到對象的api 調用。mvvm 模式有優點，有缺點，深入了解後再寫寫。Vue 對象實例實際充當 ViewModel 的角色。
TAG:Eason的非程序世界 |