Vue事件處理原理及過程詳解

更新時間：2020年03月11日 12:29:06 作者：我太難了008

這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

Vue事件監(jiān)聽的方式貌似違背了關(guān)注點分離(separation of concern)的傳統(tǒng)理念。實際上，所有的Vue.js事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的ViewModel上，它不會導(dǎo)致維護(hù)上的困難，使用v-on有以下好處：

1、掃一眼HTML模板便能輕松定位在JS代碼里對應(yīng)的方法。

2、無須在JS里手動綁定事件，ViewModel代碼可以是非常純粹的邏輯，和DOM完全解耦，更易于測試。

3、當(dāng)一個ViewModel被銷毀時，所有的事件處理器都會自動被刪除，無須擔(dān)心自己如何清理它們。

事件處理步驟

1. 綁定監(jiān)視

2. 事件修飾符

3. 按鍵修飾符

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
<!--列表過濾與排序-->
<div id="demo">
  <h2>綁定監(jiān)聽</h2>
  <button @click="test1">test1</button>
  <button @click="test2(123)">test2</button>
  <button @click="test3">test3</button> <!-- 無參函數(shù)，實際上是傳了$event對象-->
  <button @click="test4(1234,$event)">test4</button>

  <h2>事件修飾符</h2>
  <!--存在事件冒泡的情況-->
  <h3>阻止事件冒泡</h3>
  <div style="width: 200px; height: 200px; background: red" @click="test5">
    <!--@click.stop 停止事件冒泡 -->
    <div style="width: 100px; height: 100px; background: blue" @click.stop="test6"></div>
  </div>

  <br>
  <h3>阻止事件的默認(rèn)行為</h3>
  <a  rel="external nofollow" @click.prevent="test7">去百度</a>


  <br>
  <h2>按鍵修飾符</h2>
  <!-- <input type="text" @keyup="test8">--> <!--原始寫法-->
  <!--<input type="text" @keyup.13="test8">--> <!--13就是enter鍵的keyCode碼-->
  <input type="text" @keyup.enter="test8"/>  <!--直接寫名字-->

</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script>
  new Vue({
    el: "#demo",
    methods: {
      test1(){
        alert('test1');
      },
      test2(number){
        alert(number);
      },
      test3(event){
        alert(event.target.innerHTML);
      },
      test4(number, event){
        alert(number + '----' + event.target.innerHTML);
      },
      test5(){
        alert('out')
      },
      test6(){
        alert('inner')
      },
      test7(){
//        event.preventDefault()  //原生的方式阻止事件的默認(rèn)行為
        alert('點擊，但是通過@click.prevent阻止事件的默認(rèn)行為，不會跳轉(zhuǎn)到百度去了')
      },
      test8(event){
//        原始寫法;
//        if (event.keyCode === 13){ // Enter鍵
//          alert(event.target.value)
//        }
        alert(event.target.value)

      }

    }
  });
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: