Downloaded 29 times
![Vue-Cli
• 可以使用Vue-Cli快速產生一個
Vue.js 2專案的骨架
• 有四種範本:
• Simple
• Webpack
• Webpack-Simple
• Browserfy
• Browserfy-Simple
指令: vue init [範本] [專案名稱]](https://image.slidesharecdn.com/vue-170218033026/75/Vue-20-2048.jpg)
![非同步Ajax-觀念解析
• 對於Ajax處理來說,它有3個重要的事件:
• 實際上會有兩組action;一組是上述的三個事件型action,另一組則
是實際上的ajax action
[成功]
[失敗]
1
2
3
• Ajax呼叫開始
• Ajax呼叫結束-失敗
• Ajax呼叫結束-成功](https://image.slidesharecdn.com/vue-170218033026/75/Vue-30-2048.jpg)
![Ajax版的Mutation程式碼
[成功]
[失敗]
1
2
3
1
2
3
Ajax呼叫開始
Ajax呼叫結束-成功
Ajax呼叫結束-失敗
• 狀態物件中要多加isFetching屬性;
並在Begin中設定為true
• 此屬性可用來標示Ajax的執行進度](https://image.slidesharecdn.com/vue-170218033026/75/Vue-32-2048.jpg)
![路由事件掛勾
[參數說明]
• to: 路由即將移轉的狀態
• from: 路由即將離開的狀態
• next: 此為一個function型別的資料
Next函數的應用:
• next(): 意即進到下一個註冊的事件掛勾
• next(false): 中斷目前的導航
• next(“/”) or next({path:”/”}): 跳轉到指定路由
• 允許註冊多個事件掛勾
• 區分: Global/Local;因此,某些元件
可以註冊自己的事件掛勾
• 除了有beforeEach之外,還有
afterEach](https://image.slidesharecdn.com/vue-170218033026/75/Vue-41-2048.jpg)
Uploaded by國昭 張
Vue
文档介绍了Vue.js的基础知识，包括其开发环境、组件化结构和单页应用程序（SPA）的特性。重点内容包括Vue.js的反应式数据处理、Webpack的配置与使用、Vue-CLI的项目生成方法以及Vuex状态管理和Vue-router的路由管理。此外，文档强调了Vue.js作为一个渐进式框架的灵活性，以及其与其他前端框架（如Angular和React）的比较。
More Related Content
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=640&height=640&fit=bounds)
Vue
- 1.
- 2. 大綱 • Vue.js介紹 • 開發環境 •Component-Based • SPA
- 3. Vue的作者 • 姓名: 尤雨溪(網名:尤小右) • 曾任: Google Creative Lab, Meteor • 現職: 全職開發Vue.js • 目標:將Vue.js打造為與Angular/React平 起平坐的世界級框架
- 4.
- 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中被監控 • 當資料改變時,會觸發重繪
- 9.
- 10.
- 11.
- 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的參數
- 16.
- 17. Babel的組態檔案- .babelrc • Preset是用來設定轉碼器 •Plugins是用來擴充babel轉譯的 能力
- 18. 實務上的設定 • presets中設定的是基本的轉譯 器 • Plugins補充了presets中的轉譯 器缺少的功能 •es2015與stage-0是針對es6以及 尚處於草案階段的語法
- 19.
- 20. Vue-Cli • 可以使用Vue-Cli快速產生一個 Vue.js 2專案的骨架 •有四種範本: • Simple • Webpack • Webpack-Simple • Browserfy • Browserfy-Simple 指令: vue init [範本] [專案名稱]
- 21.
- 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: 元件方法 • 事件…
- 27.
- 28. 狀態管理工具 • 當系統越來越大了之後,單靠 Vue原本的資訊傳遞已不足夠 •Vuex是一套類Redux的狀態管理 框架 • Vuex主要的三個元素: • Action: 酬載更新狀態的參數 • Mutation: 更新狀態物件 • State: 狀態物件
- 29.
- 30. 非同步Ajax-觀念解析 • 對於Ajax處理來說,它有3個重要的事件: • 實際上會有兩組action;一組是上述的三個事件型action,另一組則 是實際上的ajaxaction [成功] [失敗] 1 2 3 • Ajax呼叫開始 • Ajax呼叫結束-失敗 • Ajax呼叫結束-成功
- 31.
- 32.
- 33. Vue-Router • 欲達成SPA,可使用Vue-Router • Vue-Router是狀態導向的一款路由 框架 •與Vuex相同,都是Vue的插件,在整 合上較沒有問題
- 34.
- 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.
- 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.
- 39.
- 40. SPA的Server端設定 1 Vue-Router預設的Url模式 3 Workaroundfor 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.pathString 對應到當前路由,總是被解析為絕對路徑;例: /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在這方面有更深 的著墨