vue各種事件監(jiān)聽實例(小結(jié))

更新時間：2020年06月24日 09:18:15 作者：理想的亡命之徒

這篇文章主要介紹了vue各種事件監(jiān)聽實例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

計算屬性的Get方法和Set方法

看代碼說話:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小練習(xí)</title>
</head>
<body>
  <div id="calc">
    <a v-cloak="">{{name}}</a>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      counter:0
    }
    ,methods:{
    }
    ,computed: {
      name: {
        get: function(){
          console.log("得值");
          return 'AAAa';
        },
        set: function(){
          console.log("設(shè)值");
          
        }
      }
    }

  })

</script>

運行后如下:

可以知道，在計算屬性對象中，里面定義一個name，通過定義name的set和get方法來對其值進行設(shè)置和獲取，name獲得get函數(shù)return的值，name通過set函數(shù)進行設(shè)置其值，或者說改變他的值。從運行圖可以看到，當頁面加載的時候，當我用到name的變量的時候，他會默認執(zhí)行g(shù)et方法，當我在控制臺中改變其值，他會默認執(zhí)行set方法。

methods中函數(shù)執(zhí)行和computer計算的對比

這兩個方式都可以對值進行拼接或者進行復(fù)雜操作。那么哪個方法性能比較好呢？答案是computed,原因在于computed內(nèi)部有緩存。看代碼如下來計算分別調(diào)用了函數(shù)多少次:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小練習(xí)</title>
</head>
<body>
  <div id="calc">
    <a v-cloak="">{{name}}</a>
    <a v-cloak="">{{name}}</a>
    <a v-cloak="">{{name}}</a>
    <a v-cloak="">{{name}}</a>
    <hr>
    <a v-cloak="">{{a()}}</a>
    <a v-cloak="">{{a()}}</a>
    <a v-cloak="">{{a()}}</a>
    <a v-cloak="">{{a()}}</a>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      counter:0
    }
    ,methods:{
      a :function(){
        console.log("執(zhí)行了一次函數(shù)");
        return 'AAAa';
      }
    }
    ,computed: {
      name: {
        get: function(){
          console.log("得值");
          console.log("執(zhí)行了一次 計算屬性的get方法");
          return 'AAAa';
        },
        set: function(){
          console.log("設(shè)值");
          
        }
      }
    }

  })

</script>

塊級作用域

那什么時候改用let，什么時候用const呢。是變量則用let，靜態(tài)常量則是const。

事件監(jiān)聽

上面已經(jīng)數(shù)說了，標簽點擊事件，下面我們來說一下，v-on的語法糖，也就是類似v-bind的語法糖為:,, v-on的語法糖為@。代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc">
    <a id="num">{{num}}</a>
    <button @click="add">+1</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 0
    }
    ,methods:{
      add: function(){
        this.num ++;
      }
    }
    ,computed: {
    }
  })

</script>

運行效果如下:

**傳參情況，**代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc">
    <a id="num">{{num}}</a>
    <button @click="add(num,$event)">*2</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(param,event){
        console.log(param);
        console.log(event);
        this.num = param * 2;
      }
    }
    ,computed: {
    }
  })

</script>

運行如下：

監(jiān)聽獲得event對象，里面可以有點擊事件詳情，代碼如下:

說明：

在上面的代碼中，

<button @click="add(num,$event)">*2</button>

num則被vue解釋成變量，$event帶有美元符號的修飾的變量，則被視為是事件。就是說，當你在網(wǎng)頁上對鍵盤或者鼠標有動作的時候，他會生成事件，這個事件可以被檢測到，可以進行傳遞。

修飾符阻止冒泡

在vue中，我們?nèi)绻麤]有組織冒泡，那么請看是下面這樣:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc" @click="adda">
    <button @click="add">點我</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(){
        console.log("點擊了按鈕")
      }
      ,adda: function(){
        console.log("點擊了div")
      }
    }
    ,computed: {
    }
  })

</script>

運行結(jié)果如下:

那么vue的阻止事件冒泡方法很簡答，代碼修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc" @click="adda">
    <a >我不是按鈕</a>
    <button @click.stop="add" >點我</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(){
        console.log("點擊了按鈕")
      }
      ,adda: function(){
        console.log("點擊了div")
      }
    }
    ,computed: {
    }
  })

</script>

運行如下:

vue回車事件獲取輸入框的值

代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc" @click="adda">
    <a >我不是按鈕</a>
    <button @click.stop="add" >點我</button>
    <input type="text" @keyup.enter="console">
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(){
        console.log("點擊了按鈕")
      }
      ,adda: function(){
        console.log("點擊了div")
      }
      ,console: function(event){
        console.log(event.target.value);
      }
    }
    ,computed: {
    }
  })

</script>

運行效果如下:

通過使用@Keyup.enter事件來進行對輸入框input的事件監(jiān)聽。

Vue的阻止表單提交的監(jiān)聽

通常情況下，默認form的submit一點擊提交，就立即跳轉(zhuǎn)，情況如下:

我們有時候希望點擊提交submit類型的input按鈕的時候，不要立即跳轉(zhuǎn)到action頁面，那么我們可以通過如下代碼來實現(xiàn):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc">
    <form action="www.erremall.top" @click.prevent="judge" >
      <input type="submit">
    </form>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      judge: function(){
        //在這里，對數(shù)據(jù)進行校驗。不先提交
        console.log("來了這里，沒有立即跳轉(zhuǎn)");
      }
    }
    ,computed: {
    }
  })

</script>

運行效果如下: