<div id="root">
  <button v-on:click="greet">Greet</button>
   <button @click="greet()">Greet</button>
</div>

var vm= new Vue({
  el: '#root',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet(event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
    }
  }
})

<style>  
  ul {
            height: 200px;
            width: 150px;
            background: beige;
            padding: 10px;
            margin: 5px;
            overflow: auto;
        } 
 li {
            height: 70px;
            background: aquamarine;
            margin: 5px;
        }
</style>
  <button @click="clickOne">点击</button>
    <br>
    <button v-on:click="clickOne2">点击2</button>
    <br>  
 <!-- 阻止单击事件继续传播 -->
    <a v-on:click.prevent="doStop" href="https://www.baidu.com">不会跳转到其他网址 </a> <br>
    <a v-on:click.stop="doStop" href="https://www.baidu.com">会跳转到其他网址 </a>
    <br>
    <!-- 提交事件不再重载页面 -->
    <button v-on:submit.prevent="onSubmit">不重载</button>
    <br>
    <div v-on:click="inLink" class="inLink">
        <!-- 修饰符可以串联 -->
        <button v-on:click.prevent="inLink">内联1</button>
        <br>
    </div>
    <div v-on:click="inLink" class="inLink">
        <!-- 修饰符可以串联 -->
        <button v-on:click.stop="inLink">内联2</button>
        <br>
    </div>
    <!-- 只有修饰符 -->
    <button v-on:submit.prevent></button>
    <br>
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">捕获</div>
    <br>
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">指定过滤元素</div>
    <br>
    <!-- 点击事件将只会触发一次 -->
    <button v-on:click.once="once">只会触发一次</button>
    <br>
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <br>
    <ul v-on:scroll="onScroll">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <!--按键修饰符 别名
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    -->
    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <input v-on:keyup.enter="enter()">
    <br>
    <input v-on:keyup.esc="esc()">
    <br>
    <!--系统按键修饰符 别名
    .ctrl
    .alt
    .shift
    .meta  （就是Win键）
    -->
    <!-- Alt + C -->
    <input v-on:keyup.alt.c="cc">
    <br>
    <!-- Ctrl + Click -->
    <input v-on:keydown.ctrl="ctrlKey" >

Vue.config.productionTip = false
    new Vue({
        el: "#root",
        data: {
            name: "你好",
            person: {
                name: "小明"
            }
        }, 
methods: {
            clickOne() {
                alert("点击率")
            },
          clickOne2() {
                alert("点击率2")
            }, doStop() {
                alert("aaaaaaa")
            },
            inLink() {
                alert("inLink")
            },
            once() {
                alert("once")
            },
            onScroll() {
                console.log("滚了@@@@")
            },
            enter() {
                console.log("点击回车")
            },
            esc() {
                console.log("点击esc")
            },
            cc() {
                console.log("点击alt.c")
            },
            ctrlKey() {
                console.log("点击ctrlKey")
            },,
        }
    })