10. vue常用指令 v-on 给元素绑定监听事件

文章目录

  • 1. v-on指令是什么
  • 2. v-on 指令的 用法
    • 2.1 v-on指令基本格式
    • 2.2 v-on:click.stop 阻止事件冒泡
      • 事件冒泡
      • 阻止事件冒泡
    • 2.3 v-on:click.self 只有当前元素自身触发回调函数才会执行
    • 2.4 v-on:click.capture 事件捕获
    • 2.5 v-on:click.prevent 阻止默认事件
    • 2.6 v-on:click.once 只触发一次回调
  • 3. v-on指令的注意点
    • 3.1 如果回调函数不需要传递参数,那么可以把()去掉
    • 3.2 如果回调函数传递参数,那么必须有括号(),并且参数用逗号,隔开
    • 3.3 Vue对象中 methods的回调函数如果要使用data中的数据,那么必须使用this去调用
  • 4. v-on指令常用修饰符
  • 5. v-on指令的 按键修饰符

1. v-on指令是什么

  • v-on指令专门为元素绑定监听事件

2. v-on 指令的 用法

2.1 v-on指令基本格式

  • 通过v-on指令绑定监听事件,那么在指定事件名称时不需要写 on,即 v-on:click,而不是 v-on:onclick
  • 通过v-on指令绑定监听事件,那么在赋值的时候必须在Vue对象中赋值一个回调函数名称
  • v-on:click 指令可以简写为 @click

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用title>
  
  <script src="js/vue.js">script>
  
  
head>
<body>
  <div id="app">
    <button v-on:click="showMsg">我是按钮button> <br/>
    <button @click="showMsg">我是按钮-简写button>
  div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
    
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
    
        name: "lchh",
        age: 18,
      },
      methods: {
    
        showMsg(){
    
          alert('123456');
        }
      } 
    });
  script>
body>
html>

10. vue常用指令 v-on 给元素绑定监听事件_第1张图片

2.2 v-on:click.stop 阻止事件冒泡

事件冒泡


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用title>
  
  <script src="js/vue.js">script>
  
  
  <style>
    .A{
    
      width: 300px;
      height: 300px;
      background-color: blue;
    }

    .B{
    
      width: 200px;
      height: 200px;
      background-color: blueviolet;
    }

    .C{
    
      width: 100px;
      height: 100px;
      background-color: cadetblue;
    }
  style>
head>
<body>
  <div id="app">
    
    <div class="A" @click="clickA">
      <div class="B" @click="clickB">
        <div class="C" @click="clickC">div>
      div>
    div>
  div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
    
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据<

你可能感兴趣的:(Vue,vue)