Vue 基础 之 事件处理

1、事件监听

可以用  v-on:click 或者  @click  指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<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 + '!')
   
    }
  }
})

 

 2、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

   <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")
            },,


        }
    })
   

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

 

 

B站链接https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15