vue之常用指令

Dus發表於2018-10-09
Vue

事件縮寫

v-on:click=
簡寫方式 @click=

事件物件$event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件簡寫和事件物件$event</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                methods:{ 
                    show(){
                        console.log(111);
                    },
                    print(e){
                        // console.log(e);
                        console.log(e.target.innerHTML); //DOM物件
                        console.log(this);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <button v-on:click="show">點我</button>
        <button @click="show">點我</button>
        <hr>

        <button @click="print($event)">Click Me</button>
    </div>
</body>
</html>

事件冒泡

阻止事件冒泡：
a)原生js方式，依賴於事件物件
b)vue方式，不依賴於事件物件
@click.stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和預設行為</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                methods:{ 
                    show(){
                        console.log(111);
                        // e.stopPropagation();
                    },
                    print(){
                        console.log(222);
                    },
                    write(){
                        console.log(333);
                    },
                    study(){
                        console.log(444);
                        // e.preventDefault();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <div @click="write">
            <p @click="print">
                <!-- <button @click="show($event)">點我</button> -->
                <button @click.stop="show">點我</button>
            </p>
        </div>
        <hr>

        <!-- <a href="#" @click="study($event)">俺是連結</a> -->
        <a href="#" @click.prevent="study">俺是連結</a>
    </div>
</body>
</html>

Tips: 由內到外依次執行 print,write,itany被稱為"事件冒泡",只執行print不執行write和itany, @click.stop

事件預設行為

阻止預設行為：
a)原生js方式，依賴於事件物件

<a href="#" @click.prevent="study">俺是連結</a>

比如網址是 www.baidu.com,點選上面的連結會跳轉到 www.baidu.com#,
阻止預設行為 @click.prevent

鍵盤事件

回車：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

預設沒有@keydown.a/b/c...事件，可以自定義鍵盤事件，也稱為自定義鍵碼或自定義鍵位別名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鍵盤事件</title>
    <script src="js/vue.js"></script>
    <script>
        /**
         * 自定義鍵位別名
         */
        Vue.config.keyCodes={
            a:65,
            f1:112
        }

        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                methods:{ 
                    show(e){
                        console.log(e.keyCode);
                        if(e.keyCode==13){
                            console.log('您按了回車');
                        }
                    },
                    print(){
                        // console.log('您按了回車');
                        // console.log('您按了方向鍵上');
                        console.log('11111');
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- 鍵盤事件：@keydown、@keypress、@keyup -->
        <!-- 使用者名稱：<input type="text" @keydown="show($event)"> -->
        
        <!-- 簡化按鍵的判斷 -->
        <!-- 使用者名稱：<input type="text" @keydown="show($event)"> -->
        <!-- 使用者名稱：<input type="text" @keydown.13="print"> -->
        <!-- 使用者名稱：<input type="text" @keydown.enter="print"> -->
        <!-- 使用者名稱：<input type="text" @keydown.up="print"> -->
        使用者名稱：<input type="text" @keydown.f1="print">
        
        <!-- 事件修飾符 -->
        <button @click.once="print">只觸發一次</button>
    </div>
</body>
</html>

事件修飾符

.stop - 呼叫 event.stopPropagation()。
.prevent - 呼叫 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
.native - 監聽元件根元素的原生事件。 某個元件的根元素上繫結 .native修飾符,使元件變成普通的HTML
.once - 只觸發一次回撥。

屬性繫結和屬性的簡寫

v-bind 用於屬性繫結， v-bind:屬性=""

屬性的簡寫：
v-bind:src="" 簡寫為 :src=""

class和style屬性

繫結class和style屬性時語法比較複雜：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class和style屬性</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    bb:'aa',
                    dd:'cc',
                    flag:true,
                    num:-2,
                    hello:{aa:true,cc:true},
                    xx:{color:'blue',fontSize:'30px'},
                    yy:{backgroundColor:'#ff7300'}
                }
            });
        }
    </script>
    <style>
        .aa{
            color:red;
            font-size:20px;
        }
        .cc{
            background-color:#ccc;
        }
    </style>
</head>
<body>
    <div id="itany">
        <!-- 
            class屬性
         -->
        <!-- <p class="aa">南京網博</p> -->  <!-- 可以訪問，普通css方式 -->

        <!-- <p :class="aa">南京網博</p> --> <!-- 不可以，Vue的屬性繫結時不能直接css樣式 -->

        <!-- 方式1:變數形式 -->
        <!-- <p :class="bb">南京網博</p> -->

        <!-- 方式2：陣列形式，同時引用多個 -->
        <!-- <p :class="[bb,dd]">南京網博</p> -->

        <!-- 方式3：json形式，常用！！！ -->
        <!-- <p :class="{aa:true,cc:flag}">南京網博</p> -->
        <!-- <p :class="{aa:num>0}">南京網博</p> -->

        <!-- 方式4：變數引用json形式 -->
        <!-- <p :class="hello">南京網博</p> -->
        
        <!-- 
            style屬性
         -->
         <p :style="[xx,yy]">itany</p>

    </div>
</body>
</html>

資料繫結的方式

a.雙向繫結
v-model
b.單向繫結
方式1：使用兩對大括號{{}}，可能會出現閃爍的問題，可以使用v-cloak解決
方式2：使用v-text、v-html


    <style>
        /* 必須配置css樣式，否則不生效 */
        [v-cloak]{ 
            display:none;
        }
    </style>
    
    <h3>aaa<span v-cloak>{{msg}}</span></h3>

其他指令

v-once 資料只繫結一次
v-pre 不編譯，直接原樣顯示

相關文章