Vue 精简教程（二）：常用指令用法

2023-10-24 23:19:54

前言

Vue.js 是一款渐进式的 JavaScript 框架，用于构建用户界面。它最大的特点是简单易学，且具有强大的灵活性，可以轻松地与其他 JavaScript 库和框架集成。在 Vue.js 中，指令是一个非常重要的概念，它允许你以声明式的方式操作 DOM 元素、事件和数据绑定。

一、Vue 常用指令+事件+样式？

1. v-for

v-for 指令用于遍历数组或对象，并为每个元素渲染一个模板。它的语法格式为：

<template v-for="item in items">
  <div>{{ item }}</div>
</template>

在这个例子中，v-for 指令将 items 数组中的每个元素都渲染为一个 <div> 元素，并在 <div> 元素中显示该元素的值。

2. v-if 和 v-show

v-if 和 v-show 指令都用于控制元素的显示或隐藏。但是，它们之间还是存在一些区别的。

v-if：v-if 指令会根据表达式的值来决定是否渲染元素。如果表达式的值为 true，则渲染元素；如果表达式的值为 false，则不渲染元素。
v-show：v-show 指令会根据表达式的值来决定是否显示元素。如果表达式的值为 true，则显示元素；如果表达式的值为 false，则隐藏元素。

3. v-model

v-model 指令用于实现表单元素与数据属性之间的双向绑定。它的语法格式为：

<input v-model="data.name">

在这个例子中，v-model 指令将 <input> 元素的值与 data.name 属性绑定在一起。当用户修改 <input> 元素的值时，data.name 属性的值也会随之改变。反之亦然。

4. v-bind

v-bind 指令用于将数据属性绑定到 HTML 元素的属性上。它的语法格式为：

<div v-bind:class="data.className"></div>

在这个例子中，v-bind 指令将 data.className 属性的值绑定到 <div> 元素的 class 属性上。这样，当 data.className 属性的值改变时，<div> 元素的 class 属性的值也会随之改变。

5. v-on

v-on 指令用于将事件监听器绑定到 HTML 元素上。它的语法格式为：

<button v-on:click="handleClick"></button>

在这个例子中，v-on 指令将 click 事件监听器绑定到 <button> 元素上。当用户点击 <button> 元素时，handleClick 方法就会被调用。

6. v-once

v-once 指令用于仅渲染元素一次。它的语法格式为：

<div v-once>This will only be rendered once.</div>

在这个例子中，v-once 指令会确保 <div> 元素只被渲染一次。即使 data.name 属性的值发生改变，<div> 元素也不会被重新渲染。

二、使用示例

现在，我们来看一个具体的示例，了解如何在 Vue.js 中使用这些指令。

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <div v-if="show">This will be displayed if show is true.</div>
    <div v-show="show">This will be displayed if show is true.</div>
    <input v-model="data.name">
    <div v-bind:class="data.className"></div>
    <button v-on:click="handleClick">Click me!</button>
    <div v-once>This will only be rendered once.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      show: true,
      data: {
        name: 'John Doe',
        className: 'active'
      }
    }
  },
  methods: {
    handleClick() {
      console.log('Button was clicked!')
    }
  }
}
</script>