前端学习(1189):事件基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- v-cloak用法 --><style>[v-cloak] {display: none;}/* 先通过样式隐藏内容 然后在内存中替换 然后再显示想要的结果 */</style>
</head>
<!-- v-once显示的信息不需要后期修改 这样可以提高性能 --><body><div id="app"><div>{{num}}</div><div><button @click='handle1'>点击2</button><button @click='handle2(123,456,$event)'>点击3</button></div></div><!-- 刷新的时候有闪动 --><script type="text/javascript" src="./js/vue.js"></script><script>/* VUE基本使用 *//* 填充数据 *//* 引入js *//* 语法功能 */var vm = new Vue({//绑定的标签el: '#app',//数据显示data: {//msg: 'Hello Vue',num: 0/*  info: '你好' */},methods: {handle2: function(p, p1, event) {console.log(p, p1);console.log(event.target.tagName);this.num++;},handle1: function(event) {console.log(event.target.innerHTML);}}});</script>
</body></html>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/420648.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1190):事件修饰符

传统方式 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><!-- v-cloak用…

mybatis --入门 单表增删改查-curd

目录1. mybatis 环境搭建2. 实体类映射文件配置&#xff08;写sql&#xff09;3. mybatis核心配置文件 &#xff08;环境配置&#xff09;4. 测试mybatis document https://mybatis.org/mybatis-3/zh/ mybatis in github https://github.com/mybatis/mybatis-3 1. mybatis 环…

lvs-dr模式原理详解和可能存在的“假负载均衡”

原文地址&#xff1a; http://blog.csdn.net/lengzijian/article/details/8089661 lvs-dr模式原理 转载注明出处&#xff1a;http://blog.csdn.net/lengzijian/article/details/8089661 先附上一张原理图&#xff1a; 为了更清晰的表述lvs-dr原理&#xff0c;我们用tcpdump工具…

把一张合成图分拆出各个小图

反编译一个程序&#xff0c;看到一张合成图&#xff0c;想分拆出里面的每个小图&#xff0c;知道了各个图的坐标大小后&#xff0c;写了一个小方法&#xff0c;希望对大家有用哈 package com.bitimage;import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStr…

mybatis TypeHandler 类型处理器

目录1. 自定义日期类型处理器2. 配置自定义日期处理器3. 新增&#xff0c;查询1. 自定义日期类型处理器 继承mybatis提供的BaseTypeHandler覆写方法&#xff0c; 来转换Java和数据库中的字段package cn.bitqian.config;import org.apache.ibatis.type.BaseTypeHandler; import…

稀疏表示

稀疏表示是近期几年信号处理领域的热点之中的一个&#xff0c;简单来说&#xff0c;它事实上是一种对原始信号的分解过程&#xff0c;该分解过程借助一个事先得到的字典&#xff08;也有人称之为过完备基&#xff0c;overcomplete basis&#xff0c;后面会介绍到&#xff09;&a…

ssm整合 durid数据源 报错java.sql.SQLException: Access denied for user ‘xxx‘@‘localhost‘

目录1、报错原因2、如何解决1、报错原因 连接数据库账号密码错误… 但我在jdbc.properties中检查账号&#xff0c; 密码都是正确的呀&#xff0c;&#x1f623; drivercom.mysql.cj.jdbc.Driver urljdbc:mysql://localhost:3306/mybatis_study?serverTimezoneGMT usernamer…

ssm整合 报错org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):xxx

目录1. 报错原因2. 解决3. 说明1. 报错原因 使用MapperScannerConfigurer扫描对应的mapper接口&#xff0c;帮我把mapper放入spring容器中&#xff0c;但是我的mapper映射文件并没有关联到sessionFactory中。 加载mybatis核心配置文件时&#xff0c; 其中的环境&#xff0c;数…

Teradata Fastload 使用方法

第一步&#xff1a; 首先打开 teradata fastload.exe 第二步&#xff1a; 通过粘贴导入脚本 脚本&#xff1a; SESSIONS 4; ERRLIMIT 25; SET RECORD VARTEXT ",";LOGON localhost/Teradata_Education,Educate; /* localhost:IP Address; Teradata_Education:user…

Java实现邮箱发送(阿里云邮箱推送)

Java mail邮箱发送1. 邮箱信息实体类2. jar包依赖3. 发送邮箱实现绑定阿里云域名&#xff0c;创建域名账户&#xff0c;并配置解析域名账户&#xff0c;获得发送邮箱的权限&#xff0c;上限两百封&#xff0c;超出要&#xffe5;… 阿里云邮件推送控制台https://www.aliyun.co…

Android组件系列----BroadcastReceiver广播接收器

​【声明】 欢迎转载&#xff0c;但请保留文章原始出处→_→ 生命壹号&#xff1a;http://www.cnblogs.com/smyhvae/ 文章来源&#xff1a;http://www.cnblogs.com/smyhvae/p/3960623.html 【正文】 一、广播的功能和特征 广播的生命周期很短&#xff0c;经过调用对象-->…

vue.js 入门,简介

vue的源代码下载——开发版本和生产版本 https://cn.vuejs.org/js/vue.jshttps://cn.vuejs.org/js/vue.min.js vue中文学习官网 https://cn.vuejs.org/v2/guide/ vue学习入门1. 什么是vue.js2. vue的要学的核心3. 我的第一个vue程序(&#xffe3;▽&#xffe3;)"1. 什么…

vue中的数据单向绑定,判断,循环,函数

vue基本语法1. 前言2. 数据绑定v-bind3. v-if || v-else-if || v-else 条件判断4. v-for 循环5. v-on 元素监听事件1. 前言 vue语法&#xff0c;基本照着官网的来的&#xff0c;也有一些看了b站某kuang的视频&#xff0c;受了些启发。 <div id"app">// 取dat…

Asp.Net MVC4入门指南(5):从控制器访问数据模型

在本节中&#xff0c;您将创建一个新的MoviesController类&#xff0c;并在这个Controller类里编写代码来取得电影数据&#xff0c;并使用视图模板将数据展示在浏览器里。 在开始下一步前&#xff0c;先Build一下应用程序(生成应用程序)(确保应用程序编译没有问题) 用鼠标右键单…

vue双向数据绑定v-model绑定单选框,复选框,下拉框

v-model使用1. 简单的demo2. 三种框的绑定注意它是自动帮你确认值的&#xff01;&#xff01;&#xff01;无需关心过程&#xff0c;把json数据一丢到data中&#xff0c;自动选中。1. 简单的demo 实现一边在输入框输入&#xff0c;一边显示输入框的内容 2. 三种框的绑定 &l…

vue自定义组件,插槽,自定义事件

vue组件套娃1. vue自定义组件2. 组件和插槽套娃3. vue组件通过自定义事件更改vue实例中的数据1. vue自定义组件 语法 Vue.component(自定义组件名, {props: [var1, var2, var3], //每个属性可以和页面绑定值template: <p>{{ var1 }}</p> // 自定义模板 里面套htm…

vue脚手架v-cli,第一个vue程序

运行在node服务器上的vue程序1. v-cli安装2. 使用webpack构建vue程序3. 目录介绍4. webpack将vue打包成js文件1. v-cli安装 在玩v-cli vue客户端脚手架时&#xff0c;需要安装好node.js&#xff0c;是前端管理js包的工具正式安装vue-cli脚手架 1. npm install vue-cli -g 2. …

ssh框架搭建

下载地址&#xff1a;源码和详细搭建步骤 使用myeclipse2014搭建ssh框架1. spring搭建2. struts2搭建3. hibernate搭建4. applicationContext编写5. web.xml编写1. spring搭建 创建一个javaweb项目 导入spring框架 最高版本3.1支持 4. 选择类库 spring导入完毕 2. str…

iOS: 图解Xcode常用的快捷键

对于习惯了Windows 操作的开发者来说&#xff0c; 初次接触Xcode时&#xff0c;你会感到有种种不适&#xff0c;其中一个重要的原因就是&#xff0c; 相比Windows X86 电脑&#xff0c; Mac 多出了两个物理键&#xff1a; Fn 和 Command。 尤其是 Command键&#xff0c;在 Ma…