碼上快樂

相關內容    簡體    繁體

Vue_(基礎)Vue中的事件

本文轉載自   查看原文   2019-02-23 00:13   3845    Vue

 

 

　　Vue.js中文文檔　　傳送門

 

　　Vue@事件綁定
　　　　v-show：通過切換元素的display CSS屬性實現顯示隱藏；
　　　　v-if：根據表達式的真假實現顯示隱藏，如果隱藏，它綁定的元素都會銷毀，顯示的時候再重建；
　　　　v-else：與v-if配對使用；
　　　　v-elseif：與v-if配對使用；
　　　　v-bind：屬性綁定；
　　　　v-cloak：可以隱藏未編譯的 Mustache 標簽直到實例准備完畢，也就是隱藏{{}}；

 

　　Learn
　　　　一、event事件
　　　　二、v-show和v-if指令
　　　　三、鍵盤事件
　　　　四、v-bind指令 

 

　　項目結構

　　

　　【每個demo下方都存有html源碼】

 

 

 

一、event事件　　傳送門

　　Vue的事件：獲取事件對象$event；

　　button上綁定show()方法獲得Vue上的event事件

                        show(e){
                            console.log("show");
                            //獲得Vue事件
                            console.log(e);
                        }

 

                <button @click="show($event)">click show!</button><br />

 

　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            
            window.onload = () =>{
                new Vue({
                    el:'#Gary',
                    data:{
                           result:0
                    },
                    methods:{
                        //無參
                        show(e){
                            console.log("show");
                            //獲得Vue事件
                            console.log(e);
                        },
                        //帶參
                        add(a,b){
                            console.log("add");
                            this.result+=a+b;
                        }
                    }
                });
            }
            
        </script>
    </head>
    
    
    <body>
        <div id="Gary">
                <button @click="show($event)">click show!</button><br />
                <!--鼠標點擊-->
                <button @click="add(1,2)">click add!</button>{{result}}
                <!--鼠標進入,使用修飾符once只觸發一次-->
                <button @mouseenter.once="add(10,20)">enter add!</button>{{result}}
        </div>
        
    </body>
</html>
View Code

 

　　event的事件冒泡：事件會向上傳播

　　　　　　　　methods:{
                        //無參
                        show(e){
                            console.log("show");
                        },
                        showA(){
                            console.log("showA");
                        },
                        showB(){
                            console.log("showB");
                        }
                    }

 

<div @click="showA()">
                        <div @click="showB()">
                            <button @click="show($event)">click A!</button>
                        </div>
                </div>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            
            window.onload = () =>{
                new Vue({
                    el:'#Gary',
                    data:{
                           result:0
                    },
                    methods:{
                        //無參
                        show(e){
                            console.log("show");
                        },
                        showA(){
                            console.log("showA");
                        },
                        showB(){
                            console.log("showB");
                        }
                    }
                });
            }
            
        </script>
    </head>
    
    
    <body>
        <div id="Gary">
                <!--<button @click="show($event)">click show!</button><br />-->
                <!--鼠標點擊-->
                <!--<button @click="add(1,2)">click add!</button>{{result}}-->
                <!--鼠標進入,使用修飾符once只觸發一次-->
                <!--<button @mouseenter.once="add(10,20)">enter add!</button>{{result}}-->
        
        <!--事件冒泡-->
                <div @click="showA()">
                        <div @click="showB()">
                            <button @click="show($event)">click A!</button>
                        </div>
                </div>        
        </div>
        
    </body>
</html>
Gary_event.html

 

　　事件冒泡：即事件開始時由最具體的元素（文檔中嵌套最深的那個元素）接收，然后逐級向上傳播到較不為具體的節點

　　原生js阻止事件冒泡，需要先獲取事件對象，再調用stopPropagation()方法；

　　vue事件修飾符stop，例@clikc.stop；

                      show(e){
                            console.log("show");
                            e.stopPropagation();
                        }

 

<button @click.stop="show($event)">click A!</button>

 

　　事件默認行為：網頁元素，都有自己的默認行為，例如，單擊超鏈接會跳轉...

　　原生js方式需要獲取事件對象，再調用preventDefault()方法；

　　在vue中則使用修飾符prevent，例@clikc.prevent

                        showLink(e){
                            e.preventDefault();
                        }

 

    <a href="Gary_event.html" @click.prevent="showLink($event)">click link!</a>

 

 

二、v-show和v-if指令　　傳送門

　　v-show：通過切換元素的display CSS屬性實現顯示隱藏；

　　v-if：根據表達式的真假實現顯示隱藏，如果隱藏，它綁定的元素都會銷毀，顯示的時候再重建；

                new Vue({
                    el:'#Gary',
                    data:{
                           flag:true
                    }
                });

 

            <button @click="flag = !flag">click</button>
            <h1 v-show="flag">Hello Gary!</h1>
            <h1 v-if="flag">Hello Gary!</h1>

 

　　v-show是顯示與隱藏，v-if是創建與銷毀!!!

 

　　v-if、v-else、v-else-if控制流程語句

                   data:{
                           flag:true,
                           num:0
                    }

 

        <button @click="num=1">--1--</button>
        <button @click="num=2">--2--</button>
        <button @click="num=3">--3--</button>
        <h2 v-if="num=== 1">語文課</h2>
        <h2 v-else-if="num=== 2">數學課</h2>
        <h2 v-else>英語課</h2>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            
            window.onload = () =>{
                 new Vue({
                    el:'#Gary',
                    data:{
                           flag:true,
                           num:0
                    }
                });
            }
            
        </script>
    </head>
    
    
    <body>
        <div id="Gary">
            <button @click="flag = !flag">click</button>
            <h1 v-show="flag">Hello Gary!</h1>
            <h1 v-if="flag">Hello Gary!</h1>

        
        <button @click="num=1">--1--</button>
        <button @click="num=2">--2--</button>
        <button @click="num=3">--3--</button>
        <h2 v-if="num=== 1">語文課</h2>
        <h2 v-else-if="num=== 2">數學課</h2>
        <h2 v-else>英語課</h2>
        
         </div>
    </body>
</html>
Gary_v-show.html

 

 

三、鍵盤事件

　　Vue的鍵盤事件：@keydown：按下、@keypress：按住、@keyup：抬起

　　以下分別是幾種不同的鍵盤按鍵提交方式

　　　　　　　　methods:{
                        onEnter(e){
                            if(e.keyCode==13){
                                console.log("原生js-按下回車");
                            }
                        },
                        newOnEnter(){
                            console.log("Vue-按下回車")
                        },
                        onKeyAUp(){
                            console.log("抬起了按鍵A")
                        }
                    }

 

            <!--原生js方式-->
            <input type="text" placeholder="onEnter" @keydown="onEnter($event)"/>    <br />
            <!--vue提供方式-->
            <input type="text" placeholder="newOnEnter  13" @keydown.13="newOnEnter($event)"/>    <br />
            <!--vue提供內置按鍵別名方式-->
            <input type="text" placeholder="newOnEnter  enter" @keydown.enter="newOnEnter($event)"/><br />
            <!--其它按鍵別名-->
            <input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            
            window.onload = () =>{
                 new Vue({
                    el:'#Gary',
                    data:{

                    },
                    methods:{
                        onEnter(e){
                            if(e.keyCode==13){
                                console.log("原生js-按下回車");
                            }
                        },
                        newOnEnter(){
                            console.log("Vue-按下回車")
                        },
                        onKeyAUp(){
                            console.log("抬起了按鍵A")
                        }
                    }
                });
            }
            
        </script>
    </head>
    
    
    <body>
        <div id="Gary">

            <!--原生js方式-->
            <input type="text" placeholder="onEnter" @keydown="onEnter($event)"/>    <br />
            <!--vue提供方式-->
            <input type="text" placeholder="newOnEnter  13" @keydown.13="newOnEnter($event)"/>    <br />
            <!--vue提供內置按鍵別名方式-->
            <input type="text" placeholder="newOnEnter  enter" @keydown.enter="newOnEnter($event)"/><br />
            <!--其它按鍵別名-->
            <input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />
         </div>
    </body>
</html>
Gary_event-keyboard.html

 

 

四、v-bind指令　　傳送門

　　v-bind：屬性綁定，動態地綁定一個或多個特性，或一個組件 prop 到表達式

　　將Vue官網logo圖片地址存放到Vue的data數據域中

　　　　　　　　data:{
                           imgUrl:"https://cn.vuejs.org/images/logo.png",
                           Mywidth:"200px",
                           Myheight:"200px"
                    },

 

            <!--錯誤寫法-->
             <img src="imgUrl"  width="Mywidth"  :height="Myheight" /><hr />
             <img v-bind:src="imgUrl"  v-bind:width="Mywidth"   v-bind:height="Myheight" /><hr />
             <!--簡寫-->
             <img :src="imgUrl" :width="Mywidth"  :height="Myheight"/><hr />

 

　　使用錯誤的語法會取不到Vue數據域中圖片src的地址

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            
            window.onload = () =>{
                new Vue({
                    el:'#Gary',
                    data:{
                           imgUrl:"https://cn.vuejs.org/images/logo.png",
                           Mywidth:"200px",
                           Myheight:"200px"
                    },
                    methods:{
                    
                    }
                });
            }
            
        </script>
    </head>
    
    
    <body>
        <div id="Gary">
            <!--錯誤寫法-->
            <img src="imgUrl"  width="Mywidth"  :height="Myheight" /><hr />
             <img v-bind:src="imgUrl"  v-bind:width="Mywidth"   v-bind:height="Myheight" /><hr />
             <!--簡寫-->
             <img :src="imgUrl" :width="Mywidth"  :height="Myheight"/><hr />
        </div>
        
    </body>
</html>
Gary_v-bind.html

 

　　v-bind處理class與style樣式

　　　　　　　<!--普通的CSS引入-->
            一<h3 class="myColor">Vue</h3><hr />
        
            <!--變量引入-->
            二<h3 :class="fontColor">Vue</h3><hr />
            
            <!--以數組的形式 引入多個-->
            三<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3><hr />
            <!--使用json 方式-->
            四<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3><hr />
            
            <!--數組 + json-->
            五<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3><hr />
            
            <!--綁定style-->
            六<h3 :style="[colorA, colorB]">Vue</h3>

 

　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-bind_1</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            window.onload = () => {
                let vm = new Vue({
                    el : '#Gary',
                    data : {
                        fontColor : 'myColor',
                        fontBackgroundColor : 'myBackgounrdColor',
                        flag : true,
                        fontSize : 'myFontSize',
                        colorA : {color : 'rgb(53, 73, 93)'},
                        colorB : {backgroundColor : 'rgb(65, 184, 131)'}
                    },
                    methods : {
                        
                    }
                });
            }
        </script>
        <style type="text/css">
            .myColor{
                color: rgb(53, 73, 93);
                text-align: center;
            }
            .myBackgounrdColor{
                background: rgb(65, 184, 131);
            }
            .myFontSize{
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="Gary">
            <!--普通的CSS引入-->
            一<h3 class="myColor">Vue</h3><hr />
        
            <!--變量引入-->
            二<h3 :class="fontColor">Vue</h3><hr />
            
            <!--以數組的形式 引入多個-->
            三<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3><hr />
            <!--使用json 方式-->
            四<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3><hr />
            
            <!--數組 + json-->
            五<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3><hr />
            
            <!--綁定style-->
            六<h3 :style="[colorA, colorB]">Vue</h3>
        </div>
    </body>
</html>
Gary_v-bind_2.html

 


免責聲明！

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



猜您在找 vue_組件中的data和method vue_子組件綁定原生事件 Vue_為window對象添加事件處理程序 vue.js-詳解三大流行框架VUE_快速進階前端大咖-Vue基礎 vue_常用組件install vue_表單 input 的綁定 vue_天氣預報 vue_插槽的理解和使用 vue_前端分頁操作 vue_插槽的理解和使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM