【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 ，

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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