JavaScript

[IT 鐵人賽] Component 的溝通方式 Vuex Day 13

我們會把 Vuex 放的比較前面,是因為既然使用了狀態管理機制,那麼,用他來跟各種元件溝通,是比較方便的一件事情。然後,我拖了那麼久才講到元件溝通好像有點奇怪,也是啦,其實我本來就不是很喜歡溝通(欸不對)。 是說,溝通只是 Vuex 附加的好處而已其實。 -------------------------------------------------------------------------------- 元件交換資料 我們之前有提過元件之間的資料交換,也提過 Vuex 的基本應用: * Component 基本入門 Day 2 [https://blog.hinablue.me/2019-ithome-ironman-day-2/] * Vuex 基本入門

[IT 鐵人賽] Router 進階應用 Day 10

聊完了基礎的路由功能後,我們接著來看看關於路由的進階應用方式。你放心,前陣子一直提到的動態元件載入,這邊一樣會出現,所以先給各位打個預防針。不過,如果你真的看膩了什麼動態載入的事情,那麼你想要跳過我也是欣然接受。 何況,進來就進來,出去就出去, 哪有人一直動態載入的啦。 -------------------------------------------------------------------------------- 路由守衛方法( Guards Methods ) > Navigation Guards [https://router.vuejs.org/guide/advanced/navigation-guards.html] 在 Router 當中提供了幾種所謂的路由守衛方法: 其實我覺得叫路由防衛比較好(聽起來超中二的) * beforeEach

[IT 鐵人賽] Router 基本入門 Day 9

聊完狀態管理之後,我們來聊一下前端的路由。最近各大家前端工具都有支援前端路由的功能。而 Vue-Router 是官方推出的。功能上都大同小異,你也可以自己做一個(我最喜歡自己做輪子了)。 如果你做好了記得開源出來~ -------------------------------------------------------------------------------- 前端路由 前端做這件事情應該是 Angular 起了一個頭,畢竟身為 Google 的親生兒子,所以很熱門。其實他並不是什麼很新穎的技術,主要是依靠 HTML5 History API [https://developer.mozilla.org/zh-TW/docs/Web/API/History_

[IT 鐵人賽] Vuex 基本入門 Day 8

在我們要聊元件溝通之前,我們先來聊一下關於 Vuex 這個套件。他是官方推出的狀態管理的工具,官方中文翻譯叫做倉庫(?),也是啦,如果把 store 直接翻譯的話,好像叫倉庫也是挺合理的。 但我覺得好像狀態管理會比較符合事實。 -------------------------------------------------------------------------------- Vuex 如果你是使用 Vue CLI 的話,那就是用 yarn 或 npm 裝一下就好, yarn add vuex # OR npm i vuex 然後在你的 App 裡面,

[IT 鐵人賽] new Vue v.s new Vue Day 7

大家一定會覺得這個標題很奇怪,不就都是 new Vue 嗎?是有什麼差別?對啊,其實都是 Vue 沒錯,但是就像是斯斯有兩種,Vue 也是有好多種不同面向。 是說現在斯斯好像不只兩種了。 -------------------------------------------------------------------------------- new Vue 通常,我們在實作一個 App 的時候,最終我們使用了 new Vue 來將整個 App 綁定在某一個 DOM 的元件上。如果,你綁定一次不夠,想要綁定兩次呢?也不是不可以,