我是靠谱客的博主 悲凉毛豆,这篇文章主要介绍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' } ] } })

最后

以上就是悲凉毛豆最近收集整理的关于Vue——事件绑定的全部内容,更多相关Vue——事件绑定内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(78)

评论列表共有 0 条评论

立即
投稿
返回
顶部