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'>addItembutton>
template>


data(){
    return {
        hello: 'I am a child'
    }
}
mehtods{
    addItem(){
        //触发函数有2个参数，事件名称，数据
        this.$emit('111', this.hello)  //这里把上面data的hello变量传过去父组件
    }
}



父组件

<template>
    <com-a @111 = 'addChild'>child  eventcom-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">Onelabel>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Twolabel>
  <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>
Selected: {{ selected }}
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})