码迷,mamicode.com
首页 > Web开发 > 详细

vue.js事件,属性,以及交互

时间:2017-12-17 18:15:59      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:www.   code   data   利用   post   lang   错误   相加   source   

 这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class、style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一个百度下拉列表,今天学习完之后,感触最深的就是vue主要是逻辑上的应用,减少了DOM的操作,并且vue还用到了原生的方法,所以学好js高程很有必要。

一、如何利用vue阻止事件冒泡以及阻止事件的默认行为和了解什么是事件对象

  在介绍事件冒泡之前,我们来了解一下事件,在上篇博客中我们知道事件的一般形式为v-on:click/mouseover,但是在vue中我们更加推荐@click/mouseover这种简写的方式

  1、事件对象:@click="show($event)"  

  技术分享图片事件对象

 

 2、阻止事件冒泡:
  方法有两种
    a). ev.cancelBubble=true;    来自于原生的方法
    b). @click.stop 推荐
  方法一:利用ev.cancelBubble=true阻止事件冒泡,当我们点击按钮只会弹出1,而不会弹出2
<!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>

 

方法二:利用@click.stop阻止事件冒泡,只会弹出1,不会弹出2
<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>

 

3、阻止事件的默认行为
  方法有两种:
  a). ev.preventDefault();      //来自原生
  b). @contextmenu.prevent 推荐
方法一:利用ev.preventDefault()阻止事件的默认行为
  右键点击按钮只会弹出1,不会出现其他的默认行为
<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>

 

 方法二:利用@事件.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(){
                        alert(1);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @contextmenu.prevent="show()">
    </div>
</body>
</html>

 

4、键盘事件
  键盘:
   @keydown   $event ev.keyCode
@keyup

常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件深入</title>
    <script src="2016-9-13/vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:"#box",
                data:{

                },
                methods:{
                    show:function (ev) {
                        alert(ev.keyCode);

                    },
                    show2:function () {
                        alert(2)
                    }
                }

            })
        }
    </script>
</head>
<body>
<div id="box">
    <!--当键按下去的时候弹出键码-->
    <!--<input type="text"  @keydown="show($event)">-->
    <!--当键起来的时候弹出键码-->
    <!--<input type="text"  @keyup="show($event)">-->
    <!--按enter键才能弹出2-->
    <!--<input type="text"  @keyup.enter="show2($event)">-->
    <!--按上下左右键弹出2-->
    <input type="text"  @keyup.up="show2($event)">
    <input type="text"  @keyup.down="show2($event)">
    <input type="text"  @keyup.left="show2($event)">
    <input type="text"  @keyup.right="show2($event)">
</div>

</body>
</html>
二、属性
  属性是通过v-bind:属性 的形式来绑定属性的,简写方式为:属性=‘‘,更加推荐简写方式
  1、src属性
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    url:https://www.baidu.com/img/bd_logo1.png
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <!--<img src="{{url}}" alt="">-->          //效果可以出来但是会报一个404错误
        <img v-bind:src="url" alt="">            //效果可以出来但是不会报404错误
    </div>
</body>
</html>

 

2、class属性
`  有以下几种形式
    :class="[red]"  red是数据
    :class="[red,b,c,d]"
    :class="{red:a, blue:false}"
    :class="json"
以下几个例子中:文字....这几个字都会变成红色背景为蓝色
:class="[red]"形式 其中red是数据

<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:‘#box‘,
                data:{
                    red:‘red‘
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="[red]">文字...</strong>
    </div>
</body>
</html>

  

:class="[red,b,c,d]"形式

<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:‘#box‘,
                data:{
                    red:‘red‘,
                    b:‘blue‘
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="[red,b]">文字...</strong>
    </div>
</body>
</html>

  

:class="{red:a, blue:false}"形式

<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    a:true,
                    b:false
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="{red:a,blue:b}">文字...</strong>
    </div>
</body>
</html>

 

:class="json"
<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    json:{
                        red:true,
                        blue:true
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="json">文字...</strong>
    </div>
</body>
</html>

 

3、style属性
  有以下几种形式:跟class的形式一样
    :style="[c]"
    :style="[c,d]"
    注意: 复合样式,采用驼峰命名法
    :style="json"

    
//常见用法
<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{

                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="{color:‘red‘}">文字...</strong>
    </div>
</body>
</html>

 


//:style="[c]"形式
<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    c:{color:‘red‘}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="[c]">文字...</strong>
    </div>
</body>
</html>
//:style="[c,d]"形式

<!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>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    c:{color:‘red‘},
                    b:{backgroundColor:‘blue‘}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="[c,b]">文字...</strong>
    </div>
</body>
</html>

 





//:style="json"形式:接收的是json数据

<!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> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:#box, data:{ a:{ color:‘red‘, backgroundColor:‘gray‘ } }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :style="a">文字...</strong> </div> </body> </html>

 

三、交互:想要用vue来进行交互,我们在html页面要引入一个叫做vue-resouce.js的文件,这个文件提供了get,post,jsonp等方法来获取提交数据

1、get方法进行交互
  1.1获取普通文本:其中a.txt就是同级目录下的一个普通文本文件,点击按钮能够弹出a.txt的文件内容
    
<!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 src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.get(a.txt).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.data);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

 

1.2、向服务器发送数据:将数据传给后台,进行计算,并且弹出计算结果
<!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 src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.get(‘get.php‘,{
                            a:1,
                            b:2
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

 

get.php文件:实现2个数的相加运算
<?php
$a=$_GET[a];
$b=$_GET[b];
echo $a+$b;
?>

 

2、post方法进行交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</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 src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.post(post.php,{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

 

post.php文件:实现数字相减
<?php
  $a=$_POST[‘a‘];
  $b=$_POST[‘b‘];
  echo $a-$b;
  ?>

 

3、jsonp进行交互
<!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 src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.jsonp(https://sug.so.360.cn/suggest,{
                            word:a
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</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 src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.jsonp(https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su,{
                            wd:a
                        },{
                            jsonp:cb‘        //callback名字,默认名字就是"callback",API是什么就写什么
 }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); };
</script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>

 


四、百度下拉列表实例
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</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>
        .gray{
            background: #ccc;
        }
    </style>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{
                    myData:[],
                    t1:‘‘,
                    now:-1
                },
                methods:{
                    get:function(ev){
                        if(ev.keyCode==38 || ev.keyCode==40)return;        //因为再按上下键的时候input标签的值会发生变化,会再一次进行jsonp请求,所以要阻止上下键返回值

                        if(ev.keyCode==13){
                            window.open(https://www.baidu.com/s?wd=+this.t1);        //按enter键的时候跳转到当前页面
                            this.t1=‘‘;
                        }

                        this.$http.jsonp(https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su,{      //从接口获取数据,并将数据用myData存起来
                            wd:this.t1
                        },{
                            jsonp:cb
                        }).then(function(res){
                            this.myData=res.data.s;
                        },function(){
                            
                        });
                    },
                    changeDown:function(){        //按下键实现++运算         
                        this.now++;
                        if(this.now==this.myData.length)this.now=-1;
                        this.t1=this.myData[this.now];
                    },
                    changeUp:function(){        //按上键实现--运算
                        this.now--;
                        if(this.now==-2)this.now=this.myData.length-1;
                        this.t1=this.myData[this.now];
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
        <ul>
            <li v-for="value in myData" :class="{gray:$index==now}">        //给当前添加高亮
                {{value}}
            </li>
        </ul>
        <p v-show="myData.length==0">暂无数据...</p>
    </div>
</body>
</html>

 




















  

  

  

 

vue.js事件,属性,以及交互

标签:www.   code   data   利用   post   lang   错误   相加   source   

原文地址:http://www.cnblogs.com/15fj/p/8047986.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!