Vue：事件监听（事件监听、修饰符）

时间 2020-12-16 标签 html vue app 函数 this spa code orm htm 对象

一、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>

只有第一次点击按键的时候触发了事件