Vue Directives
Vue 指令是带有 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 实例方法。我们还可以通过使用**事件修饰符**更精确地定义页面如何响应特定事件。 |
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>
自己动手试一试 »
注意：上面的示例可以用更简单的普通 JavaScript 代码实现，但请耐心等待。Vue 的真正优势将在后面的示例中体现，届时我们将创建响应式页面。
在 W3Schools 学习 Vue
在 W3Schools.com 学习 Vue 时，您可以使用我们的“自己动手尝试”工具，该工具同时显示代码和结果。这将使您更容易理解我们接下来的每一个部分。
点击“下一页”继续教程。
