当前位置： 首页 > news >正文

Vue-03.指令-v-on

news 文章来源：https://blog.csdn.net/qq_45055856/article/details/141110114 2025/5/16 5:53:11

 v-on                        为HTML标签绑定事件

代码演示：

在下面的代码中，在input标签中定义了一个按钮，并且使用v-on为input标签绑定了一个事件click，当鼠标点击该按钮时，会触发指定的方法handle，如果该方法有返回值，则在视图区域的方法handle后面加上()。如果没有返回值则可以不加，这里加上了。

在定义的vue对象中，在methods区域定义了一个method为handle()。当点击时会触发该方法弹出“被点了一下~~~”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<!-- v-on                        为HTML标签绑定事件 -->
<body><!-- 3.定义vue所要操作的视图 --><div id="app"><input type="button" value="点我一下" v-on:click="handle()"> <!-- event指定要绑定的是什么事件 函数里不需要传递参数，()可以加可以不加 --><input type="button" value="点我一下" @click="handle()">  <!--  --></div>
</body>
<script>// 2.创建vue对象，指定vue的管辖区域，数据和方法new Vue({el:"#app",data:{},methods: {handle:function() {alert("被点了以下~~~");}},})
</script>
</html>

相关文章：

Vue-03.指令-v-on

v-on 为HTML标签绑定事件 代码演示&#xff1a; 在下面的代码中&#xff0c;在input标签中定义了一个按钮&#xff0c;并且使用v-on为input标签绑定了一个事件click&#xff0c;当鼠标点击该按钮时&#xff0c;会触发指定的方法handle&#xff0c;如果…...

编程日记 2024/8/11 21:03:51

接口基础知识6：详解http request body（一篇讲完常见请求体）

课程大纲 一、定义 HTTP请求体&#xff08;HTTP Request body&#xff09;&#xff1a;HTTP请求消息的可选部分&#xff0c;仅在请求方法支持且需要发送数据时使用。 POST方法、PUT方法有请求体&#xff0c;GET和HEAD方法没有请求体。 请求头和请求体之间会有一个空行&#…...

编程日记 2024/8/11 21:00:45

Windows Server 安装Web，DHCP，DNS，FTP四大服务及其配置和监控方式

以Windows Server 2022为例 1.安装Web服务 添加角色->Web服务器勾选 添加Web服务器后会有一个interpub文件夹&#xff0c;其中wwwroot为网站根目录 工具->IIS->网站 ,这里可以将风险服务停掉 2.安装DHCP服务 添加角色->DHCP服务器勾选 右击IPv4->新建作用域 …...

编程日记 2024/8/11 20:58:43

创意指南丨VR游览沉浸式空间体验

欢迎来到我们制作的VR幻想世界。玩家的起点是一条蓝色水晶大道&#xff0c;让我们一起探索这个如梦似幻的境地。 在这条大道的两侧&#xff0c;漂浮着半透明的大水晶水母。它们轻盈地在空中飘动&#xff0c;仿佛在欢迎我们的到来。这条道路上方&#xff0c;一个个半圆环不停地…...

编程日记 2024/8/11 20:55:41

【iOS】—— autoreleasePool以及总结

【iOS】—— autoreleasePool以及总结 1. 什么是autoreleasePool2. autoreleasePoolPageobjc_autoreleasePoolPush方法&#xff1a;objc_autoreleasePoolPop方法&#xff1a;tokenkill()方法 3. 总结3.1 autoreleasePool的原理3.2 autoreleasePool的问题3.2.1 autoreleasepool的…...

编程日记 2024/8/11 20:53:39

培训第二十五天（python中执行mysql操作并将python脚本共享）

mysql下载路径&#xff1a; MySQL :: MySQL Community Downloads [root2 ~]# vim py001.pya3b4print(ab)print(a**2b**2)[root2 ~]# python py001.py 725[root2 ~]# python3>>> import random>>> random<module random from /usr/lib64/python3.6/random…...

编程日记 2024/8/11 20:52:37

LVS实战项目

LVS简介 LVS:Linux Virtual Server&#xff0c;负载调度器&#xff0c;内核集成&#xff0c;章文嵩&#xff0c;阿里的四层SLB(Server LoadBalance)是基于LVSkeepalived实现。 LVS集群的类型 lvs-nat &#xff1a; 修改请求报文的目标IP, 多目标 IP 的 DNAT lvs-dr &#xff…...

编程日记 2024/8/11 20:51:36

笔记小结：《利用python进行数据分析》之层次化索引

层次化索引 导入样例 层次化索引&#xff08;hierarchical indexing&#xff09;是pandas的一项重要功能&#xff0c;它使你能在一个轴上拥有多个&#xff08;两个以上&#xff09;索引级别。抽象点说&#xff0c;它使你能以低维度形式处理高维度数据。我们先来看一个简单的例…...

编程日记 2024/8/11 20:50:35

Linux的线程篇章 - 线程池、进程池等知识】

Linux学习笔记---018 Linux之线程池、进程池知识储备1、线程池1.1、池化技术1.1.1、定义与原理1.1.2、优点1.1.3、应用场景 1.2、线程池的特点与优势1.3、线程池的适用场景1.4、线程池的实现 2、进程池2.1、定义和基本概念2.2、进程池的特点与优势2.3、进程池的适用场景&#x…...

编程日记 2024/8/11 20:49:34

汇昌联信做拼多多运营正规吗？

汇昌联信在拼多多平台上的运营是否正规&#xff0c;是许多商家和消费者都关心的问题。随着电商行业的快速发展&#xff0c;平台运营的正规性直接关系到消费者的购物体验和商家的信誉。 一、公司背景与资质审核 明确回答问题&#xff1a;汇昌联信作为一家专业的电商运营公司&…...

编程日记 2024/8/11 20:48:33

240810-Gradio自定义Button按钮+事件函数+按钮图标样式设定

A. 最终效果 B. 参考代码 要通过自定义HTML按钮来触发Gradio自带按钮的 click 函数&#xff0c;你可以使用JavaScript来模拟点击Gradio的按钮。这里是一个示例代码&#xff0c;展示了如何实现这一点&#xff1a; import gradio as gr# 自定义的 JavaScript&#xff0c;用于捕…...

编程日记 2024/8/11 20:46:31

排序算法--快速排序

一、三色旗问题 问题描述 有一个数组是只由0&#xff0c;1&#xff0c;2三种元素构成的整数数组&#xff0c;请使用交换、原地排序而不是计数进行排序&#xff1a; 解题思路 1.定义两个变量&#xff0c;i和j&#xff08;下标&#xff09;&#xff0c;从index0开始遍历 2.如…...

编程日记 2024/8/11 20:43:28

springMVC -- 学习笔记

前言简介演示 ⇒ &#xff08;最简单的原理&#xff0c;开发并不这样&#xff0c;理解一下就好&#xff09;演示 ⇒ 接近真实注解开发&#xff08;好好理解一下&#xff09;重要的源码献上 Controller 讲解RequestMapper ⇒ 没啥记的&#xff0c;第一个案例看看就行了RestFul 风…...

编程日记 2024/8/11 20:42:27

修复本地终端（windows）连接服务器使用zsh出现乱跳的问题

目前市面上还没有发现解决方案&#xff0c;记录一下&#xff01; 1.起因&#xff1a; 在服务器配置了zsh后&#xff0c;用本地的windows去连接的时候&#xff0c;终端内容会出现乱跳&#xff0c;比如输入了一个“l”&#xff0c;后面出现多个“lll”&#xff0c;如下: ⚡ roo…...

编程日记 2024/8/11 20:41:26

【扒代码】regression_head.py

import torch from torch import nnclass UpsamplingLayer(nn.Module):# 初始化 UpsamplingLayer 类def __init__(self, in_channels, out_channels, leakyTrue):super(UpsamplingLayer, self).__init__() # 调用基类的初始化方法# 初始化一个序列模型&#xff0c;包含卷积层、…...

编程日记 2024/8/11 20:40:25

vue2 使用axios 请求后台返回文件流导出为excel

目录 步骤 1: 安装 Axios 步骤 2: 创建 Axios 实例 步骤 3: 发起请求并处理文件流 说明 步骤 1: 安装 Axios 首先&#xff0c;确保项目中已经安装了 Axios。如果没有&#xff0c;可以通过以下命令进行安装&#xff1a; npm install axios 步骤 2: 创建 Axios 实例 为了更…...

编程日记 2024/8/11 20:39:22

MATLAB数据可视化：在地图上画京沪线的城市连线

matlab自带的geoplot(lat,lon) 可以在地理坐标中绘制线条。使用 lat和lon分别指定以度为单位的经度和纬度坐标。 绘制京沪线所经城市线条&#xff1a; citys [116.350009,39.853928; 116.683546,39.538304; 117.201509,39.085318; 116.838715,38.304676;...116.359244,37.436…...

编程日记 2024/8/11 20:38:21

【AI】CV基础1

定期更新&#xff0c;建议关注更新收藏。 本站友情链接&#xff1a; OCR篇1 可变形卷积Deformable Conv opencv-python形态学操作合集 目录 仿射变换图像二阶导数本质探讨PIL通道、模式、尺寸、坐标系统、调色板、信息滤波器实现图像格式转换 OpenCV轮廓提取 仿射变换 仿射变换…...

编程日记 2024/8/11 20:34:17

数据结构《栈》

数据结构《栈》 1、栈的概念及结构2、栈的实现3、练习: 1、栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&…...

编程日记 2024/8/11 20:32:15

说一说mysql的having？和where有什么区别？

在 MySQL 中&#xff0c;HAVING 子句和 WHERE 子句都是用于过滤查询结果的&#xff0c;但它们之间有一些重要的区别。下面我将详细介绍这两个子句的区别以及它们的使用场景。 1. HAVING 子句 作用: HAVING 子句用于过滤聚合后的结果集。它通常与 GROUP BY 子句一起使用&#x…...

编程日记 2024/8/11 20:31:14

LeetCode45. 跳跃游戏 II

题目链接&#xff1a; 45. 跳跃游戏 II - 力扣&#xff08;LeetCode&#xff09; 思路分析&#xff1a;这属于上一题的变种&#xff0c;思路有所不同&#xff0c;要用到贪心的思想。从第一步开始&#xff0c;在可以跳跃的范围内&#xff0c;选择能够到达最远位置的点将其作为…...

编程日记 2024/8/11 20:30:12

算法打卡 Day19（二叉树）-平衡二叉树 + 二叉树的所有路径 + 左叶子之和 + 完全二叉树的节点个数

Leetcode 101-平衡二叉树 文章目录 Leetcode 101-平衡二叉树题目描述解题思路 Leetcode 257-二叉树的所有路径题目描述解题思路 Leetcode 404-左叶子之和题目描述解题思路 Leetcode 222-完全二叉树的节点个数题目描述解题思路 题目描述 https://leetcode.cn/problems/balanced…...

编程日记 2024/8/11 20:28:10

国际以太网专线 (IEPL)/国际专线（IPLC）-全球覆盖，无界沟通

中国联通国际公司产品&#xff1a;国际以太网专线 (IEPL)/国际专线&#xff08;IPLC&#xff09;—— 跨境数据传输的坚实桥梁 在全球化日益加深的今天&#xff0c;跨境、跨地域的数据传输需求激增&#xff0c;企业对数据传输的速度、安全性和稳定性提出了前所未有的高要求。中…...

编程日记 2024/8/11 20:27:09

信息安全管理知识体系攻略（至简）

信息安全管理知识体系主要包括信息安全管理体系、信息安全策略、信息安全系统、信息安全技术体系等。 一、信息安全管理 1、信息安全管理体系&#xff08;ISMS&#xff09;。ISO27001是国际标准化组织&#xff08;ISO&#xff09;和国际电工委员会&#xff08;ICE&#xff09…...

编程日记 2024/8/11 20:25:07

HCIE学习笔记：IPV6 地址、ICMP V6、NDP 、DAD （更新补充中）

系列文章目录 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、IPV4、IPv6包头对比1. IPV4包头2.IPv6包头3.IPV6扩展包头 二、IPV6基础知识地址结构、地址分类三、ICMPV4、ICMPV61、 lnternet控…...

编程日记 2024/8/11 20:22:05

人工智能】Transformers之Pipeline（九）：物体检测（object-detection）

目录​​​​​​​ 一、引言 二、物体检测&#xff08;object-detection&#xff09; 2.1 概述 2.2 技术原理 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模型排名 三、总结 一、引言 pipel…...

编程日记 2024/8/11 20:21:04

[SWPUCTF 2021 新生赛]easy_md5

分析代码&#xff1a;1.包含flag2.php 2.GET传name&#xff0c;POST传password $name ! $password && md5($name) md5($password) 属于MD5绕过中的php 弱类型绕过 解题方法: 方法一 import requests# 网站的URL url "http://node7.anna.nssctf.cn:28026&q…...

编程日记 2024/8/11 20:20:03

Redis面试题大全

文章目录 Redis有哪几种基本类型Redis为什么快&#xff1f;为什么Redis6.0后改用多线程?什么是热key吗&#xff1f;热key问题怎么解决&#xff1f;什么是热Key&#xff1f;解决热Key问题的方法 什么是缓存击穿、缓存穿透、缓存雪崩&#xff1f;缓存击穿缓存穿透缓存雪崩 Redis…...

编程日记 2024/8/11 20:19:02

【langchain学习】BM25Retriever和FaissRetriever组合 实现EnsembleRetriever混合检索器的实践

展示如何使用 LangChain 的 EnsembleRetriever 组合 BM25 和 FAISS 两种检索方法&#xff0c;从而在检索过程中结合关键词匹配和语义相似性搜索的优势。通过这种组合&#xff0c;我们能够在查询时获得更全面的结果。 1. 导入必要的库和模块 首先&#xff0c;我们需要导入所需…...

编程日记 2024/8/11 20:18:01

【C语言】预处理详解（上）

文章目录 前言1. 预定义符号2. #define 定义常量3. #define定义宏4. 带有副作用的宏参数5. 宏替换的规则 前言 在讲解编译和链接的知识点中&#xff0c;我提到过翻译环境中主要由编译和链接两大部分所组成。 其中&#xff0c;编译又包括了预处理、编译和汇编。当时&#xff0c…...

编程日记 2024/8/11 20:17:00