VUE3（三）v-bind和v-on

v-on

基本使用

    <template id="my-app">
        <!-- 完整写法 v-on:监听的事件="methods中的一个方法" -->
        <button v-on:click="btn1Click">按钮1</button>
        <div class="area" v-on:mousemove="mouseMove"></div>
        <!-- 语法糖 -->
        <button @click="btn1Click">按钮1</button>
        <!-- 绑定一个表达式，inline statement -->
        <button @click="counter++">{{counter}}</button>
        <!-- 绑定一个对象 -->
        <div class="area" v-on="{click: btn1Click, mousemove: mouseMove}"></div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world",
                    counter: 100
                }
            },
            methods:{
                btn1Click(){
                    console.log("按钮1发生了点击");
                },
                mouseMove(){
                    console.log("鼠标移动");
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>