自定义指令基础

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)

选项式API_自定义指令

xxxxxxxxxx
<template>
    <h3>自定义指令</h3>
    <p v-author>文本信息</p>
</template>
<script>
export default {
    directives:{
        author:{
            mounted(element){
                element.innerHTML = element.innerHTML + "-itbaizhan"
            }
        }
    }
}
</script>

组合式API_自定义指令

xxxxxxxxxx
<template>
    <h3>自定义指令</h3>
    <p v-author>文本信息</p>
</template>
<script setup>
const vAuthor = {
    mounted:(element) =>{
        element.innerHTML = element.innerHTML + "-itbaizhan"
    }
}
</script>

实时效果反馈

1. 下列代码中，画横线的地方应该填写的是：

xxxxxxxxxx
<template>
    <h3>自定义指令</h3>
    <p v-author>文本信息</p>
</template>
<script setup>
const vAuthor = {
    ___:(element) =>{
        element.innerHTML = element.innerHTML + "-itbaizhan"
    }
}
</script>

A mounted

B element

C data

D directives

答案

1=>A