Vue 資料與畫面同步的概念很簡單。 data 更新、UI隨之更新； 反過來，使用者輸入更改UI上的數值， data 得跟著更新。 回顧前面介紹過的兩種 directivev-bind 做 單向綁...
昨天我們做了一個登入頁面，可是使用者還是可以任意轉跳到其他頁面，今天我們要讓其它頁面加上驗證項目，讓登入頁面變成我們的大門。 今天目標： 設定 router 驗證。 如果 token 不存在，請轉...
前面做了幾個範例，今天我們來做一個登入頁面，試試看 vue-router 轉跳頁面以及 vuex 如何驗證搭配 Promise 使用。 今天目標： 新增 login page 預設顯示 login...
計算屬性 具有什麼特性？ 當我們定義一個 computed，其相依 data 一變，computed 也會隨之更新。 以一個會員資料頁面為例，他可能會需要不同的姓名顯示方式(姓與名不變，但呈現不同)。...
雖然前一回Cue到 計算屬性(Computed)，照理說該它出場了。但在這之前，先介紹相對好懂的 Watch。 若寫過 AngularJS，應該覺得非常親切。 Watch 是什麼？ 回想一開始寫網頁，...
今天目標： 加上地區搜尋。 加上關鍵字搜尋。 HTML select option 下拉式選單 在下拉式選單中 select tag 上使用 v-model option 的選擇將會是 mod...
這篇本來要加入 樣板(Template) 常用功能的說明文，想到要說明 1.x 到2.x 的寫法轉變，獨立出來會比較好。 過濾器(Filter) 像濾網，用來過篩資料，濾出的東西隨濾網形狀而定，小湯圓...
open 1999 高雄市政府資料開放系統提供派工通報資料。 一次可以 get 600 筆資料， 資料內容滿豐富的，從停水停電到空氣污染等..， 主要是看到高雄防災通，覺得滿好玩的，所以拿這個 AP...
延續上一篇介紹 Template 常用寫法，這篇將說明如何顯示多筆資料。 v-for 即一般常見的 for 迴圈，用來處理 陣列 不過小菜一碟。 <ul id="repeatArray...
之前的範例，我們都是直接在 vuex 的 state 中把資料設計好， 然後練習 vuex 的流程與操作。 在專案中，資料的部分可能是向後端 server 取得， 接下來我們會使用 ajax 介接 A...