Vue 修饰符 v-on
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>修饰符</title> </head> <body> <div id="app"> <div @click="divClick"> <h1>div 方法 </h1> <!-- // .stop 修饰符 只有被点击的才会触发方法 而这个 div 的 方法不会触发--> <button @click.stop="btnClick">BTN</button> </div> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "Hello" }, methods: { btnClick() { console.log('btnClick') }, divClick() { console.log('divClick') } } }) </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>V-on</title> </head> <body> <div id="app"> <!-- <button @click="btnClick">按钮1</button>--> <!-- <button @click="btnClick()">按钮2</button>--> <!-- 有参数时 --> <button @click="btnClick(456)">按钮3</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "Hello" }, methods: { btnClick (abc) { console.log('btnClick', -- abc) } } }) </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>V-on</title> </head> <body> <div id="app"> <button> <h2 v-on:click="increment">{{counter}}</h2> </button> <button> <h2 v-on:click="decrement">{{counter}}</h2> </button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { counter: 0 }, methods: { increment() { this.counter ++ }, decrement() { this.counter -- } } }) </script> </body> </html>
