1. 简单v-on
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id = "first"><!--v-on代表监听事件，后面click点击事件可以更换为其他事件--><h2>{{counter}}</h2><!--1，直接对counter操作--><button v-on:click="counter++">+</button><button @click="counter--">-</button><!--2. 进行函数调用: a.函数写法 b.对象自变量函数增强写法--><button @click="add()">+</button><button @click="minus()">-</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let app = new Vue({el:"#first",data:{counter:0},methods:{add:function () {this.counter++;},minus(){this.counter--;}}})
</script>
</body>
</html>
2. v-on事件函数传参问题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id ="first"><!--1. 监听事件且不传参时： （）可以省略--><button @click="btn1Click()">按钮一</button><br><button @click="btn1Click">按钮一</button><br><!--2. 监听事件且传一个参数--><button @click="btn2Click(123)">按钮二</button><br> <!--将123实参赋值给value形参--><button @click="btn2Click()">按钮二</button><br> <!--不给值时，页面为undefined--><button @click="btn2Click">按钮二</button><br><!--Vue默认将浏览器产生的event事件传入： Object：MouseEvent--><!--3. 监听事件，传入两个参数--><button @click="btn3Click('张三','19')">按钮三</button><br><!--传入两个实参--><button @click="btn3Click('张三',$event)">按钮三</button><br><!--传第一个参数，第二个参数手动获取Object：MouseEvent--><button @click="btn3Click()">按钮三</button><br><!--两个参数均不穿，两个undefied--><button @click="btn3Click">按钮三</button><br><!--省略()，则将MouseEvent传给第一个参数，第二个参数为undefied--></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let app = new Vue({el:"#first",data:{},methods:{btn1Click(){console.log("按钮一被点击")},btn2Click(value){console.log("按钮二被点击"+value)},btn3Click(name,age){console.log("按钮三被点击"+name+age)}}})
</script>
</body>
</html>
3. v-on指令部分修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id = "first"><div @click="divClick()"><h2>哈哈哈</h2><!--1. stop修饰符:阻止冒泡--><!--button在div中，点击button，冒泡到div，两个监听同时触发--><button @click.stop="btnClick()">按钮</button></div><!-- 2. prevent修饰符：阻止html中的默认事件--><!--form中的action表明form向何处提交--><form action="baidu"><input type="submit" value="提交" @click.prevent="formClick()"></form><!--3. keyCode,keyAlias: 监听某些特定的按键所对应的事件--><!--keyUp：监听键盘抬起时候调用的方法--><!--任意键的抬起都会引发这个函数--><input type="text" @keyUp="keyClick()"><br><!--只有enter键抬起才会引发函数--><input type="text" @keyUp.enter="keyClick()"><br><!--4. once: 某些按钮调用的函数，第一次点击有反应，后续无--><button @click.once="onlyOnce()">Once按钮</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let app = new Vue({el:"#first",data:{},methods:{btnClick(){console.log("按钮被点击")},divClick(){console.log("div被点击")},formClick(){console.log("form提交前奏")},keyClick(){console.log("键盘松开")},onlyOnce(){console.log("Once按钮")}}})
</script>
</body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
