Vue——事件绑定

1
2
v-on

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

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

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

1
2
3
4
5
 $on()
监听事件
$emit()
触发事件

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
子组件
<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>

1
2
v-model

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

1
2
3
4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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: ''
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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' }
]
}
})