一、VUE事件绑定

1、基本事件

<a @click="doSomething"></a>
<form v-on:submit.prevent="onSubmit"></form>
<button v-on:click.stop="onSubmit"></button >
<button v-on:keydown.13="onKeyDown"></button >

2、自定义事件

<componentB @my-event="onComaMyEvent"></componentB>
onComaMyEvent (params) {
        console.log("onComaMyEvent"+params);
    }
}

//组件B
<template>
	<div>
		{{hello}}
		<button @click="emitMyEvent">emit</button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				hello: 'i am component b'
			}
		},
		methods: {
			emitMyEvent () {
				this.$emit('my-event',this.hello) //触发自定义事件
			}
		}
	}
</script>

<style>
</style>

二、VUE表单

//输入框  v-model.lazy  v-model.number   v-model.trim 
<input type="text" v-model.number="myValue">{{myValue}}
//单选
<input type="radio" v-model.trim="myBox" value="a">
<input type="radio" v-model="myBox" value="b">
<input type="radio" v-model="myBox" value="c">
//复选
<input type="checkbox" v-model.trim="myBox1" value="a">
<input type="checkbox" v-model="myBox1" value="b">
<input type="checkbox" v-model="myBox1" value="c">
{{myBox}}
//下拉
<select v-model.lazy="selection">
	<option v-for="item in selectOption" :value="item.value">{{item.text}}</option>
</select>
{{selection}}

data () {
    return {
       selectOption:[
            {
            	text:'1',
            	value:'1'
            },
            {
            	text:'2',
            	value:'2'
            }
            ],
        selection:null,
        myBox:[],
        myBox1:[],
        myValue:'123',
    }
}