美文网首页Web 前端开发 让前端飞
【vue干货】vue事件

【vue干货】vue事件

作者: 涂大宝 | 来源:发表于2018-01-05 11:23 被阅读0次

    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事件

        本文链接：https://www.haomeiwen.com/subject/ulvjnxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Web 前端开发

        让前端飞

        关于我们|服务条款|联系我们|【vue干货】vue事件|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！