Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue

428 views

Published on

Introduce Vue.js 2.0 and its family: Vue-Route, Vuex

Published in: Software
  • Be the first to comment

Vue

  1. 1. Vue入門指南
  2. 2. 大綱 • Vue.js介紹 • 開發環境 • Component-Based • SPA
  3. 3. Vue的作者 • 姓名: 尤雨溪(網名: 尤小右) • 曾任: Google Creative Lab, Meteor • 現職: 全職開發Vue.js • 目標:將Vue.js打造為與Angular/React平 起平坐的世界級框架
  4. 4. 前端框架現況-Vue/React/Angular Vue Angular React 阿兜仔比較喜歡Vue
  5. 5. 各種前端框架的模板程度
  6. 6. Vue.js的定位 • Vue.js 是一款漸進式(Progressive)的 模板框架 • 你不必一開始就使用到所有的外掛
  7. 7. Vue.js是一款怎麼樣的框架 • 符合: 聲明式渲染 • 樣板定義完成之後,由Vue 直接映射成V-DOM Tree • Watcher追蹤資料異動 • Vue.js 2僅提供單向資料流
  8. 8. Vue.js 2如何響應資料的變化 • Vue.js會將data屬性的物件 轉譯成為getter/setter • 每個元件都內建watcher • 元件在被渲染之後,會註冊 到watcher中被監控 • 當資料改變時,會觸發重繪
  9. 9. 注意! • Vue.js是採用非同步的方式重繪 • 這有可能造成開發時,畫面重繪時機 判定出現落差
  10. 10. 非同步更新的解決方案 • 藉由在nextTick中註冊方法,處 裡
  11. 11. 開發環境 Webpack Babel Vue-Cli
  12. 12. Webpack 2 • 能夠打包各種前端資源,避免了 資源載入順序的管理問題 • Webpack能夠靜態分析Js程式碼 並藉由Tree-Shaking功能僅打包 有用的程式碼部分 • 具非同步載入資源的功能
  13. 13. 一個基本的Webpack組態物件 • 基本元素: entry + output • Entry允許是陣列;其用來指示 Webpack該從哪個檔案作為靜 態分析的入口檔案 • Output指示Webpack打包的成 品路徑資訊
  14. 14. 完整的Webpack概觀 • externals: 指示引用外部資源 • module: 註冊所需要的Loader • resolve: 如何解讀程式碼 • devServer: webpack-dev-server元件的組態 • plugins: 註冊Webpack的插件 • devtool: webpack-dev-server的運行模式
  15. 15. Loader-檔案處理器 • Webpack 2對於組態物件會進行 格式(Schema)的檢查 • 設定loader有其固定的屬性: • test: 掃描符合的檔案名稱 • loader: 處理器 • options: loader的參數
  16. 16. Babel • ECMAScript新版本提供許多 好用的特性,但是由於瀏覽器 支援度問題,導致無法適用於 多個瀏覽器 • 使用Babel來將新版本的ES,轉 成較多瀏覽器支援的ES5版本
  17. 17. Babel的組態檔案- .babelrc • Preset是用來設定轉碼器 • Plugins是用來擴充babel轉譯的 能力
  18. 18. 實務上的設定 • presets中設定的是基本的轉譯 器 • Plugins補充了presets中的轉譯 器缺少的功能 • es2015與stage-0是針對es6以及 尚處於草案階段的語法
  19. 19. 注意! • Babel針對的是語法而不是所有的物件 • 需額外安裝babel-pollyfil來補足這一塊 在程式碼中引用
  20. 20. Vue-Cli • 可以使用Vue-Cli快速產生一個 Vue.js 2專案的骨架 • 有四種範本: • Simple • Webpack • Webpack-Simple • Browserfy • Browserfy-Simple 指令: vue init [範本] [專案名稱]
  21. 21. Component-Based • 每個元件都高度內聚合 • 元件之間相互協作來提供更高 的網頁互動性
  22. 22. 元件的事件 • 常用的事件: • Created : 元件剛創建 • Mounted: 已載入並成為DOM • beforeDestroy: 卸載DOM前 • 通常會在Mounted套用jQuery-UI等 套件,並在beforeDestroy釋放
  23. 23. Vue元件的程式碼結構 • 每一個*.vue檔案都是由三者構成: • Template • Style • Script • 但這三者皆可以採用Include的方式 由外部檔案載入
  24. 24. 廣泛的支援 • Template可以選擇Jade…等模板語法 • CSS可以選擇Preprocess: SCSS/Less等 • CSS還能夠考量是否採用模組化
  25. 25. Vue元件如何被編譯 • 將Template中的內容轉譯成AST • 再將AST轉換成優化後的Render函數 • Render函數被呼叫後建構出 Virtual DOM • 透過Observe機制來達成綁定 • 最後,編譯成實體DOM並渲染在 頁面上
  26. 26. 一個Vue程式碼結構 • 僅是一個原生Js物件(Plain Object) • 常用屬性: • data: 元件屬性 • computed: 計算型元件屬性 • watch: 監控data/computed • methods: 元件方法 • 事件…
  27. 27. 元件之間的資訊傳遞 • 扮演Parent的元件利用props 傳遞資訊給Child元件 • Child無法直接傳資料給Parent; 只能藉由Vue的emit方法來間接 傳遞參數,但Parent要用監聽 訊息的方式取得
  28. 28. 狀態管理工具 • 當系統越來越大了之後,單靠 Vue原本的資訊傳遞已不足夠 • Vuex是一套類Redux的狀態管理 框架 • Vuex主要的三個元素: • Action: 酬載更新狀態的參數 • Mutation: 更新狀態物件 • State: 狀態物件
  29. 29. 程式碼範例 Action檔案內容 Mutation檔案內容 State檔案內容
  30. 30. 非同步Ajax-觀念解析 • 對於Ajax處理來說,它有3個重要的事件: • 實際上會有兩組action;一組是上述的三個事件型action,另一組則 是實際上的ajax action [成功] [失敗] 1 2 3 • Ajax呼叫開始 • Ajax呼叫結束-失敗 • Ajax呼叫結束-成功
  31. 31. Ajax版的action程式碼 • 需要定義四個字串給予action • 除了前述的Ajax三個狀態外,還有 一個是原本作為action方法的名 稱
  32. 32. Ajax版的Mutation程式碼 [成功] [失敗] 1 2 3 1 2 3 Ajax呼叫開始 Ajax呼叫結束-成功 Ajax呼叫結束-失敗 • 狀態物件中要多加isFetching屬性; 並在Begin中設定為true • 此屬性可用來標示Ajax的執行進度
  33. 33. Vue-Router • 欲達成SPA,可使用Vue-Router • Vue-Router是狀態導向的一款路由 框架 • 與Vuex相同,都是Vue的插件,在整 合上較沒有問題
  34. 34. 設定Vue-Router 1 2 4 3 設計元件 設定路由 規劃路由頁面 套用
  35. 35. Vue-Router的參數 模式 匹配路徑 $route.params /user/:username /user/evan {username: ‘evan’} /user/:username/post/:post_id /user/evan/post/123 {username:’evan’, post_id:123} • 接著可以在每個元件中以$router 屬性取得Vue-Router的實體
  36. 36. 嵌套式路由 • 嵌套式路由的應用非常的廣泛, 很多時候會在條件式顯示頁面 時使用
  37. 37. 程式碼控制路由 Router.push(location) 對history添加一筆新資料,當使用者點下瀏覽器的Back 會退回上一個狀態 1) router.push(‘home’) //字串型參數 2) router.push({path:’home’}) //物件 3) router.push({ name:’user’, params: {userId:123}}) //具名路由 4) router.push({ path:’register’, query:{ plan:’private’}}) //攜帶查詢參數 宣告式 程式碼 <router-link :to=“…”> Router.push(…) Router.replace(location) 與router.push很像,不同之處在於它不會添加資料到history 宣告式 程式碼 <router-link :to=“…” replace> Router.push(…) Router.go(n) 向前/後幾步 1) router.go(1) //向前一步 2) router.go(-2) //向後兩步
  38. 38. 具名路由 1 2 樣版 程式碼 • 具名路由帶來的好處是有著更 佳的可讀性 • 配合程式碼使用更佳!
  39. 39. 具名檢視 1 2 樣版 路由組態 • 具名檢視帶來更多彈性;讓頁面 有更多的可調整性
  40. 40. SPA的Server端設定 1 Vue-Router預設的Url模式 3 Workaround for 404 2 支援Url-Rewrite的Nginx Docker Images • HTML5模式可以讓Url更加的好看 • 為了要能夠支援HTML5模式,後端 需要具備Url-Rewrite功能或設定 • 後端設定了之後,便不具有404的 能力,因此,路由組態要補強
  41. 41. 路由事件掛勾 [參數說明] • to: 路由即將移轉的狀態 • from: 路由即將離開的狀態 • next: 此為一個function型別的資料 Next函數的應用: • next(): 意即進到下一個註冊的事件掛勾 • next(false): 中斷目前的導航 • next(“/”) or next({path:”/”}): 跳轉到指定路由 • 允許註冊多個事件掛勾 • 區分: Global/Local;因此,某些元件 可以註冊自己的事件掛勾 • 除了有beforeEach之外,還有 afterEach
  42. 42. $router屬性 屬性名 資料型別 說明 $route.path String 對應到當前路由,總是被解析為絕對路徑;例: /foo/bar $route.params Object 包含了動態片段/全匹配片段,若沒有則為null $route.query Object 為Url的查詢參數。例: /foo?user=1,則$router.query.user == 1 $route.hash String 若路由帶有#,則有值;若無則為null $route.fullPath string 完成解析後的Url,其包含了查詢參數和hash $route.matched Array<RouteRecord> 包含當前路由及其嵌套路徑片段的路由紀錄 $route.name String 定義在路由組態中的name屬性,若無則為null 當Url為/foo/bar, $route.matched即為整個物件
  43. 43. 結語 • Vue.js本身是一款漸近式框架,其被戲稱為: Vue全家桶(Vue.js, Vue-Router, Vuex),可依需求組裝需要的程式庫。 • Vue.js吸收了AngularJs,React的概念和優點,但效能上並不輸給兩者 • Component-Based是未來前端框架的潮流,Vue.js 2在這方面有更深 的著墨

×