目錄

（1）Vue3工程環境準備、項目基礎腳手架搭建詳細教程。(博客鏈接)

（2）Vue3的基礎語法學習與使用。

（1）"{{}}"綁定數據。

<1>ref()函數定義變量——綁定數據。

<2>reactive({...})函數定義變量——綁定數據。

（2）定義數據的兩種方式。(常用)

<1>ref()函數。

<2>reactive({...})——Vue實例定義中再定義變量。

（3）v-model。(綁定數據、雙向綁定)

（4）v-if、v-else-if、v-else。(根據變量值動態地改變頁面渲染)

（5）v-for。

<1>綁定數組變量動態渲染盒子(卡片)。

<2>綁定數組變量動態渲染"選擇下拉框"。

（6）"v-on："(原生寫法)或"@"(簡寫)。（事件綁定）

（7）v-bind。(動態綁定屬性)

（8）onMounted。(頁面元素加載后觸發)

---

（1）Vue3工程環境準備、項目基礎腳手架搭建詳細教程。(博客鏈接)

• Vue3實戰學習（Vue環境配置、快速上手及卸載、下載安裝Node.js超詳細教程(2025)、npm配置淘寶鏡像）(1)-CSDN博客
• Vue3實戰學習（IDEA中打開、啟動與搭建Vue3工程極簡腳手架教程(2025超詳細教程)、Windows系統命令行啟動Vue3工程）(2)-CSDN博客

（2）Vue3的基礎語法學習與使用。

（1）"{{}}"綁定數據。

• 結合下面的定義數據的兩種方式——>展示"{{}}"綁定數據。
• 當Vue實例中的變量的數據變化時，頁面上的內容也會隨之更新。

---

<1>ref()函數定義變量——綁定數據。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><div style="font-size: 25px">{{ a }} {{ b }}</div></div>
</template><script setup>import {ref} from "vue";//第一種定義數據的方式
const a = ref(666)
const b = ref("歲歲歲平安真的很帥！")</script>

---

• 頁面渲染后如下所示。

---

<2>reactive({...})函數定義變量——綁定數據。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><div style="font-size: 25px;margin-bottom: 20px">{{ a }} {{ b }}</div><div style="font-size: 25px;font-weight: bold;margin-bottom: 20px">{{ data.c }} {{ data.d }}</div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("歲歲歲平安真的很帥！")//第二種定義數據的方式
const data = reactive({c: 123,d:"歲歲歲平安加油學Vue3！"
})</script>

---

---

• 頁面渲染后如下所示。

---

• 不要直接綁定Vue對象。不然整個對象全部渲染出來了。

<div style="font-size: 25px;font-weight: bold;margin-bottom: 20px">{{ data.c }} {{ data.d }}{{data}}
</div>

---

（2）定義數據的兩種方式。(常用)

• 注意：兩種方式的使用都需要導包才能使用！

<1>ref()函數。

---

<2>reactive({...})——Vue實例定義中再定義變量。

---

（3）v-model。(綁定數據、雙向綁定)

• v-model：通常用于表單綁定數據。
• 使用"輸入框"(<input/>)進行綁定數據演示。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><div style="margin-bottom: 20px"><input v-model="data.c" /></div></div>
</template><script setup>import {reactive, ref} from "vue";//第二種定義數據的方式
const data = reactive({c: 123,d:"歲歲歲平安加油學Vue3！"
})</script>

---

• 雙向綁定。數據可以在用戶輸入的時候發生實時的變化。

---

（4）v-if、v-else-if、v-else。(根據變量值動態地改變頁面渲染)

• 需求：當data.name的值改變時，渲染的<span>也跟著改變。

---

---

---

• 使用v-if、v-else-if、v-else完成變量的值動態改變頁面渲染。
• 注意：當雙引號中需要再使用雙引號時，需要將內部的雙引號改成單引號。否則無法識別內部的雙引號。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><div><span style="font-weight: bold;color: red" v-if="data.name === '佩奇'">小豬佩奇</span><span style="font-weight: bold;color: gold" v-else-if="data.name === '美猴王'">美猴王</span><span style="font-weight: bold;color: black" v-else>科比</span></div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("歲歲歲平安真的很帥！")//第二種定義數據的方式
const data = reactive({c: 123,d:"歲歲歲平安加油學Vue3！",name:"佩奇"
})</script>

---

• 修改data.name的值。觀察頁面渲染結果。

---

---

（5）v-for。

<1>綁定數組變量動態渲染盒子(卡片)。

• Vue實例data中定義一個數組變量arr。數組變量里面有三個數字。需要實現的操作：讓這三個數字渲染到三個<div>盒子中并顯示在頁面中。

---

• 將三個div盒子的樣式設計好后。

---

---

• 使用v-for完成數組變量的數據的依次綁定。
• 原理：臨時變量item，通過循環依次將data.arr的數組變量內的值賦值給item。

---

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><!--   三個div盒子橫著排列 --><div style="display: flex"><div style="width: 300px;height: 300px;text-align:center;font-weight:bold;line-height:300px;background-color: chartreuse;margin-right: 10px" v-for="item in data.arr">{{item}}</div></div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("歲歲歲平安真的很帥！")//第二種定義數據的方式
const data = reactive({c: 123,d:"歲歲歲平安加油學Vue3！",name:"",arr:[1,2,3],
})</script>

---

• 修改data.arr里的值。再查看頁面的渲染結果。

---

---

<2>綁定數組變量動態渲染"選擇下拉框"。

• 讓下拉選擇框動態綁定數組變量：data.fruits。

---

<div style="margin-bottom: 25px"><select style="width: 100px"><option v-for="item in data.fruits">{{item}}</option></select>
</div>

---

• 頁面的最終渲染結果。

---

（6）"v-on："(原生寫法)或"@"(簡寫)。（事件綁定）

• 像鼠標移動、鼠標移入輸入框聚集事件、點擊<div>盒子、點擊按鈕、失焦事件、鍵盤輸入事件等等都是一種事件。

---

• 本次案例：點擊按鈕，觸發事件，彈出一個網頁提示。

---

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><div><button v-on:click="onClick">點我加好運</button></div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("歲歲歲平安真的很帥！")//第二種定義數據的方式
const data = reactive({c: 123,d:"歲歲歲平安加油學Vue3！",name:"",arr:[4,5,6,7],fruits:["蘋果","香蕉","橘子","草莓"]
})//定義一個點擊方法（js內容）
const onClick =()=>{alert("好運+1！")
}</script>

---

---

• 使用簡化寫法。使用"@"代替v-on：。

---

---

• 將上面的v-for的數組變量動態渲染頁面div盒子案例，再添加點擊div盒子事件，然后網頁彈窗提示點擊的div盒子對應的數字。

---

---

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div><!--   div盒子橫著排列 --><div style="display: flex;margin-bottom: 25px"><div v-on:click="show(item)" style="width: 300px;height: 300px;text-align:center;font-weight:bold;line-height:300px;background-color: chartreuse;margin-right: 10px" v-for="item in data.arr">{{item}}</div></div></div>
</template><script setup>import {reactive, ref} from "vue";//定義一個點擊方法（js內容）
const onClick =()=>{alert("好運+1！")
}const show = (item) =>{alert(item)
}</script>

---

• 這樣每當點擊div盒子時，就會拿到對應它渲染時的item值并傳給show函數。在函數中拿到參數值后，在網頁彈出提示！

---

（7）v-bind。(動態綁定屬性)

• 驗證了HTML元素是可以被數據動態渲染的！
• 給一個div盒子綁定一個基礎的css樣式屬性。

---

---

• 將width(寬)、height(高)、backgroundColor(背景顏色)設置成data對象里的對象數據，通過v-bind動態綁定對象并完成指定的div盒子基礎樣式設置。

---

• 將{'width':'100px','height':'100px','backgroundColor':'yellow'}替換成對象（data.box）。

---

• 動態綁定基礎樣式成功渲染頁面。

---

• 可以使用簡寫（":"）代替"v-bind"。

---

• 使用<img>標簽動態綁定鏈接。渲染頁面。
• 圖片地址：https://www.runoob.com/wp-content/uploads/2017/01/vue.png

---

---

• 成功動態的渲染了圖片的顯示。因為以后data.img數據值肯定不是直接定義在對象data中的，而是存儲在數據庫中的。

---

（8）onMounted。(頁面元素加載后觸發)

• 因為網頁的所有元素加載并渲染出來是需要一點點時間的。
• 如果想讓網頁的元素加載后，再執行某些操作時就需要用到。（實現渲染數據圖、表時常用：渲染出頁面數據圖、表基本結構后，才會去數據庫拿取數據完成剩下的渲染...）

---

• 導入包。

---

• onMounted(()=>{...})。(hook：鉤子函數？？)

---

• 點擊刷新按鈕。當頁面刷新后并加載完成就會彈出網頁提示！點擊確定后立馬顯示網頁完整渲染。

---