ITHome

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

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

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

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

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

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

[IT 鐵人賽] Component 魔術方法 Day 6

8 min read ITHome鐵人賽JavaScriptVueJSVueJS 2.0Vue Component2019
這是關於元件方法的最後一篇，實際上來說，Vue.options 並不能算是很魔術的方法。如果把他歸類為奇技淫巧可能比較適合（政治正確）。由於元件的註冊過程當中，會將相對應的實體放到這個屬性當中，所以，我們就可以利用這個地方來做一些事情。 身為邊緣人，我最喜歡這種邪門歪道了。 -------------------------------------------------------------------------------- App 實體 a.k.k Vue 替身 我們在使用 Vue 的時候，在最後一定是使用 new Vue 之後再 $mount 到某個 DOM 底下。 import

[IT 鐵人賽] Component 魔術方法 Day 5

8 min read VueJSVueJS 2.0JavaScript鐵人賽2019ITHomeVue Component
上一篇提及了 import 與 require 之後，我們現在把重心移到元件本身的一些屬性上面。本次內容將會圍繞在 :is 這一個元件屬性上面，我們來看看這個魔術方法到底可以做到哪些事情。 還有，可以做到什麼程度（燦笑） -------------------------------------------------------------------------------- :is 屬性 這個屬性相當特別，他的目的是，將使用這個屬性的元件替換掉，替換成你所 指定 的 Vue 元件。換句話說，你只要把你的 Vue 元件引入後，甚至可以不需要在父層元件設定 components，就可以使用。