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. HTML常用技巧

    1. 为网页链接添加快捷键:accesskey 属性 https://zhidao.baidu.com/question/2267343500557447508.html 2. 键盘事件设置快捷键:h ...

  2. 基于卷积神经网络的面部表情识别(Pytorch实现)----台大李宏毅机器学习作业3(HW3)

    一.项目说明 给定数据集train.csv,要求使用卷积神经网络CNN,根据每个样本的面部图片判断出其表情.在本项目中,表情共分7类,分别为:(0)生气,(1)厌恶,(2)恐惧,(3)高兴,(4)难过 ...

  3. PHP 可变参数

    <?php //php 可变参数 function concatenate( ...$strings): string { $string = ''; //此时的strings 是一个数组 fo ...

  4. idea 代码热启动配置方法

    Restart Server:代码已更新重启tomcat服务器

  5. Python 获取本月的最后一天

    一.需求 现在有一个场景,需要每月的最后一天,发送一封邮件. 二.获取本月最后一天 有没有办法使用Python的标准库轻松确定(即一个函数调用)给定月份的最后一天? 答案是有的,使用 datetime ...

  6. Python2与Python3兼容

    Python2与Python3兼容 python3写的代码如何也能在pyhon2上跑?请无论如何加上这一句,python3没有啥影响 from __future__ import absolute_i ...

  7. REDISTEMPLATE如何注入到VALUEOPERATIONS

    REDISTEMPLATE如何注入到VALUEOPERATIONS 今天看到Spring操作redis  是可以将redisTemplate注入到ValueOperations,避免了ValueOpe ...

  8. 如何为非常不确定的行为（如并发）设计安全的 API，使用这些 API 时如何确保安全

    原文:如何为非常不确定的行为(如并发)设计安全的 API,使用这些 API 时如何确保安全 .NET 中提供了一些线程安全的类型,如 ConcurrentDictionary<TKey, TVa ...

  9. 直线DDA，直线和圆的Bresenham算法

    // DDA.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<Windows.h> #include<g ...

  10. 可拖拽dialog

    指令的封装转自https://blog.csdn.net/sinat_21902709/article/details/86545444 可拖拽dialog应用于很多弹出框,所以需要作用于全局 在插件 ...