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