單向數據流(One-Way Data Flow) 所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組...
創建 CLI(command-line interface) 環境前,要先下載 node.js① ⌘ + space 搜尋終端機 terminal.app ②...
前言 昨天介紹了V-bind用法,今天我們就來介紹v-for吧!本文同步發表於Andy's Blog 參考資料:官網v-for介紹練習檔案 V-for 用途:...
混入(mixin)似乎也是個初學 Vue 比較少被用到的功能,但還是照順序的了解一下。 基礎運用 在模組中如果有重複出現的模組 option 內容,就可以透過...
前言 昨天我們簡單介紹了何謂 Vuex、 Vuex 運作流程以及 Vuex 可以幫我們解決什麼問題。那我們今天就來了解一下Vuex 核心概念該如何使用吧! 開始...
Vue-cli 2 其實我還是比較習慣使用 vue-cli 2,所以這裡多補充一下如何使用 vue-cli 2。在官方文件中有提到,因為 vue-cli 3 和...
這一篇說實在的,現在的我還不能寫出有用的插件,所以這一篇筆記主要也是學習使用別人寫好的插件。 使用插件 Vue.use('PluginName', { //...
前言 今天要介紹的Getter,我們其實可以把它想像成Vue中的computed屬性。OK,那我們就開始吧! Vuex Getter 介紹 使用時機:昨天我們介...
本文同步刊載於Andy's Blog 前言 昨天介紹了props.sync方法,今天我們來介紹另外一種元件的溝通方式。event bus(老司機XD)。 開...
今天練習的主題是用Vue實現列表的展開與隱藏功能會分為兩個範例讓大家做演練 範例一 先將isShow默認為false接著在function內判斷當前的列表是否...
前言 目前已經將元件內容大致上介紹完了,那我們今天就要先來介紹Vue CLI2吧!開始前我們先來認識何謂Vue CLI吧! 什麼是Vue CLI? 基於Webp...
本文同步發表於Andy's Blog 前言 先前我們介紹到元件與元件之間的溝通方式之ㄧ:event bus,可以透過向bus發送事件與訂閱事件來將元件從原本...
Watch 監聽屬性 今天來介紹監聽 watch 的用法,這個可以讓我們監聽某個值,而當這個值有更動的時候,就去執行某些事情,請看下面範例: <!-- 這...
本文同步發表於斜槓女紙部落格:Day4 新手村的探險:專案環境設定和指令(Directives) 嗨!今天終於要打開VSCode準備開始撰寫專案了!先讓大...
本文同步發表於斜槓女紙部落格:Day2 了解你的敵人:Vue.js是什麼? 首先,我大膽假設證,在看文章的你知道JavaScript是什麼東東。 什麼?你...
新增路由路徑 今天要來介紹如何新增路由路徑,並且如何切換頁面,馬上就來看範例吧! src/components/Page.vue //檔案位置 <tem...
本文同步發表於斜槓女紙部落格:Day27 Vue CLI專案實作(一):新增路由路徑及首頁banner 嗨!延續昨天的進度,今天要來試著調整首頁畫面,將原...
這篇是透過網路教學資源自我學習,並將學到的東西做個紀錄主要是在說明各個component中(XXX.vue 獨立分割的component)如何透過Vuex來存...
製作巢狀路由 昨天介紹如何新增路由及路由連結,今天再來更深入一點點,就是製作巢狀路由,在切換元件的時候,如果只想切換部份內容,就可以使用巢狀路由的方式,馬上來看...
在Vue中,如果我們需要綁定屬性就可以用到v-bind,是不是有對這個指令有印象啊,我們在Day 14的時候有大略提到,這幾天再來特別介紹v-bind用在cla...
前一篇說到 該怎麼寫 data 的資料,找回雙向綁定機制 !!!這邊先小小的補充一下 XD 在 Options API 我們 data 裡定義到的東西都可以被...
為什麼要設定路由呢? 過去的網頁大多是 Multi Page Application(多頁式應用程式),一個網頁畫面對應到一個網址,當切換一個網址就換開啟一份...
本文同步發表於Andy's Blog 前言 在介紹slot之前,我們必須先瞭解一個觀念:編譯作用域我們先來看個範例codepen連結 <div id=...
Vue:昨日講述了基本的Route設定後,今天我們再來看看巢狀路由吧! 對於頁面上的切換,是很容易透過Route做到的。但有沒有可能,會需要將頁面某一部分,作為...
上一篇提到了 v-bind 的屬性綁定,今天就來提更多的屬性綁定的方法。 Class 與 Style 的綁定 我們先來看一個範例: <!-- 這是HTML...
建立虛擬屬性-由狀態組合而成 從 文件上面看 計算屬性的結果會被緩存,除非依賴的響應式屬性變化才會重新計算。注意,如果某個依賴(比如非響應式屬性)在該實例範疇...
本文同步發表於斜槓女紙部落格:Day1 前言:頭腦一熱就… 故事是這樣開始的 嗨!我是鍾小呆。靠著自學自修,繼踏入設計坑之後,又邁入前端坑,目前是一個前端...
首先我們要先安裝 Vue RouterVue Router 安裝參考資訊先在終端機輸入 $npm install vue-router --save接著我們就要...
前面有提到屬性綁定,在這裡我來介紹事件綁定及資料綁定,就讓我們開始吧! 事件綁定 v-on 在網頁上,常常會有點擊、輸入資料等的互動事件,而如果你對 JavaS...
上一篇介紹了如何用 CDN 的方式使用 Vue,然後建立一個 Vue 的應用程式,接下來幾天會介紹在 Vue 裡常用的一些語法。 屬性綁定:v-bind 能夠將...