表單binding

想起之前做的一個案子，要做擬遊戲式的介面體驗，就像我們玩大富翁一樣，有頭像、名字、金錢，名字我想要換上自己取的名字，就可以使用表單binding的做法。
先奉上官網表單輸入綁定。在表單的標籤使用 v-model

v-model

官網是這麼說的：

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

例如：會很神奇的把 check box布林值在更動時自動改變

初始值的注意事項！

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

input/textarea

<input v-model='name'>
<p>尊榮的{{ name }}，您好，初次見面。那麼，我們下次見</p>

剛見面就要下次見到底是要不要見 這裡在input鍵入的字串內容就會顯示在{{ name }}。而這個 name要記得在 data:{}裡面宣告

checkbox/radio/option

<input type='checkbox' id='meow' value='meow' v-model='checkedNames'>
<label for='meow'> meow</label>
<input type='checkbox' id='ah' value='ah' v-model='checkedNames'>
<label for='ah'> ah</label>
<input type='checkbox' id='shake' value='shake' v-model='checkedNames'>
<label for='shake'> shake</label>
<span> 一起{{ checkedNames }}</span>

這裡要記錄多筆的資料了，所以我們將它塞到陣列裡面，在data宣告時要記得給[]

data: {
    checkedNames: []
  }

而radio跟checkbox很相似，input v-model都要綁同一個name，只不過radio是單選，所以宣告時就不用給[]
至於option在html撰寫跟上面兩個相比就簡化很多：

<select v-model='selected'>
    <option>不要這樣子</option>
    <option>不可以這樣</option>
    <option>再這樣我打死你</option>
</select>
<span>讓我對你說聲： {{ selected }}</span>

官網還有很棒的提醒跟用法，像是選項可以寫在data宣告的陣列裡面，再用v-for解決，不用自己寫很多個<option>。還有我們常會看到'請選擇'的選項，但它並沒有值，選它沒有意義，官網也有提到如何避免 user 手賤 誤選

components

官網组件基础
這讓我們在html可以直接使用標籤，就像h1,div,p...，不過這可以幹嘛呢？它有各自獨立的特性(其餘日後還會再介紹)，直接舉個例子：哦！撿到財神爺的帽子鬍鬚組，功能可以增加指定玩家的金錢，所以我要讓盟友金背背+$3000，我自己+$10000。
照以上敘述，我會寫兩個變數並給兩個各自的按鈕讓它生錢，如果盟友很多的話呢？components讓我們事半功倍～

<div id="i-love-money-component">
  <money-counter></money-counter>
  <money-counter></money-counter>
</div>

Vue.component('money-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">gain $ {{ count }}.</button>'
})

我們要注意到： 要得到這麼多錢會先點到天荒地老 這裡的data裡面塞的必須是function，並用return提供資料呈現。如果沒遵從這條規則，財神爺帽子就變成只是均富卡了(像這樣)，大家一起得到相等數量的錢，只點選一個按鈕，影響全部。我照顧隊友但還是要搶下第一名啊！
還有！！！template裡面只能有一個根元素，如果寫這樣會報錯(Component template should contain exactly one root element)：

template: `<img :src="imgUrl"  class="img-fluid" alt="" />
              <p>{{ title }}</p>`

更正方法很容易，在外面包一個<div>就可以組成只有一個根元素了

Vue一下 12日：就在記憶裡畫一個X～ x-template
Vue一下 13日：傳遞資料的跳台 props

小結

今天就先寫到這邊，我認為input v-model就是MVVM很好的範例，MVC,MVVM,MVP...相關的資訊很多，要理解透徹也不容易，會是相當大的篇幅，所以就不附上參閱文了，可以自己google以上關鍵字。照這樣進度30天看的完影片但會講不完，不過初參賽能完賽應該就是很厲害了，而且有越來越脫離侵權的感覺(因為改拿了很多官網的東西來用)，那麼明天見囉～