Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Vue入門指南
大綱
• Vue.js介紹
• 開發環境
• Component-Based
• SPA
Vue的作者
• 姓名: 尤雨溪(網名: 尤小右)
• 曾任: Google Creative Lab, Meteor
• 現職: 全職開發Vue.js
• 目標:將Vue.js打造為與Angular/React平
起平坐的世界級框架
前端框架現況-Vue/React/Angular
Vue
Angular
React
阿兜仔比較喜歡Vue
各種前端框架的模板程度
Vue.js的定位
• Vue.js 是一款漸進式(Progressive)的
模板框架
• 你不必一開始就使用到所有的外掛
Vue.js是一款怎麼樣的框架
• 符合: 聲明式渲染
• 樣板定義完成之後,由Vue
直接映射成V-DOM Tree
• Watcher追蹤資料異動
• Vue.js 2僅提供單向資料流
Vue.js 2如何響應資料的變化
• Vue.js會將data屬性的物件
轉譯成為getter/setter
• 每個元件都內建watcher
• 元件在被渲染之後,會註冊
到watcher中被監控
• 當資料改變時,會觸發重繪
注意!
• Vue.js是採用非同步的方式重繪
• 這有可能造成開發時,畫面重繪時機
判定出現落差
非同步更新的解決方案
• 藉由在nextTick中註冊方法,處
裡
開發環境
Webpack Babel Vue-Cli
Webpack 2
• 能夠打包各種前端資源,避免了
資源載入順序的管理問題
• Webpack能夠靜態分析Js程式碼
並藉由Tree-Shaking功能僅打包
有用的程式碼部分
• 具非同步載入資源的功能
一個基本的Webpack組態物件
• 基本元素: entry + output
• Entry允許是陣列;其用來指示
Webpack該從哪個檔案作為靜
態分析的入口檔案
• Output指示Webpack打包的成
品路徑資訊
完整的Webpack概觀
• externals: 指示引用外部資源
• module: 註冊所需要的Loader
• resolve: 如何解讀程式碼
• devServer: webpack-dev-server元件的組態
• plugin...
Loader-檔案處理器
• Webpack 2對於組態物件會進行
格式(Schema)的檢查
• 設定loader有其固定的屬性:
• test: 掃描符合的檔案名稱
• loader: 處理器
• options: loader的參數
Babel
• ECMAScript新版本提供許多
好用的特性,但是由於瀏覽器
支援度問題,導致無法適用於
多個瀏覽器
• 使用Babel來將新版本的ES,轉
成較多瀏覽器支援的ES5版本
Babel的組態檔案- .babelrc
• Preset是用來設定轉碼器
• Plugins是用來擴充babel轉譯的
能力
實務上的設定
• presets中設定的是基本的轉譯
器
• Plugins補充了presets中的轉譯
器缺少的功能
• es2015與stage-0是針對es6以及
尚處於草案階段的語法
注意!
• Babel針對的是語法而不是所有的物件
• 需額外安裝babel-pollyfil來補足這一塊
在程式碼中引用
Vue-Cli
• 可以使用Vue-Cli快速產生一個
Vue.js 2專案的骨架
• 有四種範本:
• Simple
• Webpack
• Webpack-Simple
• Browserfy
• Browserfy-Simple
指令: ...
Component-Based
• 每個元件都高度內聚合
• 元件之間相互協作來提供更高
的網頁互動性
元件的事件
• 常用的事件:
• Created : 元件剛創建
• Mounted: 已載入並成為DOM
• beforeDestroy: 卸載DOM前
• 通常會在Mounted套用jQuery-UI等
套件,並在beforeDestroy...
Vue元件的程式碼結構
• 每一個*.vue檔案都是由三者構成:
• Template
• Style
• Script
• 但這三者皆可以採用Include的方式
由外部檔案載入
廣泛的支援
• Template可以選擇Jade…等模板語法
• CSS可以選擇Preprocess: SCSS/Less等
• CSS還能夠考量是否採用模組化
Vue元件如何被編譯
• 將Template中的內容轉譯成AST
• 再將AST轉換成優化後的Render函數
• Render函數被呼叫後建構出
Virtual DOM
• 透過Observe機制來達成綁定
• 最後,編譯成實體DOM並渲染在...
一個Vue程式碼結構
• 僅是一個原生Js物件(Plain Object)
• 常用屬性:
• data: 元件屬性
• computed: 計算型元件屬性
• watch: 監控data/computed
• methods: 元件方法
• ...
元件之間的資訊傳遞
• 扮演Parent的元件利用props
傳遞資訊給Child元件
• Child無法直接傳資料給Parent;
只能藉由Vue的emit方法來間接
傳遞參數,但Parent要用監聽
訊息的方式取得
狀態管理工具 • 當系統越來越大了之後,單靠
Vue原本的資訊傳遞已不足夠
• Vuex是一套類Redux的狀態管理
框架
• Vuex主要的三個元素:
• Action: 酬載更新狀態的參數
• Mutation: 更新狀態物件
• Stat...
程式碼範例
Action檔案內容 Mutation檔案內容 State檔案內容
非同步Ajax-觀念解析
• 對於Ajax處理來說,它有3個重要的事件:
• 實際上會有兩組action;一組是上述的三個事件型action,另一組則
是實際上的ajax action
[成功]
[失敗]
1
2
3
• Ajax呼叫開始
• ...
Ajax版的action程式碼
• 需要定義四個字串給予action
• 除了前述的Ajax三個狀態外,還有
一個是原本作為action方法的名
稱
Ajax版的Mutation程式碼
[成功]
[失敗]
1
2
3
1
2
3
Ajax呼叫開始
Ajax呼叫結束-成功
Ajax呼叫結束-失敗
• 狀態物件中要多加isFetching屬性;
並在Begin中設定為true
• 此屬性可用來標...
Vue-Router
• 欲達成SPA,可使用Vue-Router
• Vue-Router是狀態導向的一款路由
框架
• 與Vuex相同,都是Vue的插件,在整
合上較沒有問題
設定Vue-Router
1
2
4
3
設計元件
設定路由 規劃路由頁面
套用
Vue-Router的參數
模式 匹配路徑 $route.params
/user/:username /user/evan {username: ‘evan’}
/user/:username/post/:post_id /user/evan...
嵌套式路由
• 嵌套式路由的應用非常的廣泛,
很多時候會在條件式顯示頁面
時使用
程式碼控制路由
Router.push(location)
對history添加一筆新資料,當使用者點下瀏覽器的Back
會退回上一個狀態
1) router.push(‘home’) //字串型參數
2) router.push({path:...
具名路由
1
2
樣版
程式碼
• 具名路由帶來的好處是有著更
佳的可讀性
• 配合程式碼使用更佳!
具名檢視
1
2
樣版
路由組態 • 具名檢視帶來更多彈性;讓頁面
有更多的可調整性
SPA的Server端設定
1 Vue-Router預設的Url模式
3 Workaround for 404
2 支援Url-Rewrite的Nginx Docker Images
• HTML5模式可以讓Url更加的好看
• 為了要能夠支援...
路由事件掛勾
[參數說明]
• to: 路由即將移轉的狀態
• from: 路由即將離開的狀態
• next: 此為一個function型別的資料
Next函數的應用:
• next(): 意即進到下一個註冊的事件掛勾
• next(false...
$router屬性
屬性名 資料型別 說明
$route.path String 對應到當前路由,總是被解析為絕對路徑;例: /foo/bar
$route.params Object 包含了動態片段/全匹配片段,若沒有則為null
$rout...
結語
• Vue.js本身是一款漸近式框架,其被戲稱為: Vue全家桶(Vue.js,
Vue-Router, Vuex),可依需求組裝需要的程式庫。
• Vue.js吸收了AngularJs,React的概念和優點,但效能上並不輸給兩者
• ...
Prochain SlideShare
Chargement dans…5
×

Vue

437 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

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在這方面有更深 的著墨

×