Vue——事件绑定

事件绑定

方法

v-on 

可以简写成@

使用

两种方式

内联       直接把js写在标签上调用方法    调用methods里定义的方法

事件修饰符

.stop       阻止单击事件冒泡.prevent    提交事件不再重载页面.capture    使用事件捕获模式.self       当事件在该元素本身 (比如不是子元素) 触发时触发回调.once

<!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form>

自定义事件

方法

 $on()    监听事件 $emit()  触发事件

思路

子组件（执行事件绑定）

1.  template标签内定义v-on事件，调用一个事件函数2. methods里面设置事件函数，使用$emit( )触发事件（假设事件名叫做111）

父组件（执行事件监听）

1. 引入子组件   （import 自定义名字 from 子组件路径）2. 创建components: {自定义名字} 3. tetemplate内定义v-on事件（<自定义名字 @111 = "事件函数"></自定义名字>4. methods内，设置事件函数，使用 $on( )监听事件

实例

子组件<template>    <button @click = 'addItem'>addItem</button></template>data(){    return {        hello: 'I am a child'    }}mehtods{    addItem(){        //触发函数有2个参数，事件名称，数据        this.$emit('111', this.hello)  //这里把上面data的hello变量传过去父组件    }}父组件<template>    <com-a @111 = 'addChild'>child  event</com-a></template><script>    import comA from '路径'    export default {        components: { comA }    }    methods: {        // 参数是子组件传过来的数据        addChild(childData){            console.log('我在父组件，接收子组件的参数' + childData )        }    }</script>

表单事件绑定

方法

v-model

修饰符

.lazy     在 change 事件中同步.number   自动将输入值转为Number类型，如果转换不了，返回原值.trim     忽略空格

实例

文本

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

单选按钮

<div id="example-4">  <input type="radio" id="one" value="One" v-model="picked">  <label for="one">One</label>  <br>  <input type="radio" id="two" value="Two" v-model="picked">  <label for="two">Two</label>  <br>  <span>Picked: {{ picked }}</span></div>new Vue({  el: '#example-4',  data: {    picked: ''  }})

选择列表

动态

select v-model="selected">  <option v-for="option in options" v-bind:value="option.value">    {{ option.text }}  </option></select><span>Selected: {{ selected }}</span>new Vue({  el: '...',  data: {    selected: 'A',    options: [      { text: 'One', value: 'A' },      { text: 'Two', value: 'B' },      { text: 'Three', value: 'C' }    ]  }})