前言

在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用,函数不会在事件发生前被执行。在JavaScript中常见的事件句柄(Event Handlers)主要有:

属性名 描述(对应事件发生在何时...)
onabort 图像的加载被中断
onchange 域的内容被改变
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点
onkeypress 某个键盘按键被按下并松开
onload 一张页面或一幅图像完成加载
onmousemove 鼠标被移动
onmouseover 鼠标移动到某元素之上
onreset 重置按钮被点击
onselect 文本被选中
onunload 用户退出页面
onblur 元素失去焦点
onclick 当用户点击某个对象时调用的事件名柄
onerror 在加载文档或图像时发生错误
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onmousedown 鼠标按钮被按下
onmouseout 鼠标从某个元素移开
onmouseup 鼠标铵键被松开
onsubmit 提交按钮被点击
onresize 窗口或框架被重新调整大小

v-on指令

作用:监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

用法:v-on绑定的事件函数一般都写在methods对象中,使用步骤如下:1、事件绑定,2、事件实现,3、事件触发。

v-on指令无参形式的click事件绑定:

全写代码如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<button v-on:click="clickme" >{{msg}}</button>
</div>
</div> </template> <script>
export default {
name: 'v-on',
data() {
return {
msg: '点击我',
title: 'v-on指令学习'
}
},
methods:{
clickme:function(){
alert("hello");
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

简写代码如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<button @click="clickme" >{{msg}}</button>
</div>
</div> </template> <script>
export default {
name: 'v-on',
data() {
return {
msg: '点击我',
title: 'v-on指令学习'
}
},
methods:{
clickme(){
alert("hello");
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

示例结果如下:

v-on指令有参形式的click事件绑定:参数的数量和形式可根据实际情况传入,简单代码示例如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<button @click="clickme('我是中文参数','woshiyingwencanshu',$event)" >{{msg}}</button>
</div>
</div> </template> <script>
export default {
name: 'v-on',
data() {
return {
msg: '点击我',
title: 'v-on指令学习'
}
},
methods:{
clickme(msg1,msg2,event){
console.log(msg1);
console.log(msg2);
console.log(event);
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

示例结果如下:

总结:v-on可以绑定很多javascript事件,本文仅以click单击事件为例,后续会补充其他事件的使用方法,如果本文有错误和不足之处,欢迎留言指出。

Vue学习之路7-v-on指令学习之简单事件绑定的更多相关文章

  1. 大数据学习之路------借助HDP SANDBOX开始学习

    一开始... 一开始知道大数据这个概念的时候,只是感觉很高大上,引起了我的兴趣.当时也不知道,这个东西是做什么的,有什么用,当然现在看来也是很模糊的样子,但是的确比一开始强了不少. 所以学习的过程可能 ...

  2. Redis学习之路(007)- Redis学习手册(实例代码)

    在之前的博客中已经非常详细的介绍了Redis的各种操作命令.运行机制和服务器初始化参数配置.本篇博客是该系列博客中的最后一篇,在这里将给出基于Redis客户端组件访问并操作Redis服务器的代码示例. ...

  3. Redis学习之路(006)- Redis学习手册(Hashes数据类型)

    一.概述: 我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Ag ...

  4. Qt学习之路

      Qt学习之路_14(简易音乐播放器)   Qt学习之路_13(简易俄罗斯方块)   Qt学习之路_12(简易数据管理系统)   Qt学习之路_11(简易多文档编辑器)   Qt学习之路_10(Qt ...

  5. Python3学习之路~0 目录

    目录 Python3学习之路~2.1 列表.元组操作 Python3学习之路~2.2 简单的购物车程序 Python3学习之路~2.3 字符串操作 Python3学习之路~2.4 字典操作 Pytho ...

  6. Redis学习之路(000)- 目录

    本文是博主学习整理网上大神的文件以及自学的心得. Redis学习之路(000)- 目录 Redis学习之路(001)- Redis介绍以及安装(Linux) Redis学习之路(002)- Ubunt ...

  7. 『NiFi 学习之路』简介

    『NiFi 学习之路』简介 『NiFi 学习之路』入门 -- 下载.安装与简单使用 『NiFi 学习之路』资源 -- 资料汇总 『NiFi 学习之路』把握 -- 架构及主要组件 『NiFi 学习之路』 ...

  8. FastAPI 学习之路(十二)接口几个额外信息和额外数据类型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  9. FastAPI 学习之路(七)字符串的校验

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  10. FastAPI 学习之路(八)路径参数和数值的校验

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

随机推荐

  1. Go基础系列:读取标准输入

    fmt包中提供了3类读取输入的函数: Scan家族:从标准输入os.Stdin中读取数据,包括Scan().Scanf().Scanln() SScan家族:从字符串中读取数据,包括Sscan().S ...

  2. Ansible基础认识及安装使用详解(week5_day1_part1)--技术流ken

    Ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量 ...

  3. C# 隐式转换关键字 implicit

    implicit 关键字用于声明隐式的用户定义类型转换运算符. 如果可以确保转换过程不会造成数据丢失,则可使用该关键字在用户定义类型和其他类型之间进行隐式转换. 引用摘自:implicit(C# 参考 ...

  4. [转]bitcoin API reference (JSON-RPC)

    本文转自:https://en.bitcoin.it/wiki/API_reference_%28JSON-RPC%29#Node.js API reference (JSON-RPC)     Co ...

  5. [转]php 图片验证码生成 前后台验证

    本文转自:https://www.cnblogs.com/xiaoyezi/p/3541195.html 自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一 ...

  6. C#线程安全类型

    1.IProducerConsumerCollection (线程安全接口) 此接口的所有实现必须都启用此接口的所有成员,若要从多个线程同时使用. using System; using System ...

  7. 腾讯云图片鉴黄集成到C#

    官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: var urlList = new List& ...

  8. EF Code First 导航属性 与外键(转载)

    EF Code First 导航属性 与外键 一对多关系 项目中最常用到的就是一对多关系了.Code First对一对多关系也有着很好的支持.很多情况下我们都不需要特意的去配置,Code First就 ...

  9. 3. mysql性能分析

    一.mysql query optimizer 1. mysql 中有专门负责优化 select 语句的优化器模块,主要功能:通过计算分析系统中收集的统计信息,为客户端的 Query 提供他认为最优的 ...

  10. 腾讯云下的CentOS7 配置 FTP 服务器

    第一步安装vsftp * yum -y install vsftpd 第二步配置ftp文件 要实现用户不仅可以下载ftp上的内容 还可以删改增加文件到ftp服务器 需要给ftp的目录赋予写入权限 1. ...