Vue是一個前端框架,發音如View,幫助你有效率地開發任何複雜性的使用者介面
由前Google工程師 尤雨溪(Evan You) 邊工作邊開發出來的開源框架,好厲害!
還在耍廢嗎?一起來學習吧~ 期待有朝一日能應徵上遠端工作 www ~
以下內容都是取自官方Document 與 AI解釋~與自己小小心得
一起來看看官方文件 https://vuejs.org/
下面的範例是什麼?
// main.js 或 main.ts 取決於使用 Javascript or Typescript
import { createApp, ref } from 'vue'
createApp({
setup () {
return {
count: ref(0)
}
}
}).mount('#app')
這段代碼的作用是創建一個 Vue 應用並將其掛載到 index.html
中帶有 id="app"
的元素上。
// App.vue
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
這段代碼定義了一個 Vue 組件,它包含一個按鈕和一個計數器。按鈕的點擊事件綁定到 count++
,每次點擊按鈕時,計數器 count
會增加 1。
官方說有此範例有兩個特點先來了解一下!
⮕ 使用模板語法擴充了標準HTML?
⮕ 允許我們基於Javascript狀態以聲明式描述HTML輸出?
翻譯了官方敘述還是看不懂@@於是繼續用 AI 多拉A夢~
聲明式渲染的核心思想是,你可以使用模板語法來描述你想要在 HTML 中呈現的結果,而不是指示如何一步步地更新 DOM。在傳統的 JavaScript 開發中,你可能需要手動操作 DOM 來更新界面。例如,當數據改變時,你需要查找相應的 DOM 元素並手動更新它們的內容。這種方法叫做命令式編程
(Imperative Programming)。
而在 Vue.js 中,你可以使用聲明式編程來描述 HTML 輸出。這樣做的好處是,當數據改變時,Vue 會自動處理 DOM 更新
,保持界面和數據的一致性。
v-if
, v-for
, v-bind
等)來綁定 JavaScript 狀態。{{ count }}
是一個模板語法,表示將 count
的值顯示在這裡。⮕ Vue 會自動追蹤 JavaScript 狀態變化,並在變化發生時有效地更新 DOM
響應式系統的核心思想是,Vue 可以自動跟蹤 JavaScript 狀態的變化,並在這些變化發生時高效地更新 DOM。
data
中的狀態)。未來有好奇的部分都會突然插入~
Hooks
和虛擬 DOM
,Angular 使用 RxJS
和變更檢測
,Vue 使用其內建的響應式系統
和虛擬 DOM
。發現翻譯官網資料都會理解不足,以下則是直接叫AI更白話解釋~
Vue.js 是一個功能強大且靈活的前端框架,適用於各種不同的開發場景。以下是對各種使用方式的詳細解釋:
無需構建步驟增強靜態 HTML
:
<script>
標籤引入 Vue.js,然後使用 Vue 實現數據綁定和事件處理。嵌入為任意頁面的 Web 組件
:
單頁應用程序 (SPA)
:
全棧 / 服務器端渲染 (SSR)
:
Jamstack / 靜態網站生成 (SSG)
:
針對桌面、移動端、WebGL 甚至終端
:
Vue.js 的設計目標是靈活性和可逐步採用性
,使得它可以適應各種不同的開發需求。無論是簡單的靜態網站還是複雜的單頁應用,Vue.js 都能提供相應的支持,並且可以根據項目的需求逐步引入更多功能。
俗稱SFC
Vue.js 推薦使用單文件組件(Single-File Component,SFC)來編寫組件,這種方式對開發者非常友好且便於管理。以下是 SFC 的詳細解釋:
.vue
,這些文件看起來像 HTML,但包含了組件的所有部分。<template>
、<script>
和 <style>
。<template>
部分包含了組件的 HTML 模板,這是組件的視圖部分。<script>
部分包含了組件的邏輯,如數據、方法和生命周期鉤子。<style>
部分包含了組件的樣式,可以使用標準的 CSS,也可以使用預處理器如 Sass 或 Less。將上一個範例寫成SFC
的樣子如下:
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
.vue
文件轉換為瀏覽器可以直接運行的 JavaScript 。Vue CLI
(命令行界面工具)和 Vite
等工具可以自動為你設置所有必要的構建工具,使得你不需要手動配置 Webpack 或其他構建工具。Vue 組件可以使用兩種不同的 API 風格來編寫
Vue.js 提供了兩種主要的 API 風格來編寫組件:選項 API(Options API) 和 組合 API(Composition API)。下面是關於選項 API 的詳細解釋:
this
:this
代表當前組件的實例。這意味著你可以通過 this
訪問定義在 data
中的數據、調用 methods
中的方法,以及訪問其他選項中定義的內容。<script>
export default {
// 由 data() 返回的屬性成為響應式狀態
// 並會暴露在 `this` 上。
data() {
return {
count: 0
}
},
// 方法是改變狀態並觸發更新的函數。
// 它們可以在模板中綁定為事件處理函數。
methods: {
increment() {
this.count++
}
},
// 生命週期鉤子在組件的不同階段被調用。
// 此函數會在組件掛載後被調用。
mounted() {
console.log(`初始計數為 ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">計數為: {{ count }}</button>
</template>
組合 API(Composition API) 是 Vue 3 引入的一種新的編寫組件的方式,它與傳統的選項 API(Options API)有所不同。以下是對組合 API 的詳細解釋:
ref
、reactive
、computed
、watch
等,用於處理響應式狀態、計算屬性和監聽器。<script setup>
:<script setup>
一起使用。這是一種編譯時提示,讓 Vue 進行一些轉換來簡化代碼。<script setup>
,你可以更輕鬆地導入所需的 API 函數,並且聲明的變數和函數可以直接在模板中使用,無需額外的樣板代碼。<script setup>
import { ref, onMounted } from 'vue'
// 響應式狀態
const count = ref(0)
// 改變狀態並觸發更新的函數
function increment() {
count.value++
}
// 生命週期鉤子
onMounted(() => {
console.log(`初始計數為 ${count.value}.`)
})
</script>
<template>
<button @click="increment">計數為: {{ count }}</button>
</template>
兩種 API 風格都能完全涵蓋常見的使用情境。它們是由相同的底層系統支持的不同接口。事實上,選項 API 是建立在組合 API 之上的
!基本的概念和對 Vue 的知識在這兩種風格中是共享的。
選項 API(Options API)
組件實例:選項 API 是圍繞組件實例進行的,這與面向對象編程(OOP)的類別模型
更為契合。這對於有 OOP 背景的開發者來說,更容易理解。
data
、methods
、mounted
等)來強制代碼的結構,簡化了開發過程。組合 API(Composition API)
處理更複雜的邏輯
。選項 API
:如果不使用構建工具
,或僅在簡單的情境下使用 Vue。組合 API + 單文件組件(SFC)
:如果計劃構建複雜的應用程序,這種組合能夠提供更多的靈活性和強大的功能。雖然還是很多名詞不懂~一直用AI再解釋下去就不用睡覺了www