選單
×
我的 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 提供支援。