【vue干货】vue事件

vue干货第二集

Vue和angular的区别
  • vue是一个mvvm框架（库），和angular类似，比较容易上手，小巧
  • vue：
    ■ 简单，易学 中文
    ■ 指令以v-xxx
    ■ 一片html代码配合上json，在new出来一个vue的实例
    ■ 一个个人维护项目
    ■ 适合：移动端项目，小巧
    ■ vue的发展势头很猛，GitHub上的star数量已经超越angular
  • angular：
    ■ 上手难，框架大一些
    ■ 指令以ng-xxx
    ■ 所有属性和方法都挂到¥scope身上
    ■ angular由Google维护
    ■ 适合：pc端项目
    *共同点：不兼容低版本IE
常用指令：
  • 指令的含义：扩展html标签的功能,属性
  • angular常用的指令：ng-model（放在表单的input元素上）, ng-controller
    *对应的vue也有常用的指令：v-model： 一般用在表单元素(input)上 双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{
                    msg:'welcome vue'
                }
            });
        };
    </script>
</head>
<body>
    <input type="text" v-model="msg">
    <br>
    {{msg}}
</body>
</html>
  • v-for 循环数组指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环数组</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
</body>
</html>
  • 如何循环json文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环json文件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}   {{$index}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="value in json">
                {{value}}   {{$index}}  {{$key}}
            </li>
        </ul>

        <hr>
        <ul>
            <li v-for="(k,v) in json">
                {{k}}   {{v}}   {{$index}}  {{$key}}
            </li>
        </ul>
    </div>
</body>
</html>
  • 事件：在angularjs中是ng-click，在vue里面的基础事件 : v-on:click='函数'
添加一个按钮，点击按钮时在页面中添加一个tomato
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //数据
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                },
                methods:{
                    add:function(){
                        this.arr.push('tomato');
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" v-on:click="add()">
        <br>
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
</body>
</html>

还有一些其他的事件：
v-on:mouseover
v-on:mouseout
v-on:mousedown
v-on:dblclick

  • v-show 显示隐藏：点击按钮div消失的demo，通过按钮的点击控制v-show的属性，
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //数据
                    a:true
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" v-on:click="a=false">
        <div style="width:100px; height:100px; background: red" v-show="a">

        </div>
    </div>
</body>
</html>
  • vue 事件简写
    v-on:click 等价 @click

*事件冒泡
阻止冒泡：cancelBubble

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止冒泡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(ev){
                        alert(1);
                        ev.cancelBubble=true;
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <div @click="show2()">
            <input type="button" value="按钮" @click="show($event)">
        </div>
    </div>
</body>
</html>

方法2: click.stop 推荐！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止冒泡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <div @click="show2()">
            <input type="button" value="按钮" @click.stop="show()">
        </div>
    </div>
</body>
</html>

阻止默认行为：
1.preventDefault
2.contextDefault.prevent推荐！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(ev){
                        alert(1);
                        ev.preventDefault();
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @contextmenu="show($event)">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @contextmenu.prevent="show()">
    </div>
</body>
</html>

常用的键 ：简介的形式
回车@keyup/keydown.enter ，
上@keyup/keydown.up，
下@keyup/keydown.down，
左@keyup/keydown.left，
右@keyup/keydown.right ，

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,744评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,505评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,105评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,242评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,269评论 6赞 389
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,215评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,096评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,939评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,354评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,448评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,048评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2赞 354

推荐阅读更多精彩内容

  • Vue官方教程笔记（Vue 1.X）
    1.安装 可以简单地在页面引入Vue.js作为独立版本，Vue即被注册为全局变量，可以在页面使用了。 如果希望搭建...
    Awey阅读 11,015评论 4赞 129
  • Vue.js要点记录
    1. 初识vue (1) vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧m...
    懒心丶阅读 301评论 0赞 0
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,048评论 0赞 29
  • vue.js1.0笔记
    基本格式 以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。 ...
    kirito_song阅读 766评论 0赞 21
  • 悼念春华
    今夜注定失眠。晚上在香即福鱼庄与朋友欢聚，席间发现手机显示有一个未接来电，是好友春华的，赶紧回拨说对不起，太闹了，...
    如歌的行板紫雪阅读 894评论 1赞 1