当前位置：网站首页 > 技术文章 > 正文

2024大厂前端面试题vue篇 Vue 有哪些内置指令 ?

myzbx 2025-09-18 04:59 32 浏览

面试官问出这个问题，其实也只是想了解面试者对这个vue的熟悉程度，基本上没什么技巧，只需要死记硬背下来即可。大概说五六个就行了，并且说的这几个能够非常熟悉，主要记住前面几个就好，防止面试官会展开来问。

v-bind：用于动态地绑定一个或多个属性，或一个组件 prop 到表达式。可以使用缩写语法 :attr 来绑定属性。例如，:href="url" 会将元素的 href 属性与 Vue 实例的 url 数据属性绑定。
v-model：在表单输入和应用状态之间创建双向数据绑定。在表单控件元素上创建双向数据绑定，以便视图和数据保持同步。
v-for：基于一个数组来渲染一个列表。可以使用 v-for="(item, index) in items" 的语法来遍历数组。
v-if：根据表达式的真假值来条件性地渲染元素。如果表达式为假，则元素及其子元素不会被渲染到 DOM 中。
v-else：与 v-if 一起使用，当 v-if 的条件不满足时，v-else 内的元素会被渲染。
v-else-if：为 v-if 提供“else if”块。可以链式地使用多个 v-else-if 元素。
v-show：根据表达式的真假值来切换元素的 CSS 属性 display。与 v-if 不同，v-show 的元素始终会被渲染到 DOM 中，只是简单地切换 CSS 属性。
v-on：用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。可以使用缩写语法 @event 来监听事件。例如，@click="doSomething" 会在元素被点击时调用 doSomething 方法。
v-text：更新元素的 textContent。与插值表达式类似，但 v-text 会替换掉元素内的所有内容，而插值表达式则不会。
v-html：更新元素的 innerHTML。注意，使用 v-html 时需要谨慎，因为它可能会导致跨站脚本攻击（XSS）。
v-cloak：这个指令与 CSS 规则 [v-cloak] { display: none } 一起使用，可以隐藏未编译的 Mustache 标签直到 Vue 实例准备完毕。这有助于解决在 Vue 编译前用户看到原始模板标签的问题。
v-pre：跳过这个元素和它的子元素的编译过程。这可以用来显示原始的 Mustache 标签，而不会被 Vue 编译。
v-once：只渲染元素和组件一次。之后的重新渲染，该元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化性能。

DOM 事件监听程序

上一篇：Spring Boot + Vue.js 实现前后端分离(附源码)
下一篇：谈谈React 19的“事件钩子”useEvent，如何简化你的组件逻辑

2024大厂前端面试题vue篇 Vue 有哪些内置指令 ?

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿