test011.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<div id="example">
    <h2>1.绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('eightone')">test2</button>
    <!--得到button的文本-->
    <!--$event代表事件对象,不传参数,实际上传的是event-->
    <button @click="test3">test3</button>
    <!--自己指定了参数-->
    <button @click="test4(123,$event)">test4</button>

    <h2>2.事件修饰符</h2>
    <!--如果嵌套两个div会出现问题,叫事件冒泡(就是点击最上面的方块会先后触发里面方块和外面方框中弹出的内容)-->
    <div style="width:200px;height:200px;background: red" @click="test5">
        <!--@click.stop停止事件冒泡-->
        <div style="width:100px;height:100px;background: blue" @click.stop="test6"></div>
    </div>

    <!--事件的默认行为-->
    <!--@click.prevent阻止事件的默认行为-->
    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

    <h2>3.按键修饰符</h2>
    <!--按下Enter键有提示,按键抬起来的时候触发up-->
    <!--@keyup.enter,按下enter键才会触发,注意并不是所有按键都能直接写名称-->
    <input  type="text" @keyup.13="test8">
    <input  type="text" @keyup.enter="test8">

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#example',
        data:{
            test1(){
                alert('test1')
            },
            test2(msg){
                alert(msg)
            },
            //没有指定参数,自动传入event
            test3(event){
                alert(event.target.innerHTML)
            },
            //指定参数123
            test4(number,event){

                alert(number+'---'+event.target.innerHTML )
            },
            test5(){
                alert('out')
            },
            //需要停止事件冒泡
            test6(){
                //以前写法event.stopPropagation()
                alert('inner')
            },
            //现在不想过去,阻止事件的默认行为
            test7(){
                //以前写法event.preventDefault()
                alert('点击了!')
            },
            test8(event){
               /* if(event.keyCode===13){
                    //每一个键盘上的键都对应一个keyCode
                    alert(event.target.value+' '+event.keyCode)
                }*/
                alert(event.target.value+' '+event.keyCode)
            }
        }
    })
</script>
</body>
</html>

(尚011)Vue事件处理的更多相关文章

  1. Vue事件处理

    前面的话 Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它 ...

  2. 04-Vue入门系列之Vue事件处理

    4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...

  3. Vue入门系列（四）之Vue事件处理

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue 事件处理

    原生的js事件处理 原生的js事件处理,可以分为:直接内联执行代码,或者绑定事件函数. 在内联的事件处理函数内部或者事件绑定的方法内部的作用域中的this都是指向当前的dom对象.如何在vue绑定的元 ...

  5. 13 Vue事件处理

    监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: ...

  6. 011——VUE中使用object与array控制class

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. (尚022)Vue案例_初始化显示(十分详细!!!)

    项目结构目录 所需资料: comment_page文件夹: ====================================================================== ...

  8. (尚020)Vue打包发布项目

    1.项目的打包与发布 1.1打包: npm run build 报错: 原因:原来eslint是一个语法检查工具,但是限制很严格,在我的vue文件里面很多空格都会导致红线(红线可以关闭提示),虽然可以 ...

  9. (尚019)Vue基于脚手架编写项目

    vue_demo目录结构截图: (1)图一 (2).图二 (3).图三 (四).图四 (5).图五 (6).图六 (7).图七 不能随便改入口文件的名字,因为已经配置好了 (8).图八 (9).图九 ...

随机推荐

  1. Go 协程

    Go 协程 协程与传统的系统级线程和进程相比,协程的优势在于其"轻量级",可以轻松创建上百万个协程而不会导致系统资源衰竭,所以协程也叫做轻量级线程. 在Go中goroutine就是 ...

  2. SAS学习笔记59 OPTIONS系统选项

    带VALUE选项的OPTIONS过程将指定选项的值.范围及该值如何设置的信息打印到日志窗口 在日志窗口打印的输出如下图所示 将GETOPTION函数作为%SYSFUNC宏函数的参数,从而获取系统选项设 ...

  3. 当base-package="controller.*"时，可见packageSearchPath为"classpath*:controller/*/**/*.class"： 当base-package="controller.**"时，可见packageSearchPath为"classpath*:controller/**/**/*.class"：

    今天在配置Spring的component-scan时,发现了一个有趣的问题.就是在指定base-package时,如果使用了星号通配符*,有时会出现类扫描不到的情况.下面研究一下这个问题. 先介绍一 ...

  4. Java基础系列7——集合系列（1）框架概述

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 集合框架概述 Jav ...

  5. golang ---网卡信息

    package main import ( "fmt" "log" "net" "strings" ) type Net ...

  6. go liteIDE 快捷键

    Goland常用快捷键文件相关快捷键: CTRL+E,打开最近浏览过的文件.CTRL+SHIFT+E,打开最近更改的文件.CTRL+N,可以快速打开struct结构体.CTRL+SHIFT+N,可以快 ...

  7. Ado.Net查询语句使用临时表做条件

    using System; using System.Data; using System.Data.SqlClient; using System.Text; namespace WindowsFo ...

  8. 12.1 Mapping手动创建

    只能在index里的field不存在的时候,才能指定新field的数据类型,field有数据后,就不能再修改field的类型了 可创建的类型如下: integer double date text/s ...

  9. SVN上文件出现左侧黄色箭头右侧绿色箭头的双向箭头

    转自:https://blog.csdn.net/jiuweihu521/article/details/90902152 与资源库对比又没有要提交的东西,网上说删除这个目录,然后更新整个配置库..我 ...

  10. Java必备技能：clone浅克隆与深克隆

    介绍 一直以来只知道Java有clone方法,该方法属于Object的,对于什么是浅克隆与深克隆就比较模糊了,现在就来补充学习一下. 概念 浅拷贝(浅克隆)复制出来的对象的所有变量都含有与原来的对象相 ...