可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
四、事件监听
v-on 事件监听
<button @click="num += 1">事件</button>
<h1>{{ num }}</h1>
num: 1
methods
所有被调用的方法都放在这里面。
<button @click="show">事件2</button>
methods: {
show() {
alert("我是methods中执行的方法事件")
}
}
注意:调用方法是,不加括号,加括号表示,一打开就执行调用方法。
this
<button @click="change">事件3</button>
change() {
this.flag = ! this.flag;
}
可以用this来索引当前data中的数据。
指向,当前的组建VueComponent
向事件传递参数
五、如何使用一个新组建
- 组建导出可被外部访问
export default {
data() {
return {
users: ["zhangsan","lisi","wangwu'"]
}
}
}
data:初始化数据
在需要的组建中导入该组建
import Events from './components/Events'
绑定该组建
components: { Events }
使用组建
<events></events>
完整代码(Events.vue定义的新组建,在App.vue中使用该组建):
<template>
<div id="app">
<events></events>
</div>
</template>
import Events from './components/Events'
export default {
name: 'App',
components: {
Events
}
}
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Comments