Vue 指令

Vue 指令（directives）是前缀为 v- 的特殊 HTML 属性，它为 HTML 标记提供了额外的功能。

Vue 指令连接到 Vue 实例以创建动态和相应式用户界面。

使用 Vue，与传统的 JavaScript 方法相比，创建响应页面要容易得多，所需代码也更少。

不同的 Vue 指令

下面列出了我们在本教程中使用的不同 Vue 指令。

指令	详情
v-bind	将 HTML 标记中的属性连接到 Vue 实例中的数据变量。
v-if	根据条件创建 HTML 标记。指令 v-else-if 和 v-else 与 v-if 指令一起使用。
v-show	根据条件指定 HTML 元素是否可见。
v-for	使用 for 循环基于 Vue 实例中的数组创建标记列表。
v-on	将 HTML 标记上的事件连接到 JavaScript 表达式或 Vue 实例方法。我们还可以通过使用 event-modifiers 事件修饰符来更具体地定义页面对某个事件的反应。
v-model	用于带有 <form>, <input> 和 <button> 等标签的HTML表单。在输入元素和 Vue 实例数据属性之间创建双向绑定。

实例: v-bind 指令

浏览器从 Vue 实例中查找要将 <div> 元素连接到的类。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .pinkBG {
      background-color: lightpink;
    }
  </style>
</head>
<body>
  <div id="app">
    <div  v-bind:class="vueClass"></div>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          vueClass: "pinkBG"
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

运行一下

注意：如果没有 Vue 代码，上面的例子可以写得更简单，但要耐心。Vue 的真正好处可以在后面的例子中看到，当我们制作响应页面时。

Vue 指令

不同的 Vue 指令

实例: v-bind 指令

分类导航