vue.js 的 api

//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的数据绑定，DOM从实例的 data 中获取。简写:value="phone"
2. v-on:input="yyy($event)" :事件监听，发生该事件，执行回调函数yyy，函数定义在实例的 methods 中
3. v-model="phone" :value 的双向绑定，其实就是上面2个的组合，语法糖
4. v-model.trim="phone"：.trim 用来去掉首尾空格
5. {{msg}} :文本的双向绑定
6. v-show="isTrue" DOM节点切换display。如果isTrue为真，display为block或原来的值。如果isTrue为假，display为none
7. v-if="isTrue" DOM节点存不存在，如果如果isTrue为真，DOM 存在。如果isTrue为假，DOM不存在
8. v-for="item in Arr" ：遍历对数组Arr，每个参数起名字叫 item,
9. :key="ltem.id"：跟踪每个节点的身份，从而重用和重新排序现有元素，最好加上，用v-bind = key"item.id"，前面是简写。

简写：

v-on:input 简写成 @input