Vue中怎么手动封装自定义指令

本篇内容介绍了“Vue中怎么手动封装自定义指令”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联专注于泗阳企业网站建设,响应式网站,商城系统网站开发。泗阳网站建设公司,为泗阳等地区提供建站服务。全流程按需开发网站,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

Vue中怎么手动封装自定义指令

在前端基础面试中,Vue的指令算是一个高频面试题

面试官问:Vue有哪些指令?

你就告诉他:截止到Vue3.2,Vue一共有16个自带指令,包括了:

v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is,其中v-memo是3.2新增的,v-is在3.1.0中废弃

若面试官进一步问:如何封装一个自定义指令?

你就告诉他:自定义指令要分全局自定义指令和局部指令;在Vue3中可以通过应用实例身上的directive()注册一个全局自定义指令,如果想注册局部指令,可在组件中配置directives选项来注册局部指令

看完本文,你将全面了解16个Vue指令以及掌握如何自定义一个指令

1. 简介

1.1 什么是Vue指令

在Vue中,指令其实就是特殊的属性

Vue会根据指令,在背后做一些事,至于具体做什么事,Vue根据不同的指令会执行不同的操作,具体后面会说

1.2 有什么特点

Vue指令有个明显的特点就是,都是以v-开头,例如:v-text

2. 内置指令

2.1 Vue有哪些内置指令呢

内置指令指的就是Vue自带指令,开箱即用

Vue一共有16个自带指令,包括了:

v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is,其中v-memo是3.2新增的,v-is在3.1.0中废弃

下面我们来了解一下这些内置指令的基本使用

2.2 了解16个内置指令的基本使用

2.2.1 v-text

v-text的作用是,用于更新元素的 textContent,例如:

h2元素的内容最终取决于msg的值

Vue中怎么手动封装自定义指令

2.2.2 v-html

与v-text很像,只是v-html用于更新元素的 innerHTML,例如

Hello LBJ'">

Vue中怎么手动封装自定义指令

需要注意的是,里头内容必须是按普通 HTML 插入

2.2.3 v-show

v-show可以根据表达式的真假值,切换元素的display值,用于控制元素的展示和隐藏,例如:

Vue中怎么手动封装自定义指令

可以看到,当条件变化时该指令触发显示或隐藏的过渡效果

需要注意:v-show 不支持