Vue 指令
Vue 指令是带有前缀的特殊 HTML 属性v-赋予 HTML 标签额外的功能。
Vue 指令连接到 Vue 实例以创建动态和反应式用户界面。
与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。
不同的 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 的真正好处。
在 91xjr 学习 Vue
在 91xjr.com 学习 Vue 时，您可以使用我们的 "亲自试一试" 工具，该工具会显示代码和结果。这将使您在我们前进的过程中更容易理解每个部分。
单击“下一步”继续教程。
Vue练习
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!