Vue学习--Day5

---

前言

在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等 在vue中使用v-on指令进行事件监听

一、v-on 事件监听

• v-on就是用于绑定事件的

v-on的基本使用如下:

<div id="hey">
  <h2>{{counter}}</h2>
  <button v-on:click="increment">+</button>
  <!--  语法糖 v-on: -> @ -->
  <button v-on:click="decrement">-</button>

</div>

<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      counter: 0
    },
    methods:{
      increment(){
        this.counter++
      },

      decrement(){
        this.counter--
      }
    }

  })
</script>

按"+“就会加1，按”-"就会减1

二、v-on 参数问题

1.情况一：methods的方法有参数，传值

<button @click="msg('lhs')">传值</button>

methods:{
    msg(event){
        console.log(event);//输出的lhs
    }
}

@click="msg(‘lhs’)"传值时必须加上单引号，不加就传data里的参数

2.情况二：methods的方法有参数，但没有传值

<button @click="msg">传值</button>

methods:{
    msg(event){
        console.log(event);//输出的event
    }
}

返回的是event（Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态）

3.情况三：methods的方法有参数，传值同时也要event

<button @click="msg">传值</button>

methods:{
    msg(event){
        console.log(event);//输出的event
    }
}

返回的是event（Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态）

三、v-on 的修饰符

1 .stop :表示停止冒泡事件

<div id="hey">
<!-- 1. stop修饰符的使用-->
  <div @click=" divClick">
    <button @click.stop="btnClick">按钮</button>
  </div>

</div>

<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      counter: 0
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },

      divClick(){
        console.log("divClick");
      }
    }

  })
</script>

上述代码停止了divClick冒泡

2 .prevent :阻止默认行为

<div id="hey">
<!--  2. prevent修饰符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick" >
  </form>

</div>

<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      counter: 0
    },
    methods:{
      submitClick(){
        console.log("submitClick");
      }

    }

  })
</script>

上述代码阻止了submit行为的执行

3 监听某个键盘的键帽

<div id="hey">
<!--  3. 监听某个键盘的键帽-->
  <input type="text" @keyup="keyUp">

</div>

<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      counter: 0
    },
    methods:{
      keyUp(){
        console.log("keyUp");
      }

    }

  })
</script>

4 .native 暂时略

5 .once只触发一次回调

<div id="hey">
<!--  4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      counter: 0
    },
    methods:{
      btn2Click(){
        console.log("btn2Click");
      }

    }

  })
</script>

参考:
https://www.cnblogs.com/bushui/p/12207926.html
https://www.bilibili.com/video/BV15741177Eh?p=33&spm_id_from=pageDriver