前言這禮拜被這兩個搞得暈頭轉向，因為是有樣學樣，不是扎實的學術派，所以一開始我只會到處watch，但在向別人提問後，不只1人說你這應該用computed比較好...
Vue：資料改變，除了利用method或computed，還有getter。 Getter好處是當資料集中管理，部分組件或元件需要用到不同資料下，可提供相對應的...
綜合了前面所講的，來稍微整理一下 Vue 的常用語法:首先我們一樣先寫好 Vue 的相關資料，如下: <script> var app = new...
Vue：既然知道了初步的概念，首先我們來看看v-bind屬性綁定吧： v-vind綁定class，如下： <body> <div...
本篇開箱的是Swiper一個流行的、功能強大的插件庫，用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...
前面幾篇講到了元件，並介紹元件之間由外而內資料傳遞的屬性 props 還有由內而外傳遞的事件 emit元件也不只可以重複的讓我們來做使用，如果今天一個元件我們只...
Path Ranker 是一款檢測 Vue Router 路由的工具，確認網址會進到正確的路由。 第一種方式，可以手動輸入 第二種是用匯入的方式，也只要2個步...
接下來要來介紹，如何綁定事件，以 click 事件來舉例: <div id="app"> <input type=&q...
如果我們想要在 App.vue 執行兩個 <router-view> 是否可行 ?答案是可以的 我們先到 App.vue 在原先的 <rout...
讓我們接續昨天的模板語法介紹吧，昨天講了v-once跟v-html，今天來說說屬性跟JavaScript 表達式! Attribute Mustache語法不能...
根據TheMealDB API的List all meal categories可看到有很多餐點分類，不過這次用到那麼多分類，所以等下會在data中定義會用到的...
我們在前面講了很長篇幅的元件，那元件可以分為局部註冊跟全域註冊，前面的方式我們都是採用全域註冊，而所謂的全域就是指，當我在新增一個 Vue 的應用程式時，它也可...
歐歐歐，在今天的文章開始前插播一則消息，今天是我生日耶✧*｡٩(ˊᗜˋ*)و✧*｡生日也要記的來發鐵人，剩下沒幾天了加加油(๑•̀ω•́)ノ歐給!開始吧! 昨天...
這篇要來介紹 v-for 和 v-if 這兩個指令相當於 JavaScript 的 for 迴圈跟 if 判斷式一樣先把 Vue 的基本架構寫出來: <d...
單元測試是甚麼 1.對程式碼做最小單位(每一個邏輯)的測試，確保程式的邏輯不會在維護的過程中出錯2.維護程式碼的品質。 為什麼要單元測試 1.確保在開發的時候不...
與Vue相遇後，一開始其實有點懷疑vue的應用。但使用後，對她越來越著迷，這使我更想了解她。 每當我們使用vue時，有些步驟都會相對應的重複，例如創建Vue、建...
猶如昨日的期待，我很興奮地按照了Vue的指示： 先到node官網下載，下載完成後，立刻安裝2.打開command line並輸入npm install -g...
前幾天我們介紹了如何將vue 物件中的屬性綁定到模板中，我們講到可以直接在模板中插入JavaScript 表達式來做運算，但實際上Vue不建議我們這麼做，若是簡...
在前面提到 v-if 都是搭配 v-for 來做使用，但 v-if 也可以單獨的做使用一樣先給 Vue 的架構和資料: <script> var a...
昨天我們講到了Vue的實體還有實體內會有的一些物件，今天就來用範例看看它內外互相響應的過程吧٩(ˊᗜˋ )و 數據和方法 當Vue實例被創建時，它會將data中...
vue.js2.0後版本推薦使用axios來完成ajax請求為Promise-based HTTP client非同步，可於then後進行操作、catch錯誤處...
蘇
‧
2021-09-25
Vue：接下來透過幾天，我們將把之前學的router、Vuex等，實現在這個專案上面。由上圖首頁，除了基本路由設定(首頁和文章)，將會以組件方式生成文章列表：文...
Instance Lifecycle 生命週期 介紹完怎麼建立Vue instance 後，接著來談論它的生命週期吧。一個 Vue 實體跟我們人類一樣有生老病死...
Event Bus 前面提到了父子元件透過emit & prop進行參數傳遞，當樹狀結構逐漸複雜時，在傳遞上複雜度也越來越高。ex: 兩個子元件互相傳遞...
蘇
‧
2021-09-17
最後一篇文，擠出了一些覺得在開發上容易踩的雷以及要注意的事情 要使用、渲染的變數除了傳遞進入元件的，都需定義於data HTML中不需使用 this...
蘇
‧
2021-09-30
接下來要來介紹 Vue 裡面的 computed(計算)& watch(監聽)computed 的運用上，是我們要返回某個值且顯示到頁面上，會用到的舉個...
Vue：還記得第10天時，我們才剛認識Vue CLI，但你還記得我的介面嗎? 接著，我們試試看這個指令： npm run build 如此，產生的資料即打包嚕...
需要用的頁面上： import Action和 State進來 透過methods調用mapActions 透過computed調用mapState...
Vue：前陣子，我們學到了組件資料的相互傳遞，包含父元件利用props傳遞資料給子元件、子元件利用$emit傳遞給父元件。然而，這些都是單向資料傳遞：對於單一請...
又到了與Vue見面的時候，昨日完成了toDoList後，還想知道Vue有什麼特別的~ Vue：相信你已經開始熟悉Vue的操作，聽你上次說，客戶對於數據上，有很長...
EdwardXiong
Jerry Huang
切版姐姐
ㄆㄩ
iThome鐵人賽
看影片追技術