Vue全家桶--05 過度/動畫和自定義指令

阿新 • • 發佈：2021-11-03

Vue全家桶--05 過度/動畫和自定義指令

5.1 過渡/動畫指令

元素在顯示和隱藏時，實現過濾或者動畫的效果。常用的過渡和動畫都是使用CSS來實現的

**在CSS中操作 trasition（過濾）或 animation（動畫）達到不同效果

**為目標元素新增一個父元素<trasition name='xxx'>，讓父元素通過自動應用class類名來達到效果

**過渡與動畫時，會為對應元素動態新增的相關class類名：

1.xxx-enter：定義顯示前的效果

2.xxx-enter-active：定義顯示過程的效果

3.xxx-enter-to：定義顯示後的效果

4.xxx-leave：定義隱藏前的效果

5.xxx-leave-active：定義隱藏過程的效果

6.xxx-leave-to：定義隱藏後的效果

5.2 Vue內建指令

v-html：內容按普通HTML插入，可防止XSS攻擊

v-show：根據表示式的真假值，切換元素的display CSS屬性來顯示隱藏元素

v-if：根據表示式的真假值，來渲染元素

v-else：前面必須有 v-if 或 v-else-if

v-else-if：前面必須有 v-if 或 v-else-if

v-for：遍歷的陣列或物件

v-on：繫結事件監聽器

v-bind：用於繫結元素屬性

v-model：在表單控制元件或者元件上建立雙向繫結

v-once：一次性插值，當後面資料更新後檢視資料不會更新

v-pre：可以用來顯示原始插入值標籤{{}}，並跳過這個元素和它的子元素的編譯過程，加快編譯。

v-text：等價於{{}}用於顯示內容，但區別在於：{{}}會造成閃爍問題，v-text不會閃爍

v-cloak：如果想用{{}}又不想有閃爍問題，則使用v-cloak來處理

　　　　新增一個屬性選擇器[v-cloak]的CSS隱藏樣式：[v-cloak]{display:none;}

　　　　原理：預設一開始被Vue管理的模板是隱藏著的，當Vue解析處理完DOM模板之後，會自動把這個樣式去除，然後就顯示出來。

<!DOCTYPE html>
<html lang="en" 
>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {display: none;}
    </style>
</head>
<body>
    <div id="app">

        <h3> v- text</h3>
        <p v-text="msg"></p>
        <p v-text="msg"></p>
        <div v-cloak>
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
        </div>
        
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello!'
            }
        });
    </script>
</body>
</html>

5.3 自定義指令

除了內建指令外，Vue也允許註冊自定義指令，有的情況下，你仍然需要對普通DOM元素進行底層操作，這時候使用自定義指令更為方便。

全域性自定義指令：

// 註冊全域性自定義指令，可以在多個Vue管理的入口下使用該指令
        // 第一個引數為指令名，但是不要有v-開頭
        Vue.directive('upper-text',{
            //一般對樣式 的操作在bind中，bind函式只調用一次
            bind: function (el) {
                el.style.color = 'red'
            },
            //一般對js操作在inserted中，inserted也是隻呼叫一次
            // el是當前指令作用的那個Dom元素，
            // binding用於獲取使用了當前指令的繫結值(value)、表示式(expression)、指令名(name)等
            inserted: function (el, binding) {
                // 將所有字母文字內容轉換為大寫
                el.innerHTML = binding.value.toUpperCase()
            }
        })

區域性自定義指令：

new Vue({
            el: '#app',
            data: {
                message: 'mengxuegu, 陪你學習伴你夢想'
            },
            //註冊區域性自定義指令：只能在當前Vue例項管理的入口 下引用這個指令
            directives: {
                'focus': { // 指令名，
                    bind: function () {

                    },
                    // 重新整理頁面自動獲取焦點
                    inserted: function (el, binding) {
                        //被 v-focus 作用的那個元素在重新整理頁面後會自動 獲取焦點
                        el.focus()
                    }
                }
            }
        })

DEMO：自動獲取焦點/字型轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-upper-text="message">xxxxx</p>
        自動獲取焦點：<input type="text" v-focus>
    </div>
    <div id="app2">
        <p v-upper-text="msg">xxxxx</p>
        
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 註冊全域性自定義指令，可以在多個Vue管理的入口下使用該指令
        // 第一個引數為指令名，但是不要有v-開頭
        Vue.directive('upper-text',{
            //一般對樣式 的操作在bind中，bind函式只調用一次
            bind: function (el) {
                el.style.color = 'red'
            },
            //一般對js操作在inserted中，inserted也是隻呼叫一次
            // el是當前指令作用的那個Dom元素，
            // binding用於獲取使用了當前指令的繫結值(value)、表示式(expression)、指令名(name)等
            inserted: function (el, binding) {
                // 將所有字母文字內容轉換為大寫
                el.innerHTML = binding.value.toUpperCase()
            }
        })

        new Vue({
            el: '#app',
            data: {
                message: 'mengxuegu, 陪你學習伴你夢想'
            },
            //註冊區域性自定義指令：只能在當前Vue例項管理的入口 下引用這個指令
            directives: {
                'focus': { // 指令名，
                    bind: function () {

                    },
                    // 重新整理頁面自動獲取焦點
                    inserted: function (el, binding) {
                        //被 v-focus 作用的那個元素在重新整理頁面後會自動 獲取焦點
                        el.focus()
                    }
                }
            }
        })

        new Vue({
            el: '#app2',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>
</html>

You are never too old to set another goal or to dream a new dream!!!