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. 【LEETCODE】49、数组分类，简单级别，题目：566，1089

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  2. Rediskey生命周期管理-key聚合

    | 导语 Redis中的数据以k-v的方式组织:为了方便管理key一般具有某些特定的模式:有些key直接是由mysql中的表行数据转化而来:如果要对Redis的key进行生命周期管理,由于Redis的 ...

  3. 记一次git merge 事故

    最近发生在自己身上的一件矬事儿,一不小心把matser上别人的代码给冲掉了,事后追溯了下原因. 1.准备三个分支,分别从master拉取 realease/v1.0分支 和 realease/bugf ...

  4. WPF 的 Application.Current.Dispatcher 中，为什么 Current 可能为 null

    原文:WPF 的 Application.Current.Dispatcher 中,为什么 Current 可能为 null 在 WPF 程序中,可能会存在 Application.Current.D ...

  5. centos7 设置 查看 开机 启动项

    1.查看开机自启项centos7自启项已不用chkconfig改为:systemctl list-unit-files左边是服务名称,右边是状态,enabled是开机启动,disabled是开机不启动 ...

  6. 【洛谷 P3804】 【模板】后缀自动机

    题目链接 #include <cstdio> #include <cstring> #include <algorithm> using namespace std ...

  7. React Native 开发豆瓣评分（二）路由配置

    路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...

  8. SAP Marketing Cloud功能简述(四) : 线索和客户管理

    这个系列的前三篇文章Grace Dong已经给大家带来了下面的内容: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Clou ...

  9. Mac 修改hostname

    mac终端上输入命令: sudo scutil --set HostName newname # 实例 sudo scutil --set HostName master

  10. linux网卡名称修改

    vim /etc/sysconfig/grub ,在倒数第二行添加如下代码 net.ifnames=0 biosdevname=0 GRUB_TIMEOUT=5 GRUB_DISTRIBUTOR=&q ...