Vue：事件監聽（事件監聽、修飾符）

時間 2020-12-16

標籤 html vue app 函數 this spa code orm htm 對象欄目 HTML 简体版

原文原文鏈接

一、v-onhtml

（1）v-on的基本使用vue

<body>
<div id="app">
  <h2>{{num}}</h2>
  <button v-on:click="increment">加</button>
  <button v-on:click="decrement">減</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {
            increment() {
               this.num++
            },
            decrement() {
               this.num--
            }
        }
    })
</script>
</body>

（2）語法糖app

<div id="app">
  <h2>{{num}}</h2>
  <button @click="increment">加</button>
  <button @click="decrement">減</button>
</div>

在事件監聽的時候，若是函數沒有參數就能夠將小括號省略掉函數

（3）傳遞參數this

傳遞一個參數

<body>
<div id="app">
  <button @click="cli(123)">點擊</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
           cli(message){
               console.log(message);
           }
        }
    })
</script>
</body>

獲取Event對象（一個參數）

<body>
<div id="app">
  <button @click="cli">點擊</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
           cli(message){
               console.log(message);
           }
        }
    })
</script>
</body>

當方法須要傳遞參數可是沒有傳遞參數的時候，默認傳遞的是Event對象。spa

獲取Event對象（多個參數）

<body>
<div id="app">
  <button @click="cli(123,$event)">點擊</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
           cli(message,event){
               console.log(message+"-----"+event);
           }
        }
    })
</script>
</body>

須要注意的問題是，若是傳遞進去的第一個參數是按照名命規範進行的命名且未加單引號就會去data裏面找數據，若是data裏面沒有數據就會出現錯誤code

二、修飾符orm

（1）stop阻止事件冒泡htm

在div裏面定義一個button，點擊button後div的click也會被觸發，這就是事件冒泡對象

<body>
<div id="app" @click="divCli(123)">
  <button @click="btnCli(233)">點擊</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btnCli(message) {
                console.log(message+'btnCli');
            },
            divCli(message) {
                console.log(message+'divCli');
            }
        }
    })
</script>
</body>

對click添加修飾符，冒泡便可被阻止，只有點擊div的時候纔會觸發，點擊button的時候是不會觸發的

<div id="app" @click="divCli(123)">
  <button @click.stop="btnCli(233)">點擊</button>
</div>

（2）prevent修飾符：阻止默認行爲

<body>
<div id="app">
  <form action="hello.html">
    <input type="submit" value="提交" v-on:click.prevent="btnCli('acx')">
  </form>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btnCli(message) {
                console.log(message + 'btnCli');
            }
        }
    })
</script>
</body>

默認的狀況是，點擊提交後會進行頁面的跳轉，在添加prevent以後會將這樣的默認行爲組織掉

（3）指定鍵盤按鍵的監聽

<body>
<div id="app">
<input type="text" @keyup.enter="btnCli('www')">
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btnCli(message) {
                console.log(message + 'btnCli');
            }
        }
    })
</script>
</body>

這樣的話只有在點擊Enter鍵的時候事件纔會觸發，不然，其它鍵盤按鍵被點擊後也會觸發

（4）once，只有第一次的時候會觸發

<body>
<div id="app">
 <button @click.once="btnCli(222)">點擊</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btnCli(message) {
                console.log(message + 'btnCli');
            }
        }
    })
</script>
</body>

只有第一次點擊按鍵的時候觸發了事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。