首页 > 其他分享 >Vue指令_v-on

Vue指令_v-on

时间:2024-06-06 15:43:56浏览次数:23  
标签:Vue 标签 绑定 语法 指令 事件

VUE指令—v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点

  • v-on语法给标签的事件绑定的函数,必须是vue对象种声明的函数
  • v-on语法绑定事件时,事件名相比较js中的事件名,没有on
<body>
    <div id="app">
        <!-- v-on用于绑定事件 -->
        <input type="button" value="点我一下" v-on:click="handle()">
        <!-- v-on可以省略为@ -->
        <input type="button" value="点我一下" @click="handle()">
    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                message:""
            },
            methods: {
                handle: function(){
                    alert("我被点击了!")
                }
            },
        })
    </script>
</body>

标签:Vue,标签,绑定,语法,指令,事件
From: https://www.cnblogs.com/ai-study/p/18235257

相关文章

  • SpringBoot+Vue房屋租赁网站(前后端分离)
    技术栈JavaSpringBootMavenMySQLVueElement-UIShiroMybatis-Plus系统角色用户管理员房东系统功能截图......
  • 如何在Ant-Design-Vue中实现动态表头并填充数据
    在现代前端开发中,基于Vue.js的AntDesignVue已经成为许多开发者构建高质量用户界面的首选工具之一。它提供了一整套丰富的UI组件,其中的Table组件广泛应用于数据展示和操作。本文将深入探讨如何在AntDesignVue中实现动态表头并填充数据,以满足复杂多变的业务需求。一、引言......
  • 075:vue+cesium 导出场景图片
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第075个示例文章目录一......
  • Vue3主题切换
    又是一个曾经研究失败的课题,嘻嘻,今天必拿下~网上有很多主题切换的案例,但是别人的终究是别人的,研究透彻你才能灵活运用。这边用的V3adminvite项目的主题切换。这边cv了相关组件后报错在这个函数时发生了错误,为了提升效率,我直接将该函数的定义调到调用layouts中,报错消失......
  • nginx 多个域名使用同一个通配符证书,并使用 include 指令来避免在多个 server 块中重
    1.创建SSL配置文件首先,创建一个包含SSL配置的文件,例如ssl_params.conf:#ssl_params.confssl_certificate/path/to/your/wildcard_certificate.pem;ssl_certificate_key/path/to/your/wildcard_private_key.key;ssl_session_timeout5m;ssl_ciphersECDHE-......
  • vue2 路由基础 -- 基础使用
    @[TOC](vue2路由(一)–基础使用)vue使用vue-router插件处理路由,路由是开发单页应用必须掌握的知识。什么是vue-router?(1)vue-router是Vue官方提供前端路由插件,借助它我们实现可以基于路由和组件的单页面应用。(2)它与传统的页面区别在于:传统的页面应用采用的是后......
  • Sz-Admin | SpringBoot3 JDK21 Vue3开源后台RBAC管理系统 | 2024年好用的开源RBAC管理
    简介接触了很多优秀的开源和闭源项目,在使用过程中也发现一些问题,不甘满足的我遂产生了想法:于是利用休息时间编写了一套后台管理系统,它灵活、简洁、高效,拥抱最新的技术,因此Sz-Admin便诞生了,也意为升职Admin,升职加薪节节高。SzAdmin,一个基于SpringBoot3、Vue3和El......
  • vue框架页面外链进来加"/"拼接参数的使用及获取;PC及手机端的判断;
     一开始没有看懂,后来知道了 他的意思 就是在pages目录下的页面,如果需要通过比如'pages/qr/56'这种斜杠链接进入的话 就需要吧detail.vue页面变成目录结构,页面名称改为'_'+参数名;如下图 然后在_code页面可以通过如下方式获取code值进行操作:mounted(){constc......
  • vue-codemirror代码编辑器使用
    参考链接:vue2导入使用vue-codemirror详解-CSDN博客1.安装vue-codemirrornpmivue-codemirror//codemirror需要与vue-codemirror同时安装npmicodemirror2.使用codemirror组件<template> <divclass="code-box">  <codemirror   ref="codeMirror......
  • vue3+vueCli实现自动引入 unplugin-auto-import插件版本问题
    vue3项目引入unplugin-auto-import后报错通过引入的方式constAutoImport=require('unplugin-auto-import/webpack');报错如下: 通过直接官网vue-cli方式直接引入 报错如下经测试,是unplugin-auto-import插件版本问题查看unplugin-auto-import插件版本:npmlistu......