Je code donc je suis là.

0%

在 Vue 所使用到的整個生命週期方法,可以想像成是一齣戲要上演,哪一個主角需要在哪個時候上場、哪個配角需要在哪個時刻退場,都需要有邏輯才可以讓故事產生連貫性與流暢。

Vue 的生命週期方法雖然共有八個,但並不是每個都需要用到,就像在戲裡,有些橋段不出現、配角不出現也不會影響整齣性的故事性。

把 Vue 的生命週期分為三個大階段會比較容易理解:第一階段的「初始化顯示」、第二階段「更新狀態顯示」、第三階段「死亡、銷毀 Vue 實例」,每個階段都有對應的生命週期 callback 方法,這些生命週期的方法也稱為「生命週期鉤子」掛載在不同時期。 Vue 的生命週期比 React 還要複雜一些。

為了避免 this 的混淆,這些生命週期的方法都是回調方法(callback),所以最好一律都寫成箭頭函式,讓 this 直接指向父級。

Read more »

使用 Vue 資料雙向綁定的特性,做表單資料的自動收集。

先去 codepen 看看:Vue.js Form Input Bindings 表單輸入綁定

通常在處理表單的時候,在填完表單時,通常以<from>標籤內的action屬性來傳送,但在 Vue 裡,可以先把<from>的預設submit動作取消,並以監聽的方式(v-on)處理:@submit.prevent(方法)。當我們按下送出表單鍵時,就會去執行handleSubmit這個方法,在方法裡在指定我們希望如何處理表單內的資料就可以了。

表單裡的標籤綁定

主要以v-model來做資料的雙向綁定,達到自動收集填入資料的目的。
表單裡有單純的輸入(text/textarea)、單選項(radio)、複選項(checkbox)和選單(select),實例中我們必須先在data裡初始化我們會用到的值,這些初始值則是對應到 HTML 表單標籤裡的value,例如,如果我們希望預設的radio選項是 female,在data裡的sex初始,給female就可以了,以此類推。

Read more »

事件處理在網頁上的應用非常廣,無論是我們滑鼠移動、按鍵輸入、或是在網頁上點擊某一個區塊,都可以因為這個互動,讓網頁做些事。但在程式裡,其實就是瀏覽者做了某些事(事件監聽)
,然後我們要給出什麼反應(事件觸發),例如,點一下按鍵,我們要程式去做某些事,例如呼叫某支函式要它做些什麼,或者,我們希望能取到瀏覽者所點擊到的值。

Codepen : Vue.js Event Handling 事件處理

Read more »

如何把現有的陣列,在做完過濾後存在另一個新的陣列裡?如何讓頁面即時顯示這個新的陣列列表?要產生新陣列的條件有哪些?原本的陣列、輸入框輸入了什麼資料?只要拿得到這兩個資料,就可產生新的過濾後的陣列。

我們來看一下,該如何進行? 或是先來看一下完整的原始碼

輸入框先以v-model綁定資料,這個資料是過濾的條件searchName,需要去實例初始化它。

過濾條件後所產生的新陣列filterPersons則是透過searchNamepersons陣列所計算產生出來的,所以我們需要一個在實例中的計算屬性 computed 的方法,去產生新的陣列filterPersons。這個方法的回傳值即是顯示的結果。

將原本的陣列persons套用filter()方法,再以indexOf()方法,用searchName !== -1ˋ 這個條件去查找的結果,存入新陣列fPersons中。

Read more »

如果要把一個陣列或物件渲染到畫面,在原生的 JS 我們可以用迴圈或 forEach 以遍歷的方式將陣列的資料顯示,如果用 ES6 就可用 for…of 循環語句。
在 Vue 裡要遍歷陣列的方法並不難,只是遍歷陣列和物件的方式稍有不同。
去 codepen 看看效果

以 v-for 遍歷陣列顯示

陣列列表顯示的方法是使用v-for指令,在遍歷的時候語法為<li v-for="(p, index) in persons" :key="index"></li>
在使用v-for時要記得加上:key 讓單筆的屬性有唯一值,這個陣列的唯一值是 index。
在上面的語法範例,可以想成是<li v-for="(單個陣列, index索引值) in 陣列" :key="index唯一索引值"></li>

Read more »

既然是條件式,就一定有選擇,在程式裡,最簡單也最常用的選擇是使用布林值: true 或 false 只能擇一。利用這種二擇一的特性,去執行我們希望程式做的事。

去 codepen 看看效果

在 Vue 裡的條件渲染指令有以下兩種:

v-if 和 v-else 一起用

v-ifv-else 一起用的時候,把條件的屬性放在v-if的標籤屬性裡,如果屬性結果是true就會顯示v-if的內容,如果結果是false就會顯示v-else 的內容,在選染頁面部分,我們會發現,如果是false,就連 HTML 的部分也不會被渲染出。

Read more »

當我們在瀏覽網頁時,透過使用者的輸入或互動,最容易會有變動的就是資料(透過輸入或修改)和樣式(透過互動或事件)的更動,而 VueJs 的樣式部分用 class 和 style 的綁定,就是專門用來與互動產生動態的樣式而來的。

去 codepen 看看效果

Binding HTML Classes / 綁定 HTML 裡 Class 的方法

在 DOM 的節點上使用:class='xxx' xxx 可以是字串、物件或者是陣列型態。
這裡我們先設置了三個樣式分別為ClassAClassBClassC,我們在「xxx 是字元串」這個段落先給它一個基礎樣式ClassC,再綁定myClass,這會對應到 vm 實例裡dataClassA,所以在這一段會有兩個樣式分別是ClassAClassC

Read more »

昨天介紹了 VueJs 裡常用的模板語法,今天就來介紹在我們 new Vue({ })裡面會用到到的 computed(計算屬性)和 watch(監視器)

我們可以先來看一下範例:去 codepen 看看效果

同樣的以 cdn 的方式先引入vue.js

前兩個是「姓」和「名」的輸入框inputFirst Name 和 Last Name,先在實例裡的data初始化他們的值之後,就可以在各別的inputp標籤看到它們顯示出來,現在要來進行將「姓」和「名」合併,且可以透過這些input去直接更改已經初始化的值。

Read more »

VusJs 是個便利的框架,它的便利在於幫我們把一些較複雜的事情都先做好了,據說 Vue 的入門較簡單,單是也是會讓我們將 JS 武功廢掉的框架,還記得有位朋友說,他寫了一陣子 Vue 之後,幾乎 JS 的武功都廢了,聽起來蠻聳動的。所以一定要記住,時不常回來寫原生還是必要的。

這裡記錄一些學習上的筆記和用法,以便將來腦殘可回來補腦。

我們先以 CDN 的方式將 Vue.js 引入就可以用了,記得也要先創建一個 Vue 的實例來用,裡面會有所有控制與資料的部分。
接著,在 HTML 裡將要控制的部分以一個<div>包住,並給予 ID <div id="app">這個 #app就可以以標籤綁定資料的方式,和 Vue 的實例裡的資料做溝通。

Read more »

什麼是物件 Object? 物件可以包山包海。

物件是 JavaScript 中的參考資料型別,它擁有複合的值,可以儲存不同類型的值(value),然後透過 Key 來取值。
Object 也可以看成是屬性的無序列集合,每個屬性都是一對 Key:value。物件除了可以擁有自己的屬性,還可以透過原型物件來繼承屬性。

在 JavaScript 的資料型別裡,除了stringnumberbooleannullundefined之外,其他都是物件型別。
物件以外的型別資料的值是無法修改與不可變的,我們稱為這類的資料型別為「基本型別」,「基本型別」的比較,是以「值」來比較,如果兩個變數的值相等,就會被視為這兩個變數是相等的。

Read more »