Vue 基础面试题, 什么是 Vue 指令?Vue 有哪些常用的指令?
Vue 基础面试题, 什么是 Vue 指令?Vue 有哪些常用的指令?
QA
Step 1
Q:: 什么是 Vue 指令？
A:: Vue 指令是特殊的 HTML 属性，在 Vue.js 中用于为 DOM 元素绑定特定的行为或功能。指令的名称以 'v-' 开头，表示这是一个 Vue 提供的特殊属性。指令可以用来操作 DOM 元素的显示、数据绑定、事件监听等。
Step 2
Q:: Vue 有哪些常用的指令？
A:: Vue.js 中有许多常用的指令，包括：
1. v-bind：绑定元素属性或组件 prop。
2. v-model：双向绑定表单输入和应用程序状态。
3. v-if：根据表达式的真值条件性地渲染元素。
4. v-for：基于一个数组渲染一个元素的列表。
5. v-on：为 DOM 事件绑定事件监听器。
6. v-show：根据条件显示或隐藏元素（通过设置 display 样式）。
Step 3
Q:: 如何自定义 Vue 指令？
A:: 自定义指令可以通过 Vue.directive 方法来实现。指令可以定义多个生命周期钩子函数，如 bind、inserted、update 和 unbind。例如，一个简单的自定义指令：
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
在使用时，可以通过 <input v-focus> 让这个输入框在插入到 DOM 时自动获得焦点。
Step 4
Q:: Vue 指令和组件中的方法有何区别？
A:: Vue 指令通常用于直接操作 DOM 元素，而组件中的方法则是逻辑层面的功能，通常不直接与 DOM 操作耦合。指令可以被多个元素复用，而组件方法则通常只在特定组件中使用。指令适合封装与 DOM 交互密切相关的行为，而组件方法更适合处理数据、业务逻辑。
Step 5
Q:: 如何使用 v-bind 动态绑定多个属性？
A:: v-bind 可以用于动态绑定多个属性，通过对象语法来实现：
<div v-bind="{ id: someId, class: someClass }"></div>
在这个例子中，someId 和 someClass 是 Vue 实例中定义的属性，v-bind 会自动将它们绑定到相应的 DOM 属性上。