Vue 指令篇

1. 內置指令

• v-show :
  • 說明：根據條件展示元素,true展示元素，false隱藏元素
  • 版本：vue2,vue3

<template>
    <div>
        <button v-show="isShow"></button>
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            isShow: false
        };
    }
};
</script>

註意：v-show 不支持寫在 template 元素標簽上，也不支持同時寫在 v-else 標簽中

v-show 是採用切換css屬性display:block,display:none來控制顯示或隱藏dom，所以初始頁面render時，此dom就會渲染至頁面中，只不過是隱藏狀態。

• v-if:
  • 說明：根據條件展示元素,true在dom樹中渲染元素，false從dom樹中移除元素
  • 版本：vue2,vue3

<template>
    <div>
        <button v-if="isShow"></button>
    </div>
</template>
<script>
export default {
    name: 'HomeView',
    data() {
        return {
            isShow: false
        };
    }
};
</script>

v-if可以作用於template中，如果表達式為true，那麼template標簽塊中的代碼都會渲染，反之都不渲染

v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊

• v-else
  • 說明：表示 v-if 的“else 塊”
  • 版本：vue2,vue3

<template>
    <div>
        <button v-if="isShow">按鈕1</button>
        <button v-else>按鈕2</button>
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            isShow: false
        };
    }
};
</script>

v-else元素必須緊跟在帶v-if或者v-else-if的元素的後面，否則它將不會被識別

• v-else-if
  • 說明：表示 v-if 的“else 塊”
  • 版本： 2.1.0 新增,vue2,vue3

<template>
    <div>
        <button v-if="type === 'a'">按鈕a</button>
        <button v-else-if="type === 'b'">按鈕b</button>
        <button v-else-if="type === 'c'">按鈕c</button>
        <button v-else="type === 'd'">按鈕d</button>
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            type: 'a'
        };
    }
};
</script>

類似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

• v-bind
  • 說明：動態地綁定一個或多個 attribute，或一個組件 prop 到表達式
  • 版本：vue2,vue3
  • 縮寫：:

a. 綁定一個 attribute

<template>
    <div>
        <img v-bind:src="imgSrc" />
        <img :src="imgSrc" />
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            imgSrc: 'https://picsum.photos/200/300/?random'
        };
    }
};
</script>

b. class 綁定

<template>
    <div>
        <div :class="{ red: isRed }"></div>
        <div :class="[classA, classB]"></div>
        <div :class="[classA, { classB: isB, classC: isC }]"></div>
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            isRed: true,
            classA: 'classA',
            classB: 'classB',
            isB: true,
            isC: true
        };
    }
};
</script>

c. style 綁定

<template>
    <div>
        <div :style="{ fontSize: size + 'px' }"></div>
        <div :style="[styleObjectA, styleObjectB]"></div>
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            size: 20,
            styleObjectA: {
                color: 'red',
                fontSize: '20px'
            },
            styleObjectB: {
                color: 'blue',
                fontSize: '30px'
            }
        };
    }
};
</script>

d. 組件傳值

<template>
    <div>
        <child-component :title="text" />
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    components: {
        'child-component': {
            props: {
                title: String
            },
            template: '<div>{{ title }}</div>'
        }
    },
    data() {
        return {
            text: 'test'
        };
    }
};
</script>

e. 傳遞當前所有 props

<template>
    <div>
        <child-component v-bind="$props" />
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    components: {
        'child-component': {
            props: {
                title: String
            },
            template: '<div>{{ title }}</div>'
        }
    },
    props: {
        propsValue: String
    },
    data() {
        return {
            text: 'test'
        };
    }
};
</script>