05事件监听

事件监听

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

获取到浏览器参数的event对象: $event

<div id="app">
	<h2>{{counter}}</h2>
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
  <!-- 语法糖 当没参数时（）可以不用写 -->
  <button @click="increment">+</button>
  <button @click="decrement">-</button>

  <!-- 事件调用时没有参数 -->
  <button @click="bnt1Click()">按钮1</button>
  <button @click="bnt1Click">按钮1</button>

  <!-- 在事件定义前，写函数省略了小括号，但是方法本身需要一个参数,这个时候
  Vue会将浏览器默认生成的event事件对象作为参数传入方法中 -->
  <button @click="bnt2Click(123)">按钮2</button> 
  <button @click="bnt2Click()">按钮2</button>
  <button @click="bnt2Click">按钮2</button>

  <!-- 定义方法时，我们需要event对象，同时又需要其他参数 -->
  <!-- 在调用方式时，如何手动的获取到浏览器参数的event对象: $event -->
  <button @click="bnt3Click('abc',$event)">按钮3</button>
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				counter: 0
			},
      methods:{
        increment(){
          this.counter++
        },
        decrement(){
          this.counter--
        },
        bnt1Click(){
          console.log("bnt1Click");
        },
        bnt2Click(abc){
          console.log("--------------",abc);
        },
        bnt3Click(abc,event){
          console.log("++++++++++++++", abc,event);
        }
      }
		})

    // 如果我们函数需要参数，但是没有传入参数，那么函数的形参为undefined
    function abc(name){
      console.log(name);
    }
    abc()
	</script>
</body>

v-on的修饰符

1 .stop修饰符的使用
当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面,而.stop就是阻止冒泡使用的

2.prevent修饰符的使用
在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转

3.keyup监听某个键盘的键帽
监听某个键盘的键位

4.once修饰符的使用
绑定后只会触发一次

<div id="app">
  <!-- 1. .stop -->
  <div @click='divClick'>
    aaaaa
    <button @click.stop='bntClick'>按钮</button>
  </div>

  <!-- 2. .prevent  -->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent='submitClick'>
  </form>

  <!-- 3. 监听某个键盘的键位 -->
  <input type="text" @keyup.enter="keyUp">

  <!-- 4. once修饰符的使用 -->
  <button @click.once='bnt2Click'>按钮</button>
</div>



<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        massage: "你好"
      },
      methods: {
        bntClick() {
          console.log('bnt')
        },
        divClick() {
          console.log('div')
        },
        submitClick() {
          console.log("submitClick")
        },
        keyUp() {
          console.log("up")
        },
        bnt2Click() {
          console.log('bnt2');
        }
      }
    })
  </script>
</body>
posted @ 2021-11-08 22:47  天亮說晚安  阅读(36)  评论(0)    收藏  举报