介绍
html 的button元素，使用 onclick 添加点击事件
在vue中，通过 v-on 指令监听事件
点击事件：<input type="button" v-on:click="modify" >
缩写
v-on:缩写成 @
例子：
<input type="button" @click="modify" value="切换（缩写）">
简单例子
<div id="app">
<input type="button" v-on:click="show" value="弹出对话框">
<input type="button" @click="show" value="弹出对话框2">
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
books: []
}
},
methods:{ // 在 methods 对象中定义方法
show:function(){
alert("点击事件")
}
}
}).mount('#app')
</script>
事件对象例子
方法的第一个参数，是 事件对象，通过该事件对象，可以获得 发出事件的控件对象
<div id="app">
<input type="button" v-on:click="show" value="弹出对话框">
<input type="button" @click="show" value="弹出对话框2">
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
books: []
}
},
methods:{ // 在 methods 对象中定义方法
show:function(event){//第一个参数是事件对象
console.log(event)
console.log(event.target)// 获取发出事件的控件对象
event.target.value='修改名字' // 修改按钮名字
}
}
}).mount('#app')
</script>
参数例子
控件传递参数时，需要传参 $event，表示传递 事件对象
<div id="app">
只传参：<input type="button" v-on:click="show('hello 李雷')" value="弹出对话框"><br>
传事件对象和参数：<input type="button" @click="show2($event,'hello 韩梅梅')" value="弹出对话框2">
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
books: []
}
},
methods:{ // 在 methods 对象中定义方法
show:function(msg){//第一个参数是事件对象
alert(msg)
},
show2:function(event,msg){//第一个参数是事件对象
console.log(event)
console.log(event.target.value)
event.target.value='修改名字' // 修改按钮名字
alert(msg)
}
}
}).mount('#app')
</script>
切换按钮例子
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<a v-bind:href="url">{{name}}</a>
<input type="button" v-on:click="modify" value="切换">
<input type="button" @click="modify" value="切换（缩写）">
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
name: "百度",
url: "http://www.baidu.com"
}
},
methods:{ // 在 methods 对象中定义方法
modify:function(){
this.name="马老师"
this.url="http://www.malaoshi.top"
}
}
}).mount('#app')
</script>