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的好处是更好的复用节点,提高渲染效率。
也可以为数组索引指定别名或者用于对象的键
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
v-pre
v-pre
指令用于跳过这个元素及其子元素的编译过程
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家,戳这里即可领取
[外链图片转存中…(img-hezYwOLc-1712387239461)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-L2EouYRW-1712387239461)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家,戳这里即可领取
[外链图片转存中…(img-RjMGKoVw-1712387239461)]