一、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',
   }
}


上一篇:VUE学习笔记三:模板语法与指令

下一篇:VUE学习笔记五:计算属性和数据监听