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:[],