首页 > 其他 > 详细

vue之事件监听v-on

时间:2020-10-16 23:28:40      阅读:40      评论:0      收藏:0      [点我收藏+]

1.背景

2.简单使用

2.1.做一个简单的点击计数器

技术分享图片
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>模拟购买数</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h2>模拟购买数-普通写法</h2>

  <button v-on:click="decrement">-</button>
  -{{number}}-
  <button v-on:click="increment">+</button>

  <hr>
  <h2>模拟购买数-简写</h2>
  <button @click="decrement">-</button>
  -{{number}}-
  <button @click="increment">+</button>
</div>
<script>
  const app = new Vue({
    el: #app,
    data: {
      number: 1
    },
    methods: {
      increment: function () {
        console.log("---执行加一")
        this.number++
      },
      decrement: function () {
        console.log("---执行减一")
        if (this.number > 1) {
          this.number--
        } else {
          console.log("---在减就没有了")
        }

      }

    }
  })
</script>
</body>
</html>
View Code

 

2.2.v-on参数的秘密

技术分享图片
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>v-on参数</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h2>v-on参数</h2>
  <pre>
    当通过methods中定义方法,以供@click调用时,需要注意参数问题:
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
  </pre>
  <hr>
  <h2>默认将原生事件event参数传递进去</h2>
  <button @click="decrement">-</button>
  <br>
  <br>
  -{{number}}-
  <h2>如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件</h2>
  <button @click="increment(2,$event)">+2</button>
</div>
<script>
  const app = new Vue({
    el: #app,
    data: {
      number: 1
    },
    methods: {
      increment: function (num,event) {
        console.log("---执行加"+num)
        console.log("---event"+event)
        this.number+=num
      },
      decrement: function (event) {
        console.log("---执行减一")
        console.log("---event一"+event)
        if (this.number > 1) {
          this.number--
        } else {
          console.log("---在减就没有了")
        }

      }

    }
  })
</script>
</body>
</html>
View Code

 

2.3.v-on的修饰符

常用

1.阻止事件传递,嵌套标签中@click.stop

2.阻止默认事件执行@click.prevent

3.回车键触发事件@keyup.enter

4.只执行一次@click.once

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on修饰符</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h2>.stop - 调用 event.stopPropagation()</h2>
  <pre>
    如果一个div里面有一个button标签,div与button上都有点击事件
    有事我们希望,点击div就只执行div的事件方法
    点击button就只执行button的事件方法,代码如下
  </pre>
  <hr>
  <h3>1.不使用了@click.stop</h3>
  <div @click="f1">
    div内容1
    <button @click="f2">按钮1</button>
  </div>
  <hr>
  <h3>2.使用了@click.stop</h3>
  <div @click="f1">
    div内容2
    <button @click.stop="f2">按钮2</button>
  </div>
  <hr>
  <hr>
  <h2>.prevent - 阻止默认事件执行调用 event.preventDefault(</h2>
  <pre>
  比如我们在form表单中,当用户点击提交按钮时,
  默认会请求到action="/baidu" 中去,
    如果你不想去执行默认的可以使用 .event阻止默认行为
  </pre>

  <h3>1.不使用了@click.prevent</h3>
  <form action="/hello">
    <input type="submit" value="默认提交到/hello" @click="f3">
  </form>

  <h3>2.使用了@click.prevent</h3>
  <form action="/hello">
    <input type="submit" value="不会提交到/hello" @click.prevent="f4">
  </form>
  <hr>
  <h2>.@keyup.enter 按回车键触发</h2>
  姓名:<input @keyup.enter="f3" type="text"/>
  <hr>

  <h3> @click.once - 只触发一次回调</h3>
  <button @click.once="f4">按钮</button>


</div>
<script>
  const app = new Vue({
    el: #app,
    data: {
      number: 1
    },
    methods: {
      f1() {
        console.log("-------f1---div---")
      },
      f2() {
        console.log("-------f2---button---")
      },
      f3() {
        console.log("-------f3------")
      },
      f4() {
        console.log("-------f4------")
      }

    }
  })
</script>
</body>
</html>
View Code

 

完美!

 

vue之事件监听v-on

原文:https://www.cnblogs.com/newAndHui/p/13828951.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!