params - 命名的路由，加上参数讓路由建立 url 動態的參數前要加上冒號 ":" let router = new VueRoute...
Path Ranker 是一款檢測 Vue Router 路由的工具，確認網址會進到正確的路由。 第一種方式，可以手動輸入 第二種是用匯入的方式，也只要2個步...
npm 引用 bootstrap $ npm install bootstrap CDN 引用 bootstrap 不需要載入 JQuery 函式庫，減少載入...
箭頭函式和普通函式之間的區別 箭頭函式並沒有自己的 this this 會往上找到最近的函數主體作為物件 this 指向定義時所在的物件，而不是呼叫時所在的物...
為什麼要設定路由呢？ 過去的網頁大多是 Multi Page Application(多頁式應用程式)，一個網頁畫面對應到一個網址，當切換一個網址就換開啟一份...
@load 用在圖片標籤時 image src 有值的时候，才會開始加載 onload 事件是在 src 的資源加載完畢的時候，才會觸發 <img s...
new Vue()：建立Vue實例 export default：輸出模塊 先前建立組件時輸入和輸出組件都是使用 import/export default，從...
Vue Devtools 是一款擴充 Chorme 瀏覽器的套件，只需要按照官網上的指示，在瀏覽器上擴充後可以用來檢查組件的資料。 較常利用 Vue Devt...
Axios 是一個 Promise based 的HTTP 請求工具。那 Promise based 是什麼？ Promise 用來解決 JavaScript...
背景 許多網頁時常會加入輪播圖的設計，用來放置活動訊息或是品牌視覺圖片，傳遞資訊及強化品牌形象。因此也有許多輪播圖的套件相繼而出，如：swpier、owl ca...
作法 定義好單一元件 (template+區域樣式)，在畫面內引入元件，並根據需求再做調整如：樣板迴圈 v-for、傳資料回元件。不將資料寫在小元件內，是避免後...
將樣式區分為全域樣式/區域樣式 全域樣式：大多頁面都會共用到的樣式，reset & variable & maxin ...區域樣式：限制在單一...
輸出完 header 元件後，試著在 App.vue 引入 TaiHeader.vue。App.vue* <template> <div i...
為什麼選擇建立 header component 呢？ 網站各個頁面都會共用 固定版型而且不需要傳入動態的資料，不會有傳接資料報錯的問題 開始建立第一個元件...
創建 CLI(command-line interface) 環境前，要先下載 node.js① ⌘ + space 搜尋終端機 terminal.app ②...
在開發Vue專案時，時常會使用binding的技巧，用以動態變更參數的值，如下 <div class="sensorlist_icon&quo...
前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗...
根據TheMealDB API的List all meal categories可看到有很多餐點分類，不過這次用到那麼多分類，所以等下會在data中定義會用到的...
紀錄一下我的作品當中點擊get details按鈕跳出Popup組件，按下叉叉可關閉Popup組件的操作。 父組件MenusDetails.vue <te...
歐歐歐，竟然已經到第29天了，時間真的是咻咻咻就過了呢!明天就要結束了，真是感傷(☍﹏⁰) (解脫了ε٩(๑> ₃ <)۶з)今天跟昨天一樣來講講c...
沃嗚!鐵人倒數3天了，我們離完賽就差一顛點啦，我們今天來講講components吧~繼續gogogo (｢･ω･)｢ Component簡介 Vue compo...
今天是三天連假的第一天，實體上課真的太累了，一不小心睡到下午诶嘿(๑´ڡ`๑)連假過完鐵人也差不多完成了!時間真的過的飛快啊，今天來講講vue的過濾器，雖然在這...
終於~ 來到鐵人賽的最後一天啦今天的工作就是把小專題剩下的功能給完成，為這次的鐵人賽歡呼~ 完賽啦!!! 我的 vue 翻牌配對小遊戲 修改為按下卡牌後只將該卡...
表單輸入綁定 我們可以用v-model指令在表單<input>、<textarea>、<select>元素上建立雙向數據綁定...
免責聲明:最近跟著中了"魷魚遊戲"的毒，哈哈哈這個遊戲，相信大多數的人都有玩過~不過，我們的遊戲沒有大筆獎金，也不需要打打殺殺 XD 所以...
下面來介紹一下，Vue 3 的一些小小魔法(個人覺得很 Magic ~ 哈哈)，有些是補充說明，有些可能會很少使用到，就連官方都有提醒 " 請謹慎使用...
歐歐歐，在今天的文章開始前插播一則消息，今天是我生日耶✧*｡٩(ˊᗜˋ*)و✧*｡生日也要記的來發鐵人，剩下沒幾天了加加油(๑•̀ω•́)ノ歐給!開始吧! 昨天...
說了那麼多，感覺還是有點模糊~ 沒關係，我可能也差不多 ( 哈哈 所以還是透過實作練習，讓自己更了解，看見那更明朗的天空吧 目標 : 透過串接 API 接收取到...
前一篇說到 該怎麼寫 data 的資料，找回雙向綁定機制 !!!這邊先小小的補充一下 XD 在 Options API 我們 data 裡定義到的東西都可以被...
v-on 在Vue.js 中我們可以使用v-on去監聽 DOM 事件，當事件被觸發時會呼叫我們設定的函數或是 JavaScript陳述式做對應的改變。 縮寫:...
iThome鐵人賽
看影片追技術
看更多
Mike
ㄆㄩ
gior__ann