vue中基本事件的处理 ?

1. vue中如何使用事件 使用v-on绑定对应事件,并且调用对应methods的方法。例如:

<div id="app">
    {{count}}
    {{count>10?"大于10":"不大于10"}}
    <button type="button" @click="addbtnfn()">添加</button>
    <button type="button" @click="delbtnfn()">减少</button>
    <input type="text" v-model="mystep" />
    <br />
    <p @mousemove="myposition">
        {{x}}<br />
        {{y}}
        <span @mousemove="stophere">停止鼠标移动事件</span>
        <span v-on:mousemove.stop>停止鼠标移动事件</span>

    </p>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            count: 0,
            mystep: 1,
            x: 0,
            y: 0
        },
        methods: {
            addbtnfn: function () {
                this.count += parseInt(this.mystep);//此处做类型转换,避免字符串拼接
            },
            delbtnfn() {
                this.count--;
            },
            myposition(event) {
                this.x = event.clientX;
                this.y = event.clientY;

            },
            stophere(event) {
                event.stopPropagation();
            }

        }
    })
</script>

2.vue中的事件参数传递

参数传递分为以下几点:

(1)设参:

<button type="button" @click="addbtnfn(2)">添加</button>

(2)传参:

addbtnfn:function(step){}

(3)接参:

this.count+=step;

3.vue中的事件修饰符: 对事件可以起到限制作用,给出对应限定条件,就可以按照限定的规则执行事件。例如: @keyup.enter——————–>限制只有回车键才会执行对应方法 @click.stop———————–>阻止事件的传播 @mousemove.stop————–>阻止鼠标移动事件

<body>
    <div id="app">

        <input type="text" @keyup="mykeyupinfo">
        <!--事件无修饰符-->
        <input type="text" @keyup.enter="mykeyupinfo">
        <!--有事件修饰符-->

    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            mykeyupinfo() {
                console.log("hello 共享博客");
            }
        }

    })
本文转载于网络 如有侵权请联系删除

相关文章

  • 一文就让你搞懂http和https的通信过程及区别

    大家好,又见面了,我是全栈君。一、HTTP与HTTPS的区别1、端口:http端口号是80;https端口号是4432、传输协议:http是超文本传输协议,属于明文传输;https是安全的超文本传输协议,是经过SSL加密后的传输协议3、安全性:https使用了TLS/SSL加密,比http更加的安全4、证书:https需要申请ca证书二、HTTP的通信过程作为标准的C/S模型,http协议总是由客户端发起,服务器进行响应。1、DNS解析,域名系统DNS将域名解析成IP地址2、建立TCP连接,进行TCP的三次握手3、浏览器发送请求4、服务器响应浏览器,向浏览器发送数据5、通信完成,TCP连接关闭三、HTTPS的通信过程https通信是建立在ssl连接层之上的请求和响应,客户端将加密组件发送到服务端,服务端进行匹配后将数字证书等信息发送到客户端,客户端进行证书验证,验证通过后使用非对称加密对数据的密钥进行协商,协商后得到对称的加密密钥,然后使用对称算法进行TCP链接,然后与客户端进行三次握手后,进行数据传输,传输完成后,四次挥手,断开链接,通信结束。通信过程如下:1、客户端和服务器端通过T

  • Crack App | 低版本绕过某视频 App (dy) 商品抓包限制(读者投稿 - 将玄学进行到底)

    前奏今日文章来自Ledbetter哥的投稿,之前在群里做了一个预告然后就是一套Py流程,给大家安排上本篇没有代码,所以不要留言要代码了,给Better哥来波666吧正文环境配置1、安装夜神模拟器,版本推荐(7.0.1.3)2、安装好之后,安装虚拟手机环境(android5.0),直接使用多开的模拟器中推荐的即可3、安装好,手机之后配置xposed环境,这里推荐在夜神的HD应用市场中,搜索派大星xp国内版框架其实派大星xp国内版框架就是Xposed搜索直接下载安装就可以了安装完成需要重启设备4、重启完成5、Fiddeler代理配置这里就是简单的代理配置一下,模拟器的wifi长按按点击修改网络-高级选项-代理,填上Fiddler的地址就可以了亲测的时候安装的https证书,这个都是基本操作,大家应该都知道 效果认证1、亲测可以抓商品,各大榜单2、界面数据与抓包数据对比一切都是这么玄学,我擦~是不是不相信?我也是,所以我复现了一遍这是抓包的结果,666~

  • 【设计模式】Observer 观察者模式浅析

    Observer模式:事件处理模型 事件处理模型经常使用Observer+责任链军情观察室朝鲜生气了,后果不太严重。中美俄等国一直对朝鲜暗中观察,就朝鲜的一系列活动各自采取措施。 在被观察者朝鲜周围,有多双眼睛正观察着它呢,这些观察者有中国、美国、俄罗斯等等。。当朝鲜有活动时,这些观察者会采取相应的活动。用代码构造一下这个场景:publicclassClient{ publicstaticvoidmain(String[]args){ Koreak=newKorea(); k.fire(); } } classKorea{ Chinachina=newChina(); Usausa=newUsa(); publicvoidfire(){ System.out.println("朝鲜:发射核弹!"); china.warn(); usa.threaten(); } } classChina{ publicvoidwarn(){ System.out.println("中国:不要在我家门口玩火,否则后果自负!"); } } classUsa

  • 437. 路径总和 III

    题目描述给定一个二叉树,它的每个结点都存放着一个整数值。找出路径和等于给定数值的路径总数。路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点)。二叉树不超过1000个节点,且节点数值范围是[-1000000,1000000]的整数。示例root=[10,5,-3,3,2,null,11,3,-2,null,1],sum=8 10 /\ 5-3 /\\ 3211 /\\ 3-21 Return3.Thepathsthatsumto8are: 1.5->3 2.5->2->1 3.-3->11复制来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/path-sum-iii 著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。思路这道题目是要我们求解出任何一个节点出发到子孙节点的路径中和为指定值。注意这里,不一定是从根节点出发,也不一定在叶子节点结束。一种简单的思路就是直接递归解决,空间复杂度O(n)时间复杂度介于O(nlogn)和O(n^2),具体代

  • Nginx简介及安装

    1.Nginx简介Nginx:Nginx("enginex"),Nginx(“enginex”)是俄罗斯人IgorSysoev(塞索耶夫)编写的一款高性能的HTTP和反向代理服务器。也是一个IMAP/POP3/SMTP代理服务器;也就是说,Nginx本身就可以托管网站,进行HTTP服务处理,也可以作为反向代理服务器使用。Nginx已经在俄罗斯最大的门户网站──RamblerMedia(www.rambler.ru)上运行了3年时间,同时俄罗斯超过20%的虚拟主机平台采用Nginx作为反向代理服务器。在国内,已经有淘宝、新浪博客、新浪播客、网易新闻、六间房、56.com、Discuz!、水木社区、豆瓣、YUPOO、海内、迅雷在线等多家网站使用Nginx作为Web服务器或反向代理服务器。2.Nginx的优点跨平台:Nginx可以在大多数平台上运行。配置异常简单:非常容易上手。非阻塞、高并发连接:数据复制时,磁盘I/O的第一阶段是非阻塞的。官方测试能够支撑5万并发连接事件驱动:通信机制采用epoll模型,支持更大的并发连接。内存消耗小:处理大并发的请求内存消耗非常小。成本

  • 《浪潮之巅》吴军:特斯拉自动驾驶堪比中甲水平,全球5G看好华为

    乾明发自置地广场 量子位报道|公众号QbitAI自动驾驶方面,特斯拉和通用等第一梯队相比,就相当于“中甲”与“巴塞罗纳”。这是计算机科学家吴军,在其新书《全球科技通史》见面会上抛出的观点。吴军,曾担任谷歌资深研究员、腾讯副总裁,是谷歌中日韩搜索算法的主要设计者,也是《浪潮之巅》、《数学之美》、《文明之光》、《智能时代》等多部畅销书的作者。现在,他在得到上开设专栏课程的同时,也在硅谷做风险投资,是丰元资本的创始合伙人。为什么他会得出这样的观点?还要从其对科技发展历程的研究开始说起。“历史总在重演,科技永远向前。”这是他在研究人类几十万年的科技发展历程后得出的结论。在他看来,科技是唯一可叠加式进步的文明动力。以上这些洞察,不仅仅只停留在科技这一宏观层面上。他也结合自己的观察,分享了对5G、AI、自动驾驶等当下的热门科技话题的看法。如果你对科技行业发展趋势感兴趣,他的观点颇具参考价值。怎样理解科技的可叠加式进步?吴军举了一个例子:今天每一个三甲医院的大夫都敢说,自己的水平比50年前同一个科室的医生要高,但却没有一个中医敢说自己看病的水平比李时珍高。这背后的区别就在于,前者是系统性发展的产物,

  • 程序员你为什么这么累【续】:编码习惯之接口定义

    工作中,少不了要定义各种接口,系统集成要定义接口,前后台掉调用也要定义接口。接口定义一定程度上能反应程序员的编程功底。列举一下工作中我发现大家容易出现的问题:1.返回格式不统一同一个接口,有时候返回数组,有时候返回单个;成功的时候返回对象,失败的时候返回错误信息字符串。工作中有个系统集成就是这样定义的接口,真是辣眼睛。这个对应代码上,返回的类型是map,json,object,都是不应该的。实际工作中,我们会定义一个统一的格式,就是ResultBean,分页的有另外一个PageResultBean错误范例:2.没有考虑失败情况一开始只考虑成功场景,等后面测试发现有错误情况,怎么办,改接口呗,前后台都改,劳民伤财无用功。错误范例:3.出现和业务无关的输入参数如lang语言,当前用户信息都不应该出现参数里面,应该从当前会话里面获取。后面讲ThreadLocal会说到怎么样去掉。除了代码可读性不好问题外,尤其是参数出现当前用户信息的,这是个严重问题。错误范例:4.出现复杂的输入参数一般情况下,不允许出现例如json字符串这样的参数,这种参数可读性极差。应该定义对应的bean。错误范例:5.没

  • python调用linux系统命令

    python3脚本代码如下#!/usr/bin/python #-.-coding:utf-8-.- __author__='www.py3study.com' importgetpass importos classuser_and_password(object):   def__init__(self):     self.run()   defrun(self):     withopen('/etc/passwd','r')asfp:       ss=fp.readlines()       user_info=''.join(ss)       if'itadmin'inuser_info:         print(u'*********itadmin帐号已存在**************')         print(r'\\\\\\\\\更改itadmin密码////////////')         withopen

  • 各个 Maven仓库 镜像(包括国内)

    本来之前用的OSC的Maven库,不过最近客户这边换了联通的网络之后,OSC的库就完全连不上了,不知道是不是因为OSC用的是天翼赞助的网络的原因,所以收集了一些其他的镜像库首推当然还是OSC(不过联通的同学要注意了).OSC_Maven镜像库使用帮助<mirror>     <id>CN</id>     <name>OSChinaCentral</name>     <url>http://maven.oschina.net/content/groups/public/</url>     <mirrorOf>central</mirrorOf> </mirror>复制repo2<mirror>     <id>repo2</id>     <mirrorOf>central</mirrorOf>     <name>HumanReadableNameforthisMirror.</nam

  • Ubuntu 16.04 Spark单机环境搭建

    说道大数据和机器学习,就少不了Spark.本文主要介绍在Linux下搭建单机环境的Spark的步骤。安装JavaSE1、下载JAVASElinux版本。下载地址为: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html注意选择Linux版本,根据机器类型选择32位或者64位。2、下载jdk-8u131-linux-x64.tar.gz后,解压到自己指定目录。$tar-zxvfjdk-8u131-linux-x64.tar.gz-C/usr/lib/java复制3、配置JAVA环境变量。打开.bashrc文件。$nano~/.bashrc复制在.bashrc文件末尾增加如下内容:exportJAVA_HOME=/usr/lib/java/jdk1.8.0_131 exportJRE_HOME=${JAVA_HOME}/jre exportCLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib exportPATH=${JAVA_HOME}/b

  • 一站式元数据治理平台——Datahub入门宝典

    随着数字化转型的工作推进,数据治理的工作已经被越来越多的公司提上了日程。作为新一代的元数据管理平台,Datahub在近一年的时间里发展迅猛,大有取代老牌元数据管理工具Atlas之势。国内Datahub的资料非常少,大部分公司想使用Datahub作为自己的元数据管理平台,但可参考的资料太少。 所以整理了这份文档供大家学习使用。本文档基于Datahub最新的0.8.20版本,整理自部分官网内容,各种博客及实践过程。文章较长,建议收藏。新版本的文档请关注公众号大数据流动,会持续的更新~ 通过本文档,可以快速的入门Datahub,成功的搭建Datahub并且获取到数据库的元数据信息。是从0到1的入门文档,更多Datahub的高级功能,可以关注后续的文章更新。 文档共分为6个部分,层级结构如下图所示。 文档版权为公众号大数据流动所有,请勿商用。相关技术问题以及安装包可以联系笔者独孤风加入相关技术交流群讨论获取。 一、数据治理与元数据管理 背景 为什么要做数据治理?业务繁多,数据繁多,业务数据不断迭代。人员流动,文档不全,逻辑不清楚,对于数据很难直观理解,后期很难维护。 在大数据研发中,原始

  • C#用DesignSurface实现一个简单的窗体设计器

      System.ComponentModel.Design.DesignSurface是为设计组件提供一个用户界面,通过它可以实现一个简单的窗体设计器。   在构建之前,我们需要引入System.Design.dll,否则会出现找不到DesignSurface的错误。 1privatevoidForm1_Load(objectsender,EventArgse) 2{ 3//引用System.Deisgn.dll 4DesignSurfaceds=newDesignSurface(); 5//开始加载窗体 6ds.BeginLoad(typeof(Form)); 7ControldesignerContorl=(Control)ds.View; 8designerContorl.Dock=DockStyle.Fill; 9this.Controls.Add(designerContorl); 10}复制 运行后出现简单的一个UI设计器 但是该设计器并不能实现控件拖放和UI设计器,以及控件的属性配置。 为了支持从源代码加载初始化窗体,需要对源码中的相关方法进

  • 低功耗蓝牙配对绑定解读和实践

    什么是低功耗蓝牙配对?什么又是绑定?配对和绑定有什么区别?配对有什么好处?如何删除绑定信息?如何确定配对的安全等级?justwork的配对一定就不安全吗?如何开发自己的配对应用?本文将对以上问题进行论述。 本文涉及所有代码和脚本都已上传到百度云盘,云盘链接如下所示: 链接: https://pan.baidu.com/s/1FKTfY3Q_zBVvviO7KC7Gyg#list/path=%2Fblog   密码:y8fb Paring(配对)和bonding(绑定)是实现蓝牙射频通信安全的一种机制,有两点需要注意:一是paring/bonding实现的是蓝牙链路层的安全,对应用来说完全透明,也就是说,不管有没有paring/bonding,你发送或接收应用数据的方式是一样的,不会因为加了paring/bonding应用数据传输需要做某些特殊处理;二安全有两种选项:加密或者签名,目前绝大多数应用都是选择加密,后续我们也会以加密为重点进行讲述。实现蓝牙通信安全,除了paring/bonding这种底层方式,用户也可以在应用层去实现相同功能,两者

  • JavaScript的内置对象

    内置对象:对象是由属性和方法组成的,使用点语法访问 一,array数组 1.特点: 数组用于存储若干数据,自动为每位数据分配下标,从0开始 数组中的元素不限数据类型,长度可以动态调整 动态操作数组元素:根据元素下标读取或修改数组元素,arr[index] 2.属性和方法: 属性:length表示数组长度,可读可写 方法: push(data) :在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开返回添加之后的数组长度 pop() :移除末尾元素 ,返回被移除的元素 unshift(data) :在数组的头部添加一个或多个元素 ,返回添加之后的数组长度 shift() :移除数组的第一个元素 ,返回被移除的元素 splice():删除指定位置和长度的元素,返回被删除的元素 toString() :将数组转换成字符串类型,返回字符串结果 join(param) :将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接 ,返回字符串 reverse(

  • 我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。

    我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。

  • LOJ#10202. 「一本通 6.2 练习 5」樱花

    题意简述 求不定方程: \[\frac{1}{x}+\frac{1}{y}=\frac{1}{n!} \]的正整数解\((x,y)\)的数目。 题目分析 数学推导 这道题给人的第一印象是难以解决,因为\(n!\)是一个很大的数,不可能一一枚举答案。所以我们必须对题目中给出的式子进行处理。 \[\frac{1}{x}+\frac{1}{y}=\frac{1}{n!} \]\[\frac{x+y}{xy}=\frac{1}{n!} \]\[n!(x+y)=xy \]可得\(x\geqn!,y\geqn!\),代入\(x=n!+a,y=n!+b\)得 \[n!(n!+a+n!+b)=(n!+a)(n!+b) \]\[n!(2(n!)+a+b)=(n!)^2+n!(a+b)+ab \]\[2(n!)^2+n!(a+b)=(n!)^2+n!(a+b)+ab \]\[(n!)^2=ab \]因为每一组不同的\((a,b)\)都对应一组正整数解\((x,y)\),所以本体的答案就是\((n!)^2的因子个数。\) 朴素算法(40分) 先筛出从\(1\)到\(N\)之间每一个质数,在依次枚举\(n!\

  • 考研-英语经验贴

    作者:猕猴桃学长链接:https://www.zhihu.com/question/30489978/answer/636082947来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 考研英语一经验分享(英语基础差,考研70分)+纯干货经验分享 首先介绍一下自己,我的英语非常差,六级考了两次,第二次也只是刚好过线,是底子很差的类型,最终考研英语成绩70,对我来说,算是一个非常满意的分数了。所以我的方法,更适合基础不好的考生借鉴,英语大神请勿喷。2019.3.29主要更新内容:1.根据这一年多答疑情况,发现很多人对题型的分布还不是很清楚,特增加题型分布(见第一板块)2.根据一年多大家遇到的问题,对经验贴进行补充和完善(见第二板块) 很多人在刚开始复习的很长一段时间,都是对考研英语的题型分布不是很熟悉的,然而考研英语不同板块分值差别比较大,至少我们在复习过程中心里对各块分值应该有一个底,能抓住重点,所以首先介绍英语一的题型分布 第一部分英语知识运用(完形填空) 在一篇240~280词的文章中留出20个空白,要求考生从每题给出的4个选项中选出最佳答案,使补

  • Flink状态管理和容错机制介绍

    本文主要内容如下: 有状态的流数据处理; Flink中的状态接口; 状态管理和容错机制实现; 阿里相关工作介绍; 一.有状态的流数据处理# 1.1.什么是有状态的计算# 计算任务的结果不仅仅依赖于输入,还依赖于它的当前状态,其实大多数的计算都是有状态的计算。比如wordcount,给一些word,其计算它的count,这是一个很常见的业务场景。count做为输出,在计算的过程中要不断的把输入累加到count上去,那么count就是一个state。 1.2.传统的流计算系统缺少对于程序状态的有效支持# 状态数据的存储和访问; 状态数据的备份和恢复; 状态数据的划分和动态扩容; 在传统的批处理中,数据是划分为块分片去完成的,然后每一个Task去处理一个分片。当分片执行完成后,把输出聚合起来就是最终的结果。在这个过程当中,对于state的需求还是比较小的。 对于流计算而言,对State有非常高的要求,因为在流系统中输入是一个无限制的流,会运行很长一段时间,甚至运行几天或者几个月都不会停机。在这个过程当中,就需要将状态数据很好的管理起来。很不幸的是,在传统的流计算系统中,

  • MySQL参数化查询的IN 和 LIKE

    https://stackoverflow.com/questions/650455/c-sharp-parameterized-query-mysql-with-in-clausehttps://stackoverflow.com/questions/773641/mysql-parameterized-query-using-like   intstatus=4; stringids="1,14,145,43"; m.Parameters.AddWithValue("@Status",status); m.Parameters.AddWithValue("@IDs",ids); UPDATETABLE_1SETSTATUS=@StatusWHEREFIND_IN_SET(ID,@IDs)>0;复制

  • JAVA线程

    进程是程序在处理机中的一次运行。一个进程既包括其所要执行的指令,也包括了执行指令所需的系统资源,不同进程所占用的系统资源相对独立。所以进程是重量级的任务,它们之间的通信和转换都需要操作系统付出较大的开销。线程是进程中的一个实体,是被系统独立调度和分派的基本单位。线程自己基本上不拥有系统资源,但它可以与同属一个进程的其他线程共享进程所拥有的全部资源。所以线程是轻量级的任务,它们之间的通信和转换只需要较小的系统开销。Java支持多线程编程,因此用Java编写的应用程序可以同时执行多个任务。Java的多线程机制使用起来非常方便,用户只需关注程序细节的实现,而不用担心后台的多任务系统。Java语言里,线程表现为线程类。Thread线程类封装了所有需要的线程操作控制。在设计程序时,必须很清晰地区分开线程对象和运行线程,可以将线程对象看作是运行线程的控制面板。在线程对象里有很多方法来控制一个线程是否运行,睡眠,挂起或停止。线程类是控制线程行为的唯一的手段。一旦一个Java程序启动后,就已经有一个线程在运行。可通过调用Thread.currentThread方法来查看当前运行的是哪一个线程。clas

  • A NB群友 【记忆化搜索】(2019年华南理工大学程序设计竞赛(春季赛))

    冲鸭!去刷题:https://ac.nowcoder.com/acm/contest/625/A 题目描述  CC是著名的算法竞赛选手,他不仅人长得帅,而且技术了得,自然而然就有了许多粉丝。为了能帮助粉丝们提高竞技水平,CC建立了一个粉丝群,每天CC都会在粉丝群里和群友深入交流黑科技。然而,有些群友老是不努力训练,成天想着复读,比如当CC在群里面发了个整数0,那紧接着就会有群友发整数1,然后又会有群友发整数2……这引起了CC的不满,于是CC决定踢掉一些群友。CC的粉丝群人数为无穷大。当CC发出整数0后,其他群友就会跟着轮流发整数1,2,3,4,...,依此类推。需要注意的是,每个群友都会恰好发一次整数,每个群友发的整数两两不同。CC认为,在不考虑前导零的情况下,如果某个群友发的整数在十进制表示下的各位数字不含0及1,那么这个群友就是NB的,否则就是不NB的。例如,群友A发的整数是3482,该数的各位数字分别为3、4、8、2,其中不含0、1,因此群友A是NB的;另一方面,群友B发的整数402,而该数的十位数字是0,因此群友B是不NB的。现在CC决定,踢掉所有不NB的群友。于

相关推荐

推荐阅读