10分钟，从0到1学会Vue内置指令与自定义指令（图文并茂版）

Vue内置指令

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

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中废弃。

如果面试官进一步问你：如何封装自定义指令？

你可以这么回答：

自定义指令分为全局自定义指令和局部指令；在Vue中可以通过应用实例身上的 directive()注册一个全局自定义指令，也可在组件中配置 directives选项来注册局部指令。（往下展开如何封装自定义指令）

Vue指令的含义

---

在Vue中，指令其实就是一种特殊的属性。Vue会根据指令执行不同的操作，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，具体下面展开。

Vue指令的特点

---

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

接下来，我们将一一介绍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-text

v-text用于更新元素的 textContent（文本内容）

h1元素的内容最终取决于message的值

v-html

与v-text相似，只是v-html用于更新元素的 innerHTML

指令里面的内容是按普通 HTML 插入

v-show

v-show可以根据表达式的真假值，切换元素的display，控制元素的展示和隐藏

显示

隐藏

可以看到，当条件变化时该指令控制的是css中的display，隐藏时为 display: none。

v-show 不支持 <template> 元素，也不支持 v-else。

v-if

v-if用于根据表达式的真假值来有条件地渲染元素，与v-show不同的是，v-if在切换时是控制着元素的销毁或创建，而不是简单的样式显示或隐藏

显示

隐藏

可以看到，当表达式为假时，v-if是直接销毁元素，而上面的v-show只是视觉上隐藏了而已。

v-if支持 <template>，如果元素是 <template>，将提取它里面的内容作为条件块。

v-else

v-else无需表达式，表示添加一个“else 块”，当v-if满足条件时展示v-if的元素，否则展示v-else的元素（类似于我们的条件语句 if-else ）

显示

隐藏

如果v-if为假，则展示v-else（控制的也是元素的创建与销毁）

隐藏

显示

注意：v-else前一个兄弟元素必须有 v-if 或 v-else-if

v-else-if

同理，表示 v-if 的“else if 块”，和v-else一样，前一个兄弟元素必须有v-if或 v-else-if

隐藏

显示v-else-if

隐藏

v-for

v-for一个用于迭代的指令，可以根据数据源多次渲染元素或模板块

{{item}}

在检查工具中，上面的v-for出现了红色波浪线，因为我们在使用v-for中，需要添加key

key的好处是更好的复用节点，提高渲染效率。

也可以为数组索引指定别名或者用于对象的键

{{number}}

v-on

v-on用于给元素绑定事件，可以缩写为 @

修饰符

• .stop - 调用 event.stopPropagation()

• .prevent - 调用 event.preventDefault()

• .capture - 添加事件侦听器时使用 capture 模式

• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

• .{keyAlias} - 仅当事件是从特定键触发时才触发回调

• .once - 只触发一次事件

• .left - 只当点击鼠标左键时触发

• .right - 只当点击鼠标右键时触发

• .middle - 只当点击鼠标中键时触发

• .passive - { passive: true } 模式添加侦听器

<button @click.stop=“doSomething”>

注意：用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

v-bind

v-bind用于绑定数据和元素属性，可以缩写为 : 或.(当使用 .prop 修饰符时)，

如上面我们在v-for中使用的 :key=“index” 实际上就是 v-bind:key="index"的缩写。

v-bind的3个修饰符

• .camel - 将 kebab-case attribute 名转换为 camelCase

• .prop - 将一个绑定强制设置为一个 DOM property。3.2+

• .attr - 将一个绑定强制设置为一个 DOM attribute。3.2+

v-model

v-model限制于：<input> <select> <textarea> components

v-model的3个修饰符：

• .lazy - 惰性更新，监听 change 而不是 input 事件

• .number - 输入字符串转为有效的数字

• .trim - 输入首尾空格过滤

在表单控件或者组件上可以创建双向绑定

{{message}}

v-slot

v-slot用于提供具名插槽或需要接收 prop 的插槽

可选择性传递参数，表示插槽名，默认值default

Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）_前端不释卷leo的博客-CSDN博客Vue中的插槽（slot）在项目中用的也是比较多的，今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。插槽是什么？插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。以下举例子帮助理解。怎么使用插槽？基本用法https://blog.csdn.net/qq_41809113/article/details/121640035?spm=1001.2014.3001.5502

v-pre

v-pre指令用于跳过这个元素及其子元素的编译过程
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取

[外链图片转存中…(img-hezYwOLc-1712387239461)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-L2EouYRW-1712387239461)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取

[外链图片转存中…(img-RjMGKoVw-1712387239461)]