在VUE里面，事件处理，直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。我们需要注意一下：@click和v-on:click是一样，只不过形式不一样，本质是一样的，前者是后者的简写形式。现在我们看下具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="d">
<h1>欢迎来到{{provinceCity}}</h1>
<button v-on:click = "btnGet">请点击按钮将会弹出惊喜！</button>
<button @click = "btnGet1(1,3,4)">请点击按钮将会弹出惊喜！</button>
<button @click = "btnGet2">请点击按钮将会弹出惊喜242433</button>
<button @click = "btnGet3($event,26)">点击方法3</button>
<button @click = "btnGet4">点击方法4</button>
</div>
<script>
Vue.config.productionTip = false;
let str = "湖北省武汉市";
/*
这里注意下，@click和v-on:click是一样，
其中前者是后者的简单形式
*/
const vm = new Vue({
el:'#d',
data:{
provinceCity:str
},
methods:{
btnGet(){
alert("欢迎来到这里，这里将会有惊喜"+str);
},
btnGet1(a,b,c){
console.log(a+","+b+","+c);
},
btnGet2(x,y,z){
//console.log("这是方法2");
/*
这里可以得出一个结论，那就是点击事件的方法没有传入实参，
第一个参数一般默认event,也就是说方法里面默认有一个event，
*/
console.log(x+","+y+","+z);//[object MouseEvent],undefined,undefined
},
btnGet3(event,num){
/*
这里注意下.事件的回调需要配置在methods对象中，最终会在vm上
其中中配置的函数，不要用箭头函数！否则this就不是vm了，
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
*/
console.log(event+"---"+num);//[object MouseEvent]---26
console.log(this);//这里,this指的是vm
},
btnGet4(){
/*
这里通过event调用target来获取button的文本内容，
这里的target指的是button
*/
console.log(event.target.innerText);//点击方法4
}
}
});
console.log(vm);
</script>
</body>
</html>
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
