JavaScript

[VueJS] 重新檢視 lifecycle 與 vue-router

由於遇到了一些 Google reCAPTCHA 的狀況,所以剛好找時間來重新檢視一下 Vue 元件的生命週期這件事。其實也不是 Vue 本身的問題,但是很奇妙的是,我真的就是遇到這種狀況。 剛好複習一下也好。 Lifecycle 首先還是先複習一下官方這張說明圖片, https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 接著回想一下我上次寫過,關於 Vue-Router 外面的那些事情。 然後我們來玩一下排列組合,在這邊只關注 剛進去 元件或是路由的情況, beforeRouteEnter beforeCreate

VueJS

[VUEJS] 關於 Functional Component 的邪門歪道

上一回有提到動態載入的事情,既然提到了動態的元件載入,就不得不提一下 functional component 這個東西。 是說,也沒有太多神奇的地方,只是借用了 React 的東西拿來班門弄斧一下而已。 Functional Component 官方文件 有提到詳細的功能,有興趣的人可以先去看看。基本上他就是一個無狀態、不屬於任何生命週期的一種元件。 用這種元件的好處是什麼? 預先載入其他的元件 預先處理邏輯 官方的範例當中,就是提及使用他依據不同的條件,來載入不同的元件。這一點很有趣,因為我們可以做在 Vue-Route 裡面的事情,就能搬到函式化的元件裡面來做。當然,這麼做也不是沒有缺點,因為對於整個 Router

VueJS

[VueJS] 關於 vue-router 外面的兩三事

最近因為某些需求,所以需要把一些動作放在 Vue 外面,但是由於 Vue 整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到 vue-router 身上,後來發現,很多動作還是會有些意外發生。 我們就來聊一下那些看似合理的 意外! 引言 以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試,如果你不是該版本或以上,請斟酌服用。 Lifecycle 與 Vue-router 2.5 一開始還是要請出官方的圖來打一點預防針, https:

VueJS

[VueJS] vuex 的五十道陰影

不是那個五十道陰影,是說我也還沒看過。只是說,人在江湖跑,哪有不挨刀,總是要挨個幾刀才能算是大哥嘛(是嗎? 所以身為一個專業的菜蟲農夫,偶爾被鋤頭打到腳指頭也是很合理的(欸不對! 最近很流行作弊的表,剛好 vuex 也有一份,如果你沒看過,現在讓你看看(當然不是我整理的,網路上神人很多。 https://vuejs-tips.github.io/vuex-cheatsheet/ 這表沒什麼大毛病,不過這樣的東西其實還是需要對 vuex 有相對程度的瞭解,看起來才會有些用處,不然對於初學者來說,她就只是一個整理得很漂亮的表單而已。 簡介 既然 vuex

VueJS

[VueJS] $watch 藏在原始碼裡的邊緣人

身為一個菜蟲,洗菜的時候抓到很多蟲應該超棒的(欸!只是說,有些蟲實在是很惱人,因為那也不算是蟲,只是個隱藏版的功能。至於為何沒有寫在文件裡?這就只能去問作者了! $watch 的實際狀況與問題 文件裡面有特別寫到 $watch 的額外選項, deep immediate 這個就不多做解釋,可以去看官方文件 https://vuejs.org/v2/api/#vm-watch 我來聊一下關於 $watch 遇到的問題, methods: { ...mapActions(['setTick']) }, computed: { ...mapGetters(['getTick']

VueJS

[VueJS] Vuex 2.0 關於 plugins 的事情

身為一個專業農夫,持續耕耘一些地雷也是一件天經地義的事。不過這也不算是地雷,只是因為需求問題,所以需要一些比較奇技淫巧的處理方法。 不過也沒有很奇技淫巧啦其實。 Vuex Plugins 首先,這裡需要對於 Vuex 有一定的認識,比較基本的就不贅述,請去看文件,有簡體中文可以勉強看看,不然你看英文的也可以。 我們要提的是 Plugins 這一塊, https://vuex.vuejs.org/en/plugins.html 前情提要 我們用 Vuex 當然是希望我們在整個應用程式內,資料盡量都是統一的,但是,如果遇上了非同步傳輸的資料,

VueJS

[VueJS] 官方套件各種雷

首先,我因為不太常用眼藥水,所以,有關於眼睛酸澀流目油等事情,請不要來問我謝謝。至於是不是有這麼多雷,其實我也不太確定,只是我遇到了而已。 如果你沒有,那應該是我眼睛乾澀看錯,假的! 關於 Lifecycle Diagram 舉一個 1.x 的例子來看,先抽離 vue-router 的狀況,實際上在瀏覽器上觸發的狀況大概就是官方的順序(底下先不討論離開畫面的東西, init created beforeCompile compiled attached ready 各別帶出來的 this 則是這樣, VueComponent,

VueJS

[DFP] 如果再給我一次機會,我打死都不用 DFP(沒有誤

我開始使用 DFP 的時候,是還要有 AdSense 的帳號提出申請的年代。然後呢,那時候知道是 Google 用了 DoubleClick(買來的?然後持續演進到今天的 GPT... 如果讓我再選一次,我今天就不會坐在這裡,寫這篇文章了(欸 GPT 的問題點 最常看到的問題,就是廣告顯示不出來,也是最長被討論,也是被討論的歷史最悠久的問題。 GPT 雖然有新版本的 JavaScript,但是問題依舊。 雖然有各種 workaround,但是依舊無法解決顯示問題。 依據新版本的 GPT

VueJS

[VueJS] 大型專案開發 #假的

其實我最近在準備科技農夫的事情,只是說剛好遇到需要開發一點東西,所以順手筆記一下。VueJS 這個東西有 Kuro 這扛霸子持續佈道應該是妥當的,個人只是插花一下而已。 何謂大型專案? 首先必須要認知的一件事情,沒有什麼大型專案,或者人人都是大型專案(欸!只是說,我們在開發的時候,總是會希望有一些事情是能保持該有的彈性的,這個彈性不管專案的大小,勢必是留一點空間給自己的一個作法。 投影片在這裡, http://www.slideshare.net/hinablue/vue-js 公司內訓直播在這裡, https://www.facebook.com/hinablue/videos/10208267619426295/

JavaScript

[VueJS] 工具開發心得

首先可以先看一下 Kuro 的投影片,先瞭解一下 VueJS 的基本運作方式,然後就可以收工了(喂 先求不傷身體 專案 Github 在這裡, https://github.com/hinablue/vuejs-gantt 這是隨意寫的工具,程式碼很亂請當作沒看到,謝謝。 再來講究效果 首先你可以參考任何一個 VueJS 的範例,利用他們的結構來建置你所想要的環境。或者你也可以使用 vue-cli 來安裝,也是挺方便的。 $ vue init webpack my-project