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

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

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

計(jì)算屬性的Get方法和Set方法

看代碼說(shuō)話:

<!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>

運(yùn)行后如下:

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

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

這兩個(gè)方式都可以對(duì)值進(jìn)行拼接或者進(jìn)行復(fù)雜操作。那么哪個(gè)方法性能比較好呢？答案是computed,原因在于computed內(nèi)部有緩存?？创a如下來(lái)計(jì)算分別調(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í)行了一次 計(jì)算屬性的get方法");
          return 'AAAa';
        },
        set: function(){
          console.log("設(shè)值");
          
        }
      }
    }

  })

</script>

塊級(jí)作用域

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

事件監(jiān)聽

上面已經(jīng)數(shù)說(shuō)了，標(biāo)簽點(diǎn)擊事件，下面我們來(lái)說(shuō)一下，v-on的語(yǔ)法糖，也就是類似v-bind的語(yǔ)法糖為:,, v-on的語(yǔ)法糖為@。代碼如下:

<!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>

運(yùn)行效果如下:

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

<!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>

運(yùn)行如下：

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

說(shuō)明：

在上面的代碼中，

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

num則被vue解釋成變量，$event帶有美元符號(hào)的修飾的變量，則被視為是事件。就是說(shuō)，當(dāng)你在網(wǎng)頁(yè)上對(duì)鍵盤或者鼠標(biāo)有動(dòng)作的時(shí)候，他會(huì)生成事件，這個(gè)事件可以被檢測(cè)到，可以進(jìn)行傳遞。

修飾符阻止冒泡

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習(xí)</title>
</head>
<body>
  <div id="calc" @click="adda">
    <button @click="add">點(diǎn)我</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("點(diǎn)擊了按鈕")
      }
      ,adda: function(){
        console.log("點(diǎn)擊了div")
      }
    }
    ,computed: {
    }
  })

</script>

運(yùn)行結(jié)果如下:

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

<!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" >點(diǎn)我</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("點(diǎn)擊了按鈕")
      }
      ,adda: function(){
        console.log("點(diǎn)擊了div")
      }
    }
    ,computed: {
    }
  })

</script>

運(yùn)行如下:

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" >點(diǎn)我</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("點(diǎn)擊了按鈕")
      }
      ,adda: function(){
        console.log("點(diǎn)擊了div")
      }
      ,console: function(event){
        console.log(event.target.value);
      }
    }
    ,computed: {
    }
  })

</script>

運(yùn)行效果如下:

通過(guò)使用@Keyup.enter事件來(lái)進(jìn)行對(duì)輸入框input的事件監(jiān)聽。

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

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

我們有時(shí)候希望點(diǎn)擊提交submit類型的input按鈕的時(shí)候，不要立即跳轉(zhuǎn)到action頁(yè)面，那么我們可以通過(guò)如下代碼來(lái)實(shí)現(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(){
        //在這里，對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)。不先提交
        console.log("來(lái)了這里，沒(méi)有立即跳轉(zhuǎn)");
      }
    }
    ,computed: {
    }
  })

</script>

運(yùn)行效果如下: