【Day03】列表渲染 & 表單綁定


前言

Day03 今天內容比較少一點,複習的是列表渲染和表單綁定~
v-for主要是複習key的部分,之前對這塊有概念但不是很了解;
v-model則是熟悉各個應用以及修飾符。


列表渲染

v-for

可以利用v-for將陣列內的值渲染成列表。

<div id="app">
    <ul>
        <li v-for="item in list"> {{ item }} </li>
    </ul>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        list: [
            "item1",
            "item2",
            "item3",
        ],
    }
})


▲ 結果如圖

v-for="item in list"

item:就像一般程式中for(i=1; i<10; i++)i 這種概念,所以可以隨意命名。這裡用來迭代後面接的陣列。

in:作為分隔符,也可以用of更接近JS的迭代器語法,但用起來沒什麼差啦(́◉◞౪◟◉‵)

listdata中的陣列資料,被迭代的對象。

v-for="(item, index) in list"

v-for中也可以加入第二個參數,即索引
索引是指該項在陣列中第幾個元素的意思。(陣列從0開始,所以索引從0開始!)

💡 所有命名都有意義的比較保險,以免未來維護時看不懂。

What is 循環?迭代?遍歷?遞迴?

這幾個詞在程式與語言中都是常出現的詞,能清楚分辨他們的作用嗎?

  • 循環(loop):在滿足條件的情況下,重複執行同一段代碼。比如,while語句。
  • 迭代(iterate):按照某種順序逐個訪問列表中的每一項。比如,for語句。
  • 遍歷(traversal):按照一定的規則訪問樹形結構中的每個節點,而且每個節點都只訪問一次。
  • 遞迴(recursion):一個函數不斷調用自身的行為。像是:河內塔、費波納契數列。
    修改自知乎js 迭代和遍歷有什麼區別?

基本上我們的資料不太可能只有單純的陣列或物件,通常會一起使用。
很多筆資料的集合用陣列包起來;一筆資料裡面有多項內容,要用物件裝~

<li v-for="item of list">代辦:{{ item.todo }} 完成:{{ item.done }}</li>
list: [
    {
        todo: 'feed chihuahua',
        done: false,
    }, 
    {
        todo: 'wash chihuahua',
        done: false,
    }, 
    {
    todo: 'play chihuahua',
    done: true,
    }
]


v-for中的key

v-for默認使用"就地復用"去更新渲染的列表。
列表數據更新時,會根據key值去判斷某個值是否修改:
如果key值對應的內容有修改,重新渲染這一項;否則重用之前的元素。
<small>這跟我們第一天提到的diff有關喔!</small>

💡 在v-if中也可以使用key,一樣的效果:就地復用

我們把剛才的偽todo-list修改一下並加上indexkey看看差別

<li v-for="(item,index) of list" :key="item.id"> index: {{ index }} , {{ item.todo }} , key: {{ item.id }}</li>
list: [
    {
        id:1,
        item: "item1",
    }, 
    {
        id:2,
        item: "item2",
    },  
    {
        id:3,
        item: "item3",
    }, 
]


▲ 結果如上

現在有一筆資料要加入,從底部加進去~

{
    id:4,
    item: "item4",
},


▲ 還是挺正常的

ㄟ~我漏了一條非常重要的項目,得在item2和3之間插入,會變怎樣呢?

發現到了嗎?如果從中間亂入一組資料,index不會把那條插入的變成5,他從頭到尾都是0開始一直按序排列的。(陣列的index不會亂跳啊XD)

上面有提到Vue是根據key就地復用更新列表,
key綁定的是item.id,所以只會重新渲染新增的那項而已~

🤔 如果我們綁定的key是index,試試看推論 "在item2和3之間插入" v-for會怎麼更新呢?

請看上面那兩張圖做比較~

  • index 0 - 原本是"item1",沒變化用原本的。
  • index 1 - 原本是"item2",沒變化用原本的。
  • index 2 - 原本是"item3",現在變成"很重要的那個項目",重新渲染。
  • index 3 - 原本是"item4",現在變成"item3",重新渲染。
  • index 4 - 原本沒東西在這,現在變成"item4",重新渲染。

表單輸入綁定

單向綁定?雙向綁定


▲ Vue的MVVM架構,圖源官網

View:視圖,在<body>裡寫的東西,打開瀏覽器上看到的畫面。
ViewModel:資料繫結器,將View和Model牽在一起的媒人工具。
Model:資料層,就是js資料部分。

這裡只簡單的介紹綁定方式,詳細MVVM可以上網找更多~


單向綁定

將Model的資料綁定到View上面,當Model資料發生變化,View也會更新。
像是之前介紹的mustache插值v-bind

雙向綁定

上面的單向綁定只有Model資料有變化View才更新。
雙向綁定多了從View更動資料,Model的資料也會更新!
這部分Vue用v-model來實現雙向綁定。


v-model

v-model在表單的<input><textarea><select>……等元素上創建雙向綁定。會根據控件類型自動選取正確的方法來更新元素。

⚠️ v-model 會忽略所有表單元素的value、checked……等初始值,必須在data中先給值!

v-model負責監聽用戶的輸入事件以更新資料。本身是個語法糖,舉個例子來說:

<input type="text" v-model="test" />

它原本是

<input  type="text" :value="test" @input="test = $event.target.value" />

這部分拿之前做過的,一次包含滿滿的表單元素ヽ(✿゚▽゚)ノ 欸超懶

其他表單元素可以到官網看範例~

📢 此處參考Alex大大的Vue.js手牽手,一起嗑光全家桶教學,非常的實用易懂・*・:≡( ε:)


v-model修飾符

昨天我們有提到修飾符,v-model也有三個好用的修飾符~
對於表單處理來說非常方便,不用再寫一堆function去處理了!

.lazy
v-model在每次input事件觸發後將輸入框的值與資料進行同步。添加lazy修飾符轉變為使用change事件進行同步:

<input v-model.lazy="msg" />

💡 input?change?

  • 當元素的 value 改變,input 事件都會被觸發
  • change事件僅有當 value 被提交時觸發,如按enter鍵,從select中選擇一個值等。

.number
HTML即使在type="number"時,輸入元素的值也總會返回字符串。
所以我們可以給v-model添加number修飾符,自動將input輸入值轉為數值類型:

<input type="number" v-model.number="amount" />

.trim
過濾用戶輸入的首尾空白字符,可以給v-model添加trim修飾符:

<input v-model.trim="msg" />

小小心得

若觀念或內容有誤請不吝指教,謝謝您( ᐛ)パァ

今天複習的其實不難,
明天的文章考慮把元件和實例交換一下,
到這個段落了,適合做個練習~
元件先寫文章的話我想不到可以把他們怎麼串起來QQQQ

還剩4天,加油!(๑•̀ㅂ•́)و✧


📢參考文章

#javascript #Vue #Web #前端





學習 Vue.js 一段時間了, 會基本的語法,但做一些應用還是要看官方文件... 一邊查著一邊思考這些不是學過了嗎嗚嗚嗚 就跟剛認識的朋友一樣生疏 QQ 所以呢!! 這系列我會利用七天的時間將 Vue 重新、快速的學習! 搭配一些簡單的應用:)

留言討論