//js
new Vue({
  el: "#id",
  data: {
    phone: "",
    pwd: "",
    msg: "我的信息"
  },
  methods: {
    yyy(e){
        this.phone = e.target.value
    }
  }
})

//html
<input id="xxx" type="tel" v-bind:value="phone" v-on:input="yyy($event)">

Vue 的API

1. v-bind:value="phone" : value的數(shù)據(jù)綁定，DOM從實(shí)例的 data 中獲取。簡(jiǎn)寫(xiě):value="phone"
2. v-on:input="yyy($event)" :事件監(jiān)聽(tīng)，發(fā)生該事件，執(zhí)行回調(diào)函數(shù)yyy，函數(shù)定義在實(shí)例的 methods 中
3. v-model="phone" :value 的雙向綁定，其實(shí)就是上面2個(gè)的組合，語(yǔ)法糖
4. v-model.trim="phone"：.trim 用來(lái)去掉首尾空格
5. {{msg}} :文本的雙向綁定
6. v-show="isTrue" DOM節(jié)點(diǎn)切換display。如果isTrue為真，display為block或原來(lái)的值。如果isTrue為假，display為none
7. v-if="isTrue" DOM節(jié)點(diǎn)存不存在，如果如果isTrue為真，DOM 存在。如果isTrue為假，DOM不存在
8. v-for="item in Arr" ：遍歷對(duì)數(shù)組Arr，每個(gè)參數(shù)起名字叫 item,
9. :key="ltem.id"：跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，最好加上，用v-bind = key"item.id"，前面是簡(jiǎn)寫(xiě)。

簡(jiǎn)寫(xiě)：

v-on:input 簡(jiǎn)寫(xiě)成 @input