菜单
×
我的 W3Schools 获取证书 Spaces 教师 Plus 获取证书 Spaces 教师 Plus
   ❮   
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 Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes
Vue Built-in Attributes Vue 'is' Attribute Vue 'key' Attribute Vue 'ref' Attribute
Vue Built-in Components
Vue Built-in Components <KeepAlive> <Teleport> <Transition> <TransitionGroup>
Vue Built-in Elements
Vue Built-in Elements <component> <slot> <template>
Vue Component Instance
Vue Component Instance $attrs $data $el $parent $props $refs $root $slots $emit() $forceUpdate() $nextTick() $watch()
Vue Directives
Vue Directives v-bind v-cloak v-for v-html v-if v-else-if v-else v-memo v-model v-on v-once v-pre v-show v-slot v-text
Vue Instance Options
Vue Instance Options data methods computed watch props emits expose
Vue Lifecycle Hooks
Vue Lifecycle Hooks beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted errorCaptured renderTracked renderTriggered activated deactivated serverPrefetch

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue Examples

❮ Previous Next ❯

Introduction to Vue

创建一个简单的“Hello World”程序 创建一个带文本插值的程序
Vue Basics Explained

The v-bind Directive

绑定一个 <div> 元素到一个类 绑定一个 <img> 元素到一个图片文件 更改字体大小 以另一种方式更改字体大小 再次以另一种方式更改字体大小 更改背景颜色 使用 v-bind 和 JavaScript 条件来更改背景颜色 绑定一个 <div> 元素到一个类 条件性地绑定一个 <div> 元素到一个类 条件性地绑定一个 <div> 元素到一个类，使用数据属性 使用 v-bind 简写 使用输入范围元素更改不透明度以显示图片 点击时，为使用 v-for 创建的图片分配一个类 我们看到用 class 和 v-bind:class 设置的 CSS 规则是合并的 可以用 v-bind:class 设置多个类，用逗号分隔 CSS 规则用 v-bind:style 定义，使用 camelCase 和 kebab-case 记法 使用数组语法分配类
v-bind Explained

The v-if Directive

根据数据属性有条件地显示文本 根据比较有条件地显示文本 使用 v-if、v-else-if 和 v-else 有条件地显示文本 如果某个文本包含“pizza”一词，则显示一条消息 如果某个文本包含“pizza”一词，则显示一条消息和一个图片 如果某个文本包含“pizza”或“burrito”，则显示不同的消息和图片
v-if Explained

The v-show Directive

根据数据属性显示或隐藏一个 <div> 元素 探索 v-show 和 v-if 之间的区别
v-show Explained

The v-for Directive

根据数组渲染列表 根据数组渲染图片 根据数组渲染图片和文本 渲染基于数组的文本时获取索引 渲染基于数组中对象的文本时获取索引
v-for Explained

The v-on Directive

点击按钮使计数器递增 点击按钮开关灯 每次注册文本输入事件时，计数器都会递增 每次注册鼠标指针移动事件时，都会生成一个随机的背景颜色 使用 v-on:click 为使用 v-for 生成的元素设置点击事件 使用 v-on 简写 @
v-on Explained

方法

一个方法写“Hello World!” 一个方法从事件对象中获取鼠标指针位置 一个方法根据鼠标指针位置更改背景颜色 一个方法将输入字段中的文本写入笔记本页面图片 当点击不同的按钮时，会调用带有不同参数值的同一方法 方法被调用时，将文本和事件对象作为参数 许多按钮调用同一方法，但参数不同
Methods Explained

Event Modifiers

.once 修饰符使警报在按钮被点击时仅出现一次 keydown 键盘事件调用一个方法，该方法将按键写入屏幕 当按下 'S' 键时，.s 修饰符会触发一个警报 当同时按下 'S' 和 'ctrl' 键时，.s 和 .ctrl 修饰符会触发一个警报 右键点击 <div> 元素时，背景颜色会改变 当按下 'ctrl' 键并右键点击 <div> 元素时，背景颜色会改变 使用 .prevent 修饰符可以防止右键点击下拉菜单 按下 'shift' 键时，左键点击会更改图像
Event Modifiers Explained

The v-model Directive

可以使用 v-model 将新的购物项目添加到购物列表中 探索 v-model 提供的双向绑定功能 复选框更改布尔数据属性 购物清单 购物清单，可将项目标记为已找到 动态餐厅订单表格 使用单选按钮 <input type="radio"> 选择喜欢的动物 使用复选框 <input type="checkbox"> 选择喜欢的食物 从下拉列表中选择汽车 <select> 选择多辆汽车 <select multiple> 只读表单输入 <input type="file"> 注册身高 <input type="range"> 选择颜色 <input type="color"> 撰写产品评论 <textarea>
v-model Explained

Computed Properties

复选框动态化，使文本反映当前状态 当前复选框状态文本为“yes”或“no”
Computed Properties Explained

Watchers

使用监视器，使得无法选择 20 到 60 之间的值 监视器将新值和旧值作为输入参数 新旧值用于确认正确的电子邮件地址
Watchers Explained

模板

使用模板配置选项显示“Hello World!”
Templates Explained

SFC Pages

一个非常基础的 SFC 页面
SFC Pages Explained

Components

一个组件使用了三次 每个组件都有自己的计数器 带 props 的组件是用 v-for 创建的 带 props 的组件是用 v-for 和 key 属性创建的 这个错误的例子演示了需要 key 属性 这个例子演示了 key 属性可以解决问题
Components Explained

Props

Props 被定义在组件中，以数组形式 在组件中定义了两个 prop 属性 一个布尔 prop 用于定义食物是否为最爱 props 配置选项被定义为一个对象 'foodIsFavorite' 数据属性可以通过按钮切换
Props Explained

Emit

组件发出布尔值“favorite”状态 发出的布尔值“favorite”状态被 App.vue 接收 发出的布尔值“favorite”状态被 App.vue 接收并更新
Emit Explained

Fallthrough Attributes

style 属性会传递到组件 style 属性会传递到组件，并与内联样式合并 $attrs 对象用于定义传递属性应属于哪里
Fallthrough Attributes Explained

Scoped Styling

定义的样式是全局的，除非另有定义 样式被定义为局部，使用了 scoped 属性
Scoped Styling Explained

Local Components

在 main.js 中定义的组件是全局可用的 组件可以定义在另一个组件内部，使其仅在局部可用
Local Components Explained

Slots

“Hello World!” 被接收到组件的 slot 中 组件的 slot 用于创建一个卡片式包装 组件的 slot 用于创建另一个卡片式包装 slot 用于带有回退内容 在同一个组件中使用两个 slot slot 被命名，以便将内容定向到正确的位置 如果 slot 没有名称，则为默认 slot slot 被显式定义为默认 slot v-slot 指令用于将内容定向到特定 slot v-slot 简写是 # 接收来自作用域 slot 的数据 使用 v-for 创建的作用域 slot 将数据发送到其父组件 使用对象数组创建的作用域 slot 将数据发送到其父组件 文本从作用域 slot 发送，而不使用 v-bind 指令 作用域 slot 被命名 命名作用域 slot 将不同的数据发送到 App.vue
Slots Explained

Dynamic Components

App.vue 在要显示的组件之间切换 没有 <KeepAlive> 组件，组件不会被缓存 <KeepAlive> 组件缓存组件 只有指定的组件被 <KeepAlive include="CompOne"> 代码缓存 指定的组件不会被 <KeepAlive exclude="CompOne"> 代码缓存 两个组件被指定使用 <KeepAlive> 组件进行缓存 最后两个访问的组件被指定使用 <KeepAlive> 组件进行缓存
Dynamic Components Explained

Teleport

一个 <div> 元素被移动到 DOM 的 <body> 根元素 作用域样式和脚本仍然适用于传送的 <div> 元素
Teleport Explained

HTTP Requests

发送了一个 GET 请求来获取文本文件，并接收到一个 Promise 对象 发送了一个 GET 请求来获取文本文件，并接收到一个响应对象 发送了一个 GET 请求来获取文本文件，并接收到实际文件 发送了一个 GET 请求来获取 JSON 文件，并接收到关于大型陆地哺乳动物的信息 发送了一个 GET 请求来获取 JSON 文件，并显示一个随机的大型陆地哺乳动物 从 random-data-api.com API 获取一个随机用户 从 random-data-api.com API 获取一个随机用户，并显示其称谓、姓名和图像 使用 axios 库从 random-data-api.com API 获取一个随机用户
HTTP Requests Explained

Template Refs

$refs 对象用于替换 <p> 元素中的文本 $refs 对象用于将文本从一个 <p> 元素替换到另一个 $refs 对象用于将 <input> 元素的值放入 <p> 元素中 使用 v-for 创建的带有 ref 属性的 <li> 元素在 $refs 对象中被收集为数组
Template Refs Explained

Lifecycle Hooks

beforeCreate 生命周期钩子 created 生命周期钩子 beforeMount 生命周期钩子 mounted 生命周期钩子 mounted 生命周期钩子用于将光标放入 <input> 元素中 beforeUpdate 生命周期钩子 updated 生命周期钩子 updated 生命周期钩子会生成一个无限循环 beforeUnmount 生命周期钩子 unmounted 生命周期钩子 errorCaptured 生命周期钩子 errorCaptured 生命周期钩子检索有关错误的信息 renderTracked 生命周期钩子 activated 生命周期钩子 activated、deactivated 和其他生命周期钩子
Lifecycle Hooks Explained

Provide/Inject

App.vue 中提供的信息被注入并显示在组件中
Provide/Inject Explained

Routing

组件通过动态组件进行切换 组件通过路由进行切换
Routing Explained

Animations

使用 CSS transition 属性旋转 <div> 元素 圆形 <div> 元素使用 CSS @keyframes 属性左右弹跳 通过按钮切换 <p> 元素 <p> 元素在 <Transition> 组件中淡出移除时 <p> 元素在切换时向内滑入和滑出 <p> 元素在“进入”和“离开”时具有不同的背景颜色 <p> 元素以不同的方式设置动画，使用 name prop 来区分 <Transition> 组件 after-enter 事件触发显示 <div> 元素 切换按钮触发 enter-cancelled 事件 appear prop 在页面加载后立即启动 <p> 元素的动画 在“进入”和“离开”时通过动画翻阅图像。新图像在旧图像移除之前添加 在“进入”和“离开”时通过动画翻阅图像。mode="out-in" 可防止在旧图像移除之前添加新图像 组件之间的切换有动画效果
Animations Explained

Animations with v-for

使用 <TransitionGroup> 将新列表项添加到使用 v-for 渲染的列表中 可以添加或移除骰子，添加的骰子使用 <TransitionGroup> 进行动画处理 可以添加或移除骰子，添加和移除的骰子都使用 <TransitionGroup> 进行动画处理 可以添加、移除、洗牌或排序骰子，所有这些都使用 <TransitionGroup> 进行动画处理
Animations with v-for Explained

The Composition API

使用 Composition API 编写：可以通过点击按钮减少打字机存储计数 使用 Options API 编写：可以通过点击按钮减少打字机存储计数
Composition API Explained

❮ Previous Next ❯
PLUS
空格
获取证书
面向教师
面向企业
联系我们
×

联系销售

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

报告错误

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

热门教程
HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程
热门参考
HTML 参考
CSS 参考
JavaScript 参考
SQL 参考
Python 参考
W3.CSS 参考
Bootstrap 参考
PHP 参考
HTML 颜色
Java 参考
Angular 参考
jQuery 参考
热门示例
HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例
获取证书
 HTML 证书
CSS 证书
JavaScript 证书
前端证书
SQL 证书
Python 证书
PHP 证书
jQuery 证书
Java 证书
C++ 证书
C# 证书
XML 证书
论坛 关于 学院
W3Schools 经过优化，旨在方便学习和培训。示例可能经过简化，以提高阅读和学习体验。
教程、参考资料和示例会不断审查，以避免错误，但我们无法保证所有内容的完全正确性。
使用 W3Schools 即表示您已阅读并接受我们的使用条款、Cookie 和隐私政策。

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