菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue:为什么、如何以及设置 Vue 第一个 SFC 页面 Vue 组件 Vue Props Vue v-for 组件 Vue $emit() Vue Fallthrough Attributes Vue 作用域样式 Vue 本地组件 Vue Slots Vue v-slot Vue 作用域插槽 Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue Template Refs Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue v-for 动画 Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue Directives

Vue 指令是带有 v- 前缀的特殊 HTML 属性,它们为 HTML 标签提供额外的功能。

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

使用 Vue,创建响应式页面比传统的 JavaScript 方法更简单,需要的代码也更少。

不同的 Vue 指令

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

指令详情
v-bind 将 HTML 标签中的一个属性连接到 Vue 实例内部的数据变量。
v-if 根据条件创建 HTML 标签。指令 v-else-ifv-elsev-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 时,您可以使用我们的“自己动手尝试”工具,该工具同时显示代码和结果。这将使您更容易理解我们接下来的每一个部分。

点击“下一页”继续教程。


Vue 练习

通过练习来测试自己

练习

填写缺失的部分,将 class 属性连接到“myClass”数据属性。

<p :class="myClass"></p>

开始练习



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持