v-on
作用：注册事件=“添加监听+提供逻辑处理”
语法：
① v-on：事件名="内联语句"
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style> </head><body><div id="app"><!-- v-on:click = @click= --><button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100}})</script> </body></html>② v-on：事件名="methods中的函数名"
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style> </head><body><div id="app"><!-- v-on:click = @click= --><button @click="fn">点击切换显示or隐藏</button><h1 v-show="isShow">月薪过万不是问题</h1></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {isShow:true},methods: {fn(){//让提供的所有methods中的函数，this都指向实例=const = app// console.log("触发了点击事件fn方法");this.isShow = !this.isShow} },})</script> </body></html>简写：@事件名
v-on调用传参
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;height: 100px;text-align: center;border: 2px solid #000;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;}</style> </head><body><div id="app"><div class="box"><h3>小白痴售卖机</h3><button @click="buy(20)">卡布奇诺20元</button><button @click="buy(15)">鸭屎香柠檬茶15元</button><button @click="buy(10)">0脂牛奶10元</button></div><p>微信余额：{{money}}元</p></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy(price) {this.money -= price}},})</script> </body></html>
