Vue3.x系列 基础指令v-on绑定事件

 v-on 用来监听 dom事件

方法是在选项对象 methods 中定义的 是一个对象属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <p>
              <!--1、click事件直接使用 js语句-->
       <button v-on:click="count += 1">Add 1</button>
       <span>count:{{count}}</span>
   </p>
    <p>
              <!--2、click事件直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
              <!--        简写方式-->
        <button @click="greet">Greet</button>
    </p>
    <p>
               <!--3、click事件使用内联语句调用方法-->
        <button v-on:click="say('Hi')">hi</button>
    </p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm  = Vue.createApp({
        data(){
            return {
                count:0,
                message:'hello,Vue.js'
            }
        },
        // 在选项对象的methods属性对象中定义方法
        methods:{
            greet:function(){
                // 方法的this值 始终指向组件实例
                alert(this.message)
            },
            // 对象方法的简写方式
            say(msg){
                alert(msg)
            }
        }
    }).mount("#app");
</script>
</body>
</html>