Vue 指令
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 |
用于 HTML 表单中的标签，例如 <form>、<input> 和 <button>。在输入元素和 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 的真正优势将在后面的示例中体现出来。
在 W3Schools 学习 Vue
在 W3Schools.com 学习 Vue 时，您可以使用我们的“自己尝试”工具，它同时显示代码和结果。这将使您在学习过程中更容易理解每一个部分。
点击“下一页”继续本教程。
