【Vue】Re04 指令：第二部分

阿新 • • 發佈：2020-10-26

一、v-on指令

作用是用來將元素繫結事件監聽器，觸發特定的函式執行一定功能

關鍵字：事件監聽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p> <button v-on:click='theTest'>點我觸發事件</button></p> 

    <p> <button @click='theTest'>點我觸發事件(@縮寫語法)</button></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el : '#app',
        data : {
           aaa : '233'
        },
        methods : {
            theTest :  
function ( ) {
                alert(this.aaa);
            }
        }
    });
</script>

</body>
</html>

v-on事件繫結的函式中引數傳遞的問題：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

< 
div id="v">
    <!-- 演示事件監聽 + 引數執行  -->
    <button @click="fun01"  >按鈕01</button>
    <button @click="fun01()">按鈕02</button>

    <hr>

    <!-- 帶參指向 -->
    <button @click="fun02(100)">按鈕03</button>
    <button @click="fun02">按鈕04</button>

    <hr>

    <!-- 列印事件 -->
    <button @click="fun03(222)">按鈕05</button>
    <button @click="fun03">按鈕06</button> <!-- 如果不注入引數呼叫列印，可以發現是一個事件在這個裡面 -->

    <hr>

    <!-- 如果存在多個引數 手動獲取瀏覽器事件物件，需要使用$event注入 -->
    <button @click="fun04($event, 222)">按鈕07</button>
    <button @click="fun04">按鈕08</button>

    <hr>

    <button>按鈕7</button>
    <button>按鈕08</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const v = new Vue({
        el : '#v',
        data : {
            message : 'Hello',
        },
        methods : {
            fun01 : function () {
                console.log('無參呼叫測試');
            },
            fun02 : function (val) {
                console.log('帶參呼叫測試');
            },
            fun03(abc) {
                console.log(abc);
            },
            fun04(event, abc) { // Vue預設第一個引數即為事件物件
                console.log(event);
                console.log(abc);
            }
        }
    });
</script>

</body>
</html>

常用的修飾符使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="v">
    <div @click="function02">
        <button @click="function01">testing1</button>
    </div> <!-- 我們點選按鈕，函式01和函式02都會被觸發，這樣的狀況被稱為冒泡 -->

    <hr>

    <!-- 如果我們希望其中的一個不要被觸發,可以使用.stop進行修飾 -->
    <div @click="function02"> <!-- 對div設定無效 -->
        the div tag content
        <button @click.stop="function01">testing2</button> <!-- 例如這裡只讓div上的事件生效 只要點選按鈕才會讓函式1生效 -->
    </div>

    <hr>

    <!-- .prevent修飾符用於阻止預設事件的觸發 -->
    <form action="#">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit" @click.prevent="function01" > <!-- 阻止表單提交，更改為使用自定義函式 -->
    </form>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const v = new Vue({
        el : '#v',
        data : {
            message : 'sss'
        },
        methods : {
            function01() {
                console.log(' function01 -> ' + this.message);
            },
            function02() {
                console.log(' function02 -> ' + this.message);
            }
        }
    });
</script>

</body>
</html>

二、v-if、v-else-if、v-else指令

用於條件判斷控制元素是否顯示出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- v-if v-else-if v-else -->
<div id="app">

    <p> <button @click="changeFlag">點我切換</button> </p>
    <p v-if="flag" > flag為true則顯示此資訊</p>

    <p> <button @click="changeScore">測試v-else-if</button> </p>
    
    <!-- 當指令的值符合為true時建立dom進行渲染，否則移除dom元素 -->
    <p v-if="score == 100">100分</p>
    <p v-else-if="score == 90">90分</p>
    <p v-else-if="score == 80">80分</p>
    <p v-else-if="score == 70">70分</p>
    <p v-else-if="score == 60">60分</p>
    <p v-else>不及格</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el : '#app',
        data : {
            flag : true,
            score : 100
        },
        methods : {
            changeFlag : function () {
                this.flag = !this.flag;
            },
            changeScore : function () {
                this.score -= 10;
            }
        }
    });
</script>

</body>
</html>

切換登入憑證的小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="v">
    <p>
        <span v-if="isUser">
            <label for="username">使用者名稱稱：</label>
            <input type="text" id="username" placeholder="使用者名稱稱">
        </span>
        <span v-else>
            <label for="email">郵箱賬號：</label>
            <input type="text" id="email" placeholder="郵箱賬號">
        </span>
        
        <button @click="changeLoginWay" >切換登入方式</button>
        <button @click="isUser = !isUser" >切換登入方式[簡寫]</button>
    </p>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./../dependencies/vue.js"></script>
<script type="text/javascript">
    const v = new Vue({
        el : '#v',
        data : {
            isUser : true
        },
        methods : {
            changeLoginWay() {
                this.isUser = !this.isUser;
            }
        }
    });
</script>

</body>
</html>

解決Input元素複用的問題

我們發現在使用者名稱輸入框輸入字元時，切換到郵箱賬號

發現輸入的字元被Vue儲存在郵箱賬號的輸入框中

也許真實的需求中就是希望這樣實現

但是一般情況應該是刪除清空的

解決辦法是使用Key屬性作為區分的標識：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="v">
    <p>
        <span v-if="isUser">
            <label for="username">使用者名稱稱：</label>
            <input type="text" id="username" placeholder="使用者名稱稱" key="username">
        </span>
        <span v-else>
            <label for="email">郵箱賬號：</label>
            <input type="text" id="email" placeholder="郵箱賬號" key="email">
        </span>

        <button @click="changeLoginWay" >切換登入方式</button>
        <button @click="isUser = !isUser" >切換登入方式[簡寫]</button>
    </p>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./../dependencies/vue.js"></script>
<script type="text/javascript">
    const v = new Vue({
        el : '#v',
        data : {
            isUser : true
        },
        methods : {
            changeLoginWay() {
                this.isUser = !this.isUser;
            }
        }
    });
</script>

</body>
</html>

三、v-show指令

決定指令繫結的元素是否需要在頁面中顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- v-show是純粹的v-if -->
<div id="app">
    <p v-show="!flag"> show this tag 1 </p>
    <p v-show="100 > 2"> show this tag 2 </p>
    <p v-show="true == true"> show this tag 3 </p>
    <p v-show="false == false"> show this tag 4 </p>
    <p v-show="2 < 1"> show this tag 5 </p>
</div>
<!--
    v-if 和 v-show的區別
    雖然二者都是判斷條件來實現元素的是否顯示在瀏覽器上
    但是：
    v-if是直接不建立dom元素實現
    v-show是建立了dom元素但是使用display:none屬性進行了隱藏處理

    適用的場景，如果需要頻繁的顯示隱藏元素的話更適合使用v-show處理
    如果使用v-if則需要反覆建立dom可能造成記憶體浪費
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./../dependencies/vue-min.js"></script>-->
<script type="text/javascript">
    let vm = new Vue({
        el : '#app',
        data : {
            flag : true
        }
    });
</script>

</body>
</html>

注意v-show和v-if的區別：

v-if 和 v-show的區別雖然二者都是判斷條件來實現元素的是否顯示在瀏覽器上

但是： v-if是直接不建立dom元素實現 v-show是建立了dom元素但是使用display:none屬性進行了隱藏處理

適用的場景，如果需要頻繁的顯示隱藏元素的話更適合使用v-show處理

如果使用v-if則需要反覆建立dom可能造成記憶體浪費

四、v-for指令

普通陣列遍歷

物件屬性遍歷

物件陣列遍歷

索引獲取，key + value獲取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="v">
    <!-- 普通遍歷使用 -->
    <ul>
        <li v-for="n in names">{{n}}</li>
    </ul>

    <!-- 獲取索引下標 index, 這裡的索引是第二引數即可 -->
    <ul>
        <li v-for="(n, i) in names">{{i}} - {{n}}</li>
    </ul>

    <!-- 遍歷物件的屬性和值 -->
    <ul><!-- 只有一個引數，獲取的是值 -->
        <li v-for="k in obj">{{k}}</li>
    </ul>
    <ul><!-- 兩個引數 引數1是屬性值，引數二是屬性名，獲取的是值 -->
        <li v-for="(v, k) in obj">{{k}} {{v}}</li>
    </ul>
    <ul><!-- 便利物件屬性也支援獲取下標 -->
        <li v-for="(v, k, i) in obj">{{i}} {{k}} {{v}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const v = new Vue({
        el : '#v',
        data : {
            names : ['wan', 'why', 'james'],
            obj : {
                name : '傑哥',
                age : 24,
                gender : false
            }
        },

    });
</script>

</body>
</html>