碼上歡樂
相關內容    簡體    繁體

vue.js事件，屬性，以及交互

本文轉載自   查看原文   2017-12-17 16:21   2315    vue

 這是我學習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>
 
        
 
        
 
 
        



















　　
 
        
　　
 
        
　　
 
        
 
 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        vue.js 事件綁定  
        Vue.js的計算屬性  
        vue(vue.js)中的鍵盤事件  
        【vue.js】綁定click事件  
        Vue.js (取消／綁定)事件  
        vue.js 鍵盤enter事件的使用  
        vue.js 鍵盤enter事件的使用  
        Vue.js 計算屬性是什么  
        vue.js插值，插入圖片，屬性  
        vue.js 獲取標簽屬性值  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM