前言
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的迭代器語法，但用起來沒什麼差啦(́◉◞౪◟◉‵)
list：data中的陣列資料，被迭代的對象。
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值對應的內容有修改，重新渲染這一項；否則重用之前的元素。
這跟我們第一天提到的diff有關喔！
💡 在v-if中也可以使用key，一樣的效果：就地復用。
我們把剛才的偽todo-list修改一下並加上index和key看看差別
<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天，加油！(๑•̀ㅂ•́)و✧
