首页 > 其他分享 >009.Vue3入门,事件修饰符的使用方法

009.Vue3入门,事件修饰符的使用方法

时间:2024-08-10 17:49:57浏览次数:16  
标签:console log 修饰符 点击 Vue3 009

1、代码如下:

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="clickHandle" href="http://www.baidu.com">百度</a>
  <div @click="click1"><p @click="click2">测试1</p></div>
  <div @click="click1"><p @click.stop="click2">测试2</p></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    clickHandle(e) {
      console.log("点击了!");
      console.log(e);
    },
    click1() {
      console.log("外标签点击");
    },
    click2() {
      console.log("内标签点击");
    }
  }
}
</script>

2、测试如下

 

标签:console,log,修饰符,点击,Vue3,009
From: https://www.cnblogs.com/tianpan2019/p/18352577

相关文章

  • 008.Vue3入门,最基础的事件处理,点击按钮增加次数,支持传参
    1、代码如下:<template><h3>内联事件处理群</h3><button@click="addCount1">Add</button><p>{{count1}}</p><button@click="addCount2('hello')">按钮</button><p>{{coun......
  • vue3中piniaPluginPersistedstate解决动态路由刷新空白问题
    总结:使用了回调函数来防止持久化数据前就渲染页面,导致刷新空白1.Store里的代码(**这里主要就是在addNewRoute写了回调callback**)addNewRoute(menuList,()=>{//重新渲染router.push({path:'/home/individual'})});import{defineStore}from"pinia";import......
  • 007.Vue3入门,进行列表渲染来输出循环的内容
    1、代码如下:<template><h3>列表渲染</h3><pv-for="(item,index)ofnames">序号:{{index}},内容:{{item}}</p><divv-for="itemofresult"><p>ID:{{item.id}},PKID:{{item.pkid}}</p>......
  • Vue3Pinia入门学习
    文章目录什么是pinia创建空Vue项目并安装Pinia1.创建空Vue项目2.安装Pinia并注册、基础用法:实现counter实现getters异步actionstoreToRefs保持响应式解构什么是piniaPinia是Vue的专属状态管理库,可以实现跨组件或页面共享状态,是vuex状态管理工具的替代品,和......
  • Sql语句出现ORA-00933: SQL command not properly ended的解决方法
    目录1.问题所示2.原理分析3.解决方法1.问题所示执行sql语句的时候出现如下问题:ORA-00933:SQLcommandnotproperlyended截图如下所示:2.原理分析ORA-00933:SQLcommandnotproperlyended是Oracle数据库中的错误,指示SQL语句存在语法问题MyS......
  • 004.Vue3入门,使用绑定属性时undefined和disabled用法
    1、代码如下:<template><divv-bind:id="myId1"v-bind:class="testCls">测试1</div><divv-bind:id="myId2"v-bind:title="testTitle">测试2</div><div:id="myId3":class="te......
  • 002.Vue3入门,使用模板语法的一些高级功能
    1、代码如下:<template><h3>模板语法</h3><p>{{msg}}</p><p>{{msg_cn}}</p><p>{{number+1}}</p><p>{{ok?'Yes':'No'}}</p><p>{{message.split("......
  • useImperativeHandle 是什么?你可以理解为 vue3 的 expose
    useImperativeHandle确实类似于Vue3的expose,两者都用于控制子组件向父组件暴露的接口。在React中,useImperativeHandle需要与forwardRef一起使用,原因如下:转发引用:forwardRef允许父组件将ref传递给子组件。没有forwardRef,父组件无法直接访问子组件的ref。......
  • Vue3的学习---4
    4.Vue组件4.1初始Vue组件4.1.1根组件根组件的主要作用是:初始化应用程序。提供全局的状态管理或配置。作为其他组件的容器,构建整个应用程序的组件树。通过根组件,开发者可以控制应用程序的整体结构和行为,确保各个部分能够协同工作。<body><divid="app"></div>......
  • Vue3项目创建及相关配置
    Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM(Model-View-ViewModel)的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。它包括三个部分:Model(模型):表示应用程序的数据和业务逻辑。在Vue中,模型通常是一个JavaScript对象。View(视图):表示......