欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue.js自学(D6)

程序员文章站 2022-04-28 08:04:23
...

05-事件监听

02-v-on参数(p30)

$event传递事件参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- 在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候vue会默认将浏览器产生的event事件对象作为参数传入 -->
    <button @click="btn1Click">按钮1</button>
    <button @click="btn2Click">按钮2</button>
    <!-- <button @click="btn3Click(123,event)">按钮3</button> -->
    <!-- 在调用时,如何手动获取到浏览器参数的event对象,使用$event -->
    <button @click="btn3Click(123,$event)">按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        message:'你好啊',
        event: 'codewhy'
      },
      methods: {
        btn1Click(){
          console.log("btn1Click");
        },
        btn2Click(event){
          console.log("-------",event);
        },
        btn3Click(abc, event){
          console.log("+++++++",abc,event);
        }
      }
    })
  </script>
</body>
</html>

03-v-on的修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.{keyCode | keyAlias}只当事件从特定键触发时才触发回调

.native 监听自定义组件

.once只触发一次回调

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <div @click="divClick">
      <!-- .stop修饰符的使用,阻止冒泡 -->
      <button @click.stop="btnClick">按钮</button>
    </div>
    <!-- .prevent修饰符的使用 -->
    <form action="baidu">
      <!-- <input type="submit" value="提交" @click="subClick"> -->
      <input type="submit" value="提交" @click.prevent="subClick">
    </form>
    <!-- 监听某个键盘键帽的点击 -->
    <input type="text" @keyup.enter="keyUp">
    <!-- .native -->
    <cpn @click.native=""></cpn>
    <!-- .once修饰符的使用 -->
    <button @click.once="btn2Click">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
      },
      methods: {
        divClick() {
          console.log("divClick");
        },
        btnClick() {
          console.log("btnCLick");
        },
        subClick() {
          console.log("subClick");
          
        },
        keyUp() {
          console.log("keyUp");
          
        },
        btn2Click() {
          console.log("btn2Click");
          
        }
      }
    })
  </script>
</body>
</html>
相关标签: 笔记 Vue.js