Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Vue
Similar a Vue (20)
Más de 國昭 張
Más de 國昭 張 (18)
Vue
- 1. Vue入門指南
- 2. 大綱 • Vue.js介紹 • 開發環境 • Component-Based • SPA
- 3. Vue的作者 • 姓名: 尤雨溪(網名: 尤小右) • 曾任: Google Creative Lab, Meteor • 現職: 全職開發Vue.js • 目標:將Vue.js打造為與Angular/React平 起平坐的世界級框架
- 5. 各種前端框架的模板程度
- 6. Vue.js的定位 • Vue.js 是一款漸進式(Progressive)的 模板框架 • 你不必一開始就使用到所有的外掛
- 7. Vue.js是一款怎麼樣的框架 • 符合: 聲明式渲染 • 樣板定義完成之後,由Vue 直接映射成V-DOM Tree • Watcher追蹤資料異動 • Vue.js 2僅提供單向資料流
- 8. Vue.js 2如何響應資料的變化 • Vue.js會將data屬性的物件 轉譯成為getter/setter • 每個元件都內建watcher • 元件在被渲染之後,會註冊 到watcher中被監控 • 當資料改變時,會觸發重繪
- 12. Webpack 2 • 能夠打包各種前端資源,避免了 資源載入順序的管理問題 • Webpack能夠靜態分析Js程式碼 並藉由Tree-Shaking功能僅打包 有用的程式碼部分 • 具非同步載入資源的功能
- 13. 一個基本的Webpack組態物件 • 基本元素: entry + output • Entry允許是陣列;其用來指示 Webpack該從哪個檔案作為靜 態分析的入口檔案 • Output指示Webpack打包的成 品路徑資訊
- 14. 完整的Webpack概觀 • externals: 指示引用外部資源 • module: 註冊所需要的Loader • resolve: 如何解讀程式碼 • devServer: webpack-dev-server元件的組態 • plugins: 註冊Webpack的插件 • devtool: webpack-dev-server的運行模式
- 15. Loader-檔案處理器 • Webpack 2對於組態物件會進行 格式(Schema)的檢查 • 設定loader有其固定的屬性: • test: 掃描符合的檔案名稱 • loader: 處理器 • options: loader的參數
- 17. Babel的組態檔案- .babelrc • Preset是用來設定轉碼器 • Plugins是用來擴充babel轉譯的 能力
- 18. 實務上的設定 • presets中設定的是基本的轉譯 器 • Plugins補充了presets中的轉譯 器缺少的功能 • es2015與stage-0是針對es6以及 尚處於草案階段的語法
- 20. Vue-Cli • 可以使用Vue-Cli快速產生一個 Vue.js 2專案的骨架 • 有四種範本: • Simple • Webpack • Webpack-Simple • Browserfy • Browserfy-Simple 指令: vue init [範本] [專案名稱]
- 22. 元件的事件 • 常用的事件: • Created : 元件剛創建 • Mounted: 已載入並成為DOM • beforeDestroy: 卸載DOM前 • 通常會在Mounted套用jQuery-UI等 套件,並在beforeDestroy釋放
- 23. Vue元件的程式碼結構 • 每一個*.vue檔案都是由三者構成: • Template • Style • Script • 但這三者皆可以採用Include的方式 由外部檔案載入
- 24. 廣泛的支援 • Template可以選擇Jade…等模板語法 • CSS可以選擇Preprocess: SCSS/Less等 • CSS還能夠考量是否採用模組化
- 25. Vue元件如何被編譯 • 將Template中的內容轉譯成AST • 再將AST轉換成優化後的Render函數 • Render函數被呼叫後建構出 Virtual DOM • 透過Observe機制來達成綁定 • 最後,編譯成實體DOM並渲染在 頁面上
- 26. 一個Vue程式碼結構 • 僅是一個原生Js物件(Plain Object) • 常用屬性: • data: 元件屬性 • computed: 計算型元件屬性 • watch: 監控data/computed • methods: 元件方法 • 事件…
- 28. 狀態管理工具 • 當系統越來越大了之後,單靠 Vue原本的資訊傳遞已不足夠 • Vuex是一套類Redux的狀態管理 框架 • Vuex主要的三個元素: • Action: 酬載更新狀態的參數 • Mutation: 更新狀態物件 • State: 狀態物件
- 30. 非同步Ajax-觀念解析 • 對於Ajax處理來說,它有3個重要的事件: • 實際上會有兩組action;一組是上述的三個事件型action,另一組則 是實際上的ajax action [成功] [失敗] 1 2 3 • Ajax呼叫開始 • Ajax呼叫結束-失敗 • Ajax呼叫結束-成功
- 33. Vue-Router • 欲達成SPA,可使用Vue-Router • Vue-Router是狀態導向的一款路由 框架 • 與Vuex相同,都是Vue的插件,在整 合上較沒有問題
- 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的實體
- 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) //向後兩步
- 40. SPA的Server端設定 1 Vue-Router預設的Url模式 3 Workaround for 404 2 支援Url-Rewrite的Nginx Docker Images • HTML5模式可以讓Url更加的好看 • 為了要能夠支援HTML5模式,後端 需要具備Url-Rewrite功能或設定 • 後端設定了之後,便不具有404的 能力,因此,路由組態要補強
- 41. 路由事件掛勾 [參數說明] • to: 路由即將移轉的狀態 • from: 路由即將離開的狀態 • next: 此為一個function型別的資料 Next函數的應用: • next(): 意即進到下一個註冊的事件掛勾 • next(false): 中斷目前的導航 • next(“/”) or next({path:”/”}): 跳轉到指定路由 • 允許註冊多個事件掛勾 • 區分: Global/Local;因此,某些元件 可以註冊自己的事件掛勾 • 除了有beforeEach之外,還有 afterEach
- 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. 結語 • Vue.js本身是一款漸近式框架,其被戲稱為: Vue全家桶(Vue.js, Vue-Router, Vuex),可依需求組裝需要的程式庫。 • Vue.js吸收了AngularJs,React的概念和優點,但效能上並不輸給兩者 • Component-Based是未來前端框架的潮流,Vue.js 2在這方面有更深 的著墨