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

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

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