vue.js的一些事件绑定和表单数据双向绑定

知识点： 
 ??v-on:相当于： 例如：v-on：click==@click ?,menthods事件绑定
 ??v-on修饰符可以指定键盘事件
 ??v-model进行表单数据的双向绑定
 ?


<template>

 ???<p v-for="item in list">{{item.name}} ?{{item.price}}</p>
 ???<button v-on:click="addItem">addItem</button> ?<!--v-on：相当于@-->
 ???<button @click="addItem">addItem</button>

 ??

<input v-on:keydown.enter="onKeydown"/> ???<!--指令的修改器-->
 ???<componeta @my-event="onComponentEvent"></componeta>

 ???<!--<input v-model="myValue" type="text"/>{{myValue}} --> ??<!--v-model文本框的事件绑定，表单的事件绑定---->
 ???<!--<input v-model.lazy="myValue" type="text"/>{{myValue}}--> <!--v-model.lazy延迟显示-->
 ???<!-- <input v-model.number="myValue" type="text"/>{{typeof ?myValue}}--> ?<!--v-model.number将123（string）转化为123（number）-->
 ???<input v-model.trim="myValue" type="text"/> {{myValue}} ?<!--v-model.trim截取字符串前后的空格-->

 ???<hr>
 ???<input v-model="myBox" type="checkbox" value="apple"/> ?<!--v-model多选框的事件绑定-->
 ???<input v-model="myBox" type="checkbox" value="banna"/>
 ???<input v-model="myBox" type="checkbox" value="pineapple"/>
 ???{{myBox}}

 ???<input v-model="myBox1" type="radio" value="apple"/> ?<!--v-model单选框的事件绑定-->
 ???<input v-model="myBox1" type="radio" value="banna"/>
 ???<input v-model="myBox1" type="radio" value="pineapple"/>
 ???{{myBox1}}

 ???<!--v-model下拉框的事件绑定-->
 ???<!--版本一-->
 ??<!-- <select v-model="selection">
 ??????<option value="1">1</option>
 ??????<option value="2">2</option>
 ??????<option value="3">3</option>
 ???</select>
 ???{{selection}}-->

 ???<select v-model="selection"> ??<!--版本二-->
 ?????<option v-for="item in selectOption" v-bind:value="item.value">{{item.text}}</option>

 ???</select>
 ???{{selection}}

 ?</div>
</template>

<!--<script>
export default {
 ?name: ‘app‘
}
</script>-->
<!--导入组件-->
<script>
 ?/* eslint-disable */
 ?import Vue from ‘vue‘
 ?import Hello from ‘./components/Hello‘
 ?import componeta from ‘./components/a.vue‘

export default {
 ??/* name: ‘app‘,
 ???components: {
 ?????Hello
 ???},*/
 ??components:{
 ??????componeta
 ??},
 ???data(){
 ?????return{
 ???????myValue:‘‘,
 ???????myBox:[],
 ???????myBox1:[],

vue.js的一些事件绑定和表单数据双向绑定

原文地址：http://www.cnblogs.com/shuaifing/p/7903780.html