Vue3.x系列-事件及事件修饰符

1、事件处理

2、v-on:事件.修饰符

stop  等价于js 中的 event.stopPropagation() 阻止事件冒泡

capture 与事件冒泡方向相反,事件捕获由外到内

self 只会触发自己范围内的事件

once 只会触发一次

prevent 等价于js  event.preventDefault() 阻止默认事件发生

passive 执行默认行为

v-on:  可以使用 @ 代替

<button @click="reduce">减少10分</button>

事件中传递参数

 <div id="app">
        <button @click="reduce(100)">减少100</button>
        <button @click="add(100)">增加100分</button>
        <p>总分:{{ num }} 分</p>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
       const vm = Vue.createApp({
            data(){
                return{
                    num:3600
                }
            },
            methods:{
                add:function(change){
                    this.num += change
                },
                reduce:function(change){
                    this.num -= change
                }
            }
       }).mount('#app');
    </script>