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. day20——规范化目录

    day20 为什么要有规范化目录 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 可维护性高: 定 ...

  2. shell中通过eval执行一个字符串命令

    #!/bin/bash echo "Switch Directory : /home/pktgen-2.9.0" dir="/home/pktgen-2.9.0" ...

  3. 【C#】课堂知识点#4

    1.回顾类中基本结构. 成员分为: a.(数据成员) , b.(方法成员) 数据成员: 字段 方法成员:方法,构造函数,属性,索引器,运算符. 属性的作用: 对字段进行访问提供get,set方法. 类 ...

  4. 如何将 Redis 用于微服务通信的事件存储

    来源:Redislabs作者:Martin Forstner 翻译:Kevin (公众号:中间件小哥) 以我的经验,将某些应用拆分成更小的.松耦合的.可协同工作的独立逻辑业务服务会更易于构建和维护.这 ...

  5. [CodeChef-ANUDTQ] Dynamic Trees and Queries

    类似维护括号序列,给每个点建两个点,然后所有操作都能轻松支持了.注意sum和lastans是long long. #include<cstdio> #include<algorith ...

  6. navicat 连接 mysql 提示Client does not support authentication protocol requested by server错误

    安装完mysql后,命令行登录没问题,但是用Navicat连接出现提示性错误.Mysql版本为:8.0.15 命令如下: 1.use mysql; 2.alter user 'root'@'local ...

  7. quartz 定时器执行

    类存储job信息 public class JobInfo {//省略setter getter String jobName; String jobGroup; Class<? extends ...

  8. ChipGenius 识别U盘主控信息

    ChipGenius 识别U盘主控信息 ================== End

  9. font-size 你所不知道的值

    说起 font-size  ,大家应该都知道是做什么的: CSS 属性指定字体的大小.因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小. 那么font-size 的值也是多 ...

  10. ZYNQ block design警告：[BD 41-968] AXI interface port /axi_lite4 is not associated to any clock port. It may not work correctly.

    前言 在Block design中引出AXI接口给外部,检查设计告警如下: [BD 41-968] AXI interface port /axi_lite4 is not associated to ...