一、指令基础概念

在 Vue2 里，指令是带有 v- 前缀的特殊属性。它的主要作用是当表达式的值发生变化时，会相应地将某些特殊的行为应用到 DOM 上。简单来说，指令就是 Vue 提供的一种便捷语法，让我们可以更轻松地操作 DOM 和实现业务逻辑。

二、常见指令详解

1. v-bind

• 功能：v-bind 指令用于动态绑定 HTML 属性。我们可以根据数据的变化来动态更新元素的属性值。
• 示例代码：

<template><img v-bind:src="imageUrl" alt="示例图片">
</template><script>
export default {data() {return {imageUrl: 'https://example.com/image.jpg'};}
};
</script>

• 代码解释：在这个例子中，v-bind:src 将 imageUrl 变量的值动态绑定到 img 元素的 src 属性上。当 imageUrl 的值发生变化时，图片的来源也会相应改变。
• 缩写：v-bind 可以缩写为 :，上述代码可以简化为 <img :src="imageUrl" alt="示例图片">。

2. v-on

• 功能：v-on 指令用于监听 DOM 事件，比如点击事件、输入事件等。当事件触发时，会执行相应的 JavaScript 代码。
• 示例代码：

<template><button v-on:click="handleClick">点击我</button>
</template><script>
export default {methods: {handleClick() {alert('按钮被点击了！');}}
};
</script>

• 代码解释：v-on:click 监听按钮的点击事件，当按钮被点击时，会调用 handleClick 方法，弹出一个提示框。
• 缩写：v-on 可以缩写为 @，上述代码可写成 <button @click="handleClick">点击我</button>。

3. v-model

• 功能：v-model 指令主要用于在表单元素上创建双向数据绑定。也就是说，数据的变化会自动更新到视图，视图的变化也会自动更新到数据。
• 示例代码：

<template><input v-model="message" type="text"><p>输入的内容是: {{ message }}</p>
</template><script>
export default {data() {return {message: ''};}
};
</script>

• 代码解释：在这个例子中，v-model 将 message 变量和输入框进行了双向绑定。当用户在输入框中输入内容时，message 的值会自动更新；反之，当 message 的值在代码中被修改时，输入框中的内容也会相应改变。

4. v-if 和 v-show

• 功能：这两个指令都用于控制元素的显示与隐藏，但实现方式有所不同。v-if 是通过动态插入或移除 DOM 元素来控制显示与隐藏，而 v-show 是通过修改元素的 display 属性来实现。
• 示例代码：

<template><div><p v-if="isVisible">这是通过 v-if 控制显示的内容</p><p v-show="isVisible">这是通过 v-show 控制显示的内容</p><button @click="toggleVisibility">切换显示状态</button></div>
</template><script>
export default {data() {return {isVisible: true};},methods: {toggleVisibility() {this.isVisible =!this.isVisible;}}
};
</script>

• 代码解释：点击按钮时，会调用 toggleVisibility 方法，切换 isVisible 的值。当 isVisible 为 true 时，两个段落都会显示；当 isVisible 为 false 时，v-if 控制的段落会从 DOM 中移除，而 v-show 控制的段落只是将 display 属性设置为 none。

5. v-for

• 功能：v-for 指令用于遍历数组或对象，根据数据的数量动态渲染多个元素。
• 示例代码：

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橙子' }]};}
};
</script>

• 代码解释：v-for 指令遍历 items 数组，为数组中的每个元素渲染一个 li 元素。:key 是一个重要的属性，它用于给每个元素提供一个唯一的标识，帮助 Vue 更高效地更新 DOM。

三、指令修饰符

Vue2 还提供了指令修饰符，用于改变指令的默认行为。

1. v-on 修饰符

• .stop：阻止事件冒泡，即阻止事件向上级 DOM 元素传播。

<template><div @click="outerClick"><button @click.stop="innerClick">点击我</button></div>
</template><script>
export default {methods: {outerClick() {console.log('外层元素被点击');},innerClick() {console.log('按钮被点击');}}
};
</script>

• .prevent：阻止事件的默认行为，比如表单提交时阻止页面刷新。

<template><form @submit.prevent="submitForm"><input type="text" v-model="message"><button type="submit">提交</button></form>
</template><script>
export default {data() {return {message: ''};},methods: {submitForm() {console.log('表单提交，数据为：', this.message);}}
};
</script>

2. v-model 修饰符

• .lazy：将 v-model 的更新时机从 input 事件改为 change 事件，即只有在输入框失去焦点或按下回车键时才更新数据。

<template><div><input v-model.lazy="message"><p>输入的值：{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};}
};
</script>

• .number：将输入的值自动转换为数字类型。

<template><div><input v-model.number="age" type="number"><p>年龄：{{ typeof age }}, 值：{{ age }}</p></div>
</template><script>
export default {data() {return {age: 0};}
};
</script>