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. PB 奇葩BUG

    1. 在数据窗口的Edit 中选则CHeckBox 后,必须给默认值,否则会导致数据保存不了,也无提示. 2.当使用数据窗口的 setfile()函数时 如果 条件中有两个LIKE 则会报错,一个LI ...

  2. go 学习笔记（1）go command

    常用命令 go command [arguments] 1) go build  跨平台编译: env GOOS=linux GOARCH=amd64 go build 2) go install : ...

  3. SQL Server 索引优化-----数据库引擎优化顾问

    本文将根据“数据库引擎优化顾问”(DTA)来发现无用或缺失的索引. 要使用“数据库引擎优化顾问”,首先需要对数据库负载进行监控,为数据库负载分析准备数据.从SSMS的工具中,打开SQL Server  ...

  4. Java线程同步类容器和并发容器（四）

    同步类容器都是线程安全的,在某些场景下,需要枷锁保护符合操作,最经典ConcurrentModifiicationException,原因是当容器迭代的过程中,被并发的修改了内容. for (Iter ...

  5. 创建Core项目使用IdentityServer4

    本文主要参照https://www.bilibili.com/video/av42364337/?p=4 英文帮助文档:https://identityserver4.readthedocs.io/e ...

  6. Logback+ELK+SpringMVC搭建日志收集服务器

    (转) 1.ELK是什么? ELK是由Elasticsearch.Logstash.Kibana这3个软件的缩写. Elasticsearch是一个分布式搜索分析引擎,稳定.可水平扩展.易于管理是它的 ...

  7. Part_two:Redis之发布订阅

    Redis发布订阅 发布订阅的命令 PUBLISH channel msg 将信息 message 发送到指定的频道 channel SUBSCRIBE channel [channel ...] 订 ...

  8. PS1变量设置

    \d :代表日期,格式为weekday month date \H :完整的主机名 \h :主机的第一个名字 \t :显示时间为24小时格式(HH:MM:SS) \T :显示时间为12小时格式 \A ...

  9. Linux多IP配置

    # ifconfig eth0:1 172.168.1.222

  10. 过滤器+用session验证是否登陆过

    过滤器: public class MyActionFilter : ActionFilterAttribute//继承ActionFilterAttribute类 { public override ...