Je code donc je suis là.

0%

之前的幾篇都有介紹此表前半段的 Vue 內建指令用法,這裡要介紹最後面的兩個內建指令refv-cloak
先來 codepen 看看:Vue.Js ref 唯一識別 與 v-cloak 隱藏表達式

指令 作用 Vue
v-if 如果為 true, 當前標籤才會輸出到頁面
v-html 更新元素的 innerHTML
v-else 如果為 false, 當前標籤才會輸出到頁面
v-show 通過控制 display 樣式來控制顯示/隱藏
v-for 遍歷陣列/物件
v:text 更新元素的 textContent
v-on 綁定事件監聽, 一般簡寫為@
v-bind 強制綁定解析表達式, 可以省略 v-bind
v-model 雙向資料綁定
ref 為某個元素註冊一個唯一標識, vue 物件通過 $refs 屬性訪問這個元素物件
v-cloak 使用它防止閃現表達式, 與 css 配合: [v-cloak] { display: none }
Read more »

有時我們拿到一包資料,需要透過過濾器來拿到我們想要的資料格式。例如我們可以透過一些外來的函式庫,拿到一些資料,但如果想依照我們想要的格式顯示,就必須過濾我們要的資訊,再依我們用的函式庫規則,寫成想要顯示的格式。

先來 Codepen 看一下效果 Vue.Js Filters 過濾器

什麼是過濾器

過濾器的功能是要對顯示的資料進行特定的格式化後再顯示,且過濾器並不會去改變原本的資料,而是產生一個新的對應的資料格式。

白話一點就是「過濾器」主要的功能是將我們想要的資料,進行格式化。例如我們想要依照我們想要的格式來顯示日期。在程式裡取得的時間是透過從 1970 年 1 月 1 日所開始計算的時間差而來,透過程式拿到的現在時間必須經過一些步驟的運算,才能得到當下點的時間。

Read more »

原本在一般頁面要製造一些簡單的動畫效果,只要掌控 class 和 Css 就好了,但是如果要在框架內做這些動態效果,如何做?

在 Vue 裡有它的特殊做法,必須把享有動態效果的元素,以<transition>的標籤包起來,並給予一個name的屬性,然後在 CSS 裡,以這個name來作為 class 的名稱,並加上動畫不同時期的後綴,來達到動態效果。

先來看一下 Codepen VueJs Transitioning Single Elements/Component 過渡與動畫效果

Read more »

在 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 »