網頁前端開發（基礎進階3--Vue）

Vue3

Vue是一款用于構建用戶界面的漸進式的JavaScript框架。

Vue由2部分組成：Vue核心包，Vue插件包

Vue核心包包含：聲明式渲染，組件系統。

Vue插件包：VueRouter（客戶端路由），Vuex/Pinia（狀態管理），Webpack/Vite（構建工具）

Vue的開發形式分為2種：基于核心包的局部開發，整站開發。

基于核心包的局部開發：只使用Vue核心包的局部開發。

整站開發：使用整個Vue生態進行開發。

框架：一套完整的項目解決方案，用于快速構建項目。

框架的優點：提升前端開發效率。

框架的缺點：需要記憶框架的使用規則。

1.Vue快速入門

（1）準備工作

1.引入Vue模塊

在html文件中

<body>

????????..........

? ? ? ? .........

????????<script type=‘module’>?

? ? ? ? ? ? ? ? import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

????????</script>

</body>

2.創建Vue程序的應用示例，控制視圖的元素

在html文件中

<body>

????????..........

? ? ? ? .........

????????<script type=‘module’>?

? ? ? ? ? ? ? ? import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

????????????????createApp({? })；

????????</script>

</body>

3.準備元素（div），被Vue控制。

<body>

????????..........

? ? ? ? .........

????????<script type=‘module’>?

? ? ? ? ? ? ? ? import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

????????????????createApp({? }).mount('#app'); // 只針對與id為app的元素進行掛載

????????</script>

</body>

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue入門</title>
</head>
<body><div id="app"><h1>{{ message }}</h1><h1>{{ count }}</h1></div><h1>{{ count }}</h1><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {message: 'Hello Vue!',count:100}}}).mount('#app'); // 只針對與id為app的元素進行掛載</script></body>
</html>

運行結果：

2.Vue常用指令

在html標簽上，不同指令實現不同功能。

1.v-for

用于列表渲染，遍歷容器中的元素/對象。

使用方法：

?<tr v-for="(item, index) in itemList"? :key="item.id">{{item}}</tr>

遍歷itemList數組

遍歷出來的元素是item

元素的索引是index

:key為遍歷出來的元素添加唯一標識

[ ]是數組

{ }是對象

示例

<table><!--  表頭  --><thead><!-- 定義一行 --><tr><th>序號</th><th>姓名</th><th>性別</th><th>頭像</th><th>職位</th><th>入職日期</th><th>最后操作時間</th><th>操作</th></tr></thead><tbody><tr v-for="(e, index) in empList" :key="e.id"><!-- index表示索引從0開始 序號表示從1開始 --><td>{{index+1}}</td>  <td>{{e.name}}</td><td>{{e.gender==1?'男':'女'}}</td><!-- 插值表達式，不能出現在標簽內部 --><td><img class='avatar'src="{{e.image}}" :alt='{{e.name}}'></td><td>{{e.position}}</td> //需要條件判斷 <td>{{e.entryDate}}</td><td>{{e.lastOpTime}}</td><td><button type="button">修改</button><button type="button">刪除</button></td></tr></tbody></table><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {searchFrome:{//封裝用戶輸入的查詢條件。name:'',gender:'',position:''},empList: [ //定義數組{"id":1,  //定義一個對象"name":"張三","gender": '1',"avatar": 'img/y2.png',"position": '1',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":2,"name":"李四","gender": '2',"avatar": 'img/y2.png',"position": '2',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":3,"name":"王五","gender": '1',"avatar": 'img/y2.png',"position": '3',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'}]} },// data后面添加方法methods:{search:function(){// 將搜索條件輸出到控制臺console.log(this.searchFrome);},clear:function(){// 清空搜索條件this.searchFrome={name:'',gender:'',position:''};}}}).mount('#all'); // 只針對與id為all的元素進行掛載</script>

????????頭像一欄顯示不正確。原因：插值表達式，不能出現在標簽內部。需要使用v-bind進行修飾。

? ? ? ? 職位一欄不能正確顯示，性別一欄（只有男或者女）可以使用三元運算符，但是職業有5種，無法使用三元運算符，應使用v-if/v-else-if/v-else或者v-show進行處理。

2.v-bind

? ? ? ? 動態為標簽屬性綁定值（插值表達式，不能在標簽內使用）

使用方法:

v-bind:屬性="變量" :屬性="變量"

<td><img class="avatar" ?v-bind:src="e.image" :alt="e.name"></td>

可保證圖片的正確顯示。

<!-- 表格主體內容 --><tbody><tr v-for="(e, index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1?'男' : '女'}}</td><!-- 插值表達式是不能出現在標簽內部 --><td><img class="avatar"  v-bind:src="e.image" :alt="e.name"></td><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">編輯</button><button type="button">刪除</button></td></tr></tbody></table>

3.v-if/v-else-if/v-else

????????用來控制元素的顯示與隱藏。

? ? ? ? 基于條件判斷，來控制創建或移除元素節點（條件渲染）

? ? ? ? 使用場景：網頁運行時進行處理，要么顯示要么不顯示。

示例：

<body><div id="container"><!-- 表格展示區 --><table><!-- 表頭 --><thead><tr><th>序號</th><th>姓名</th><th>性別</th><th>頭像</th><th>職位</th><th>入職日期</th><th>最后操作時間</th><th>操作</th></tr></thead><!-- 表格主體內容 --><tbody><tr v-for="(e, index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1?'男' : '女'}}</td><!-- 插值表達式是不能出現在標簽內部 --><td><img class="avatar"  v-bind:src="e.image" :alt="e.name"></td><!-- v-if: 控制元素的顯示與隱藏 --><td><span v-if="e.job == 1">班主任</span><span v-else-if="e.job == 2">講師</span><span v-else-if="e.job == 3">學工主管</span><span v-else-if="e.job == 4">教研主管</span><span v-else-if="e.job == 5">咨詢師</span><span v-else>其他</span></td><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">編輯</button><button type="button">刪除</button></td></tr></tbody></table>

v-else-if必須在v-if之后，可有多個v-else-if。

v-else必須在v-if/v-else-if之后。

4.v-show

????????用來控制元素的顯示與隱藏。與v-if/v-else-if/v-else有所區別。

v-if/v-else-if/v-else和v-show的區別：

? ? ? ? v-if網頁運行時處理，不滿足條件，直接不渲染此元素。

????????v-show通過css樣式，渲染v-show的所有元素，滿足條件顯示，不滿足條件隱藏。

? ? ? ? 基于css樣式的display來控制顯示與隱藏。

? ? ? ? 使用場景：頻繁切換顯示與隱藏兩種狀態；如：下拉框。

示例：

<body><div id="container"><!-- 表格展示區 --><table><!-- 表頭 --><thead><tr><th>序號</th><th>姓名</th><th>性別</th><th>頭像</th><th>職位</th><th>入職日期</th><th>最后操作時間</th><th>操作</th></tr></thead><!-- 表格主體內容 --><tbody><tr v-for="(e, index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1?'男' : '女'}}</td><!-- 插值表達式是不能出現在標簽內部 --><td><img class="avatar"  v-bind:src="e.image" :alt="e.name"></td><!-- v-show: 控制元素的顯示與隱藏 --><td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">講師</span><span v-show="e.job == 3">學工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨詢師</span></td> <td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">編輯</button><button type="button">刪除</button></td></tr></tbody></table></div>
</body>

5.v-model

????????v-model用于獲取表單項數據。

????????v-on用于事件綁定。

? ? ? ? 通常v-model和v-on配合起來使用。?

v-model中綁定的變量必須在data中定義

v-model使用方法：

<body>? ? ?

?<script type="module">

? ? import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

? ?

? ? createApp({

? ? ? data() {

? ? ? ? return {

? ? ? ? ? searchFrome:{//封裝用戶輸入的查詢條件。

? ? ? ? ? ? name:'',

? ? ? ? ? ? gender:'',

? ? ? ? ? ? position:''

? ? ? ? ? }

? ? ? }

? ? }).mount('#all'); // 只針對與id為all的元素進行掛載

?</script>

</body>

name<-->姓名

gender<-->性別

position<-->職位

具體代碼：

<body>
<div id="all"><!-- 顯示采集到的數據 --><!-- {{searchFrome}} --><form class="search-from" action="/search" method="post"><label for="name">姓名：</label><input type="text" name="name" id="name" v-model="searchFrome.name" placeholder="請輸入姓名"><label for="gender">性別：</label><select name="gender" id="genser" v-model="searchFrome.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">職位：</label><select name="position" id="position" v-model="searchFrome.position"><option value=""></option><option value="1">班主任</option><option value="2">講師</option><option value="3">學工主管</option><option value="4">教研主管</option><option value="5">咨詢師</option></select><button type="button" v-on:click="search">查詢</button><button type="button" @click="clear">清空</button></form><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {searchFrome:{//封裝用戶輸入的查詢條件。name:'',gender:'',position:''}} }}).mount('#all'); // 只針對與id為all的元素進行掛載</script>
</body>

?在標簽中使用：

<input type="text" name="name" id="name" v-model="searchFrome.name" placeholder="請輸入姓名">

將姓名文本欄中輸入數據導入data中的searchFrome.name

?在標簽中使用：

<select name="gender" id="genser" v-model="searchFrome.gender">

將性別文本欄中輸入數據導入data中的searchFrome.gender

??在標簽中使用:

<select name="position" id="position" v-model="searchFrome.position">

將職業文本欄中輸入數據導入data中的searchFrome.position

效果如下：

6.v-on

使用方法：
v-on:click="函數名"? 或

@click="函數名"

為html標簽綁定事件（添加事件監聽）。

通常與v-model配合使用。

 <button type="button" v-on:click="search">查詢</button><button type="button" @click="clear">清空</button>

將查詢與清空按鈕綁定事件監聽。

整體代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>員工管理</title><style>#all{width: 80%;margin: 0 auto;}.navbar{background-color: rgb(170, 170, 170);display: flex;/*彈性布局*/justify-content: space-between;/*左右對齊*/align-items: center;/*垂直居中*/padding: 5px;}.navbar h1{margin: 0;/*去掉h1標簽的默認間距*/font-weight: bold;/*加粗*/color: white;/*白色文字*/font-family: "楷體";}.navbar a{color: white;font-weight: bold;/*加粗*/text-decoration: none;/*取消下劃線*/align-items: center;/*垂直居中*/}.search-from{display: flex;flex-wrap: nowrap;/*換行*/align-items: center;/*垂直居中*/gap: 10px;/*間距*/margin-top: 10px;margin-bottom: 10px;}.search-from input,select{padding: 5px;width: 220px;}table{width: 100%;border-collapse: collapse;}th,td{border: 1px solid rgb(0, 0, 0);/*邊框*/padding: 5px;text-align: center;}.footer{background-color: #b5b3b3;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}</style>
</head>
<body>
<div id="all"><div class="navbar"><h1>tlias 智能學習輔助系統</h1><a href="">退出登錄</a></div><!-- 顯示采集到的數據 --><!-- {{searchFrome}} --><form class="search-from" action="/search" method="post"><label for="name">姓名：</label><input type="text" name="name" id="name" v-model="searchFrome.name" placeholder="請輸入姓名"><label for="gender">性別：</label><select name="gender" id="genser" v-model="searchFrome.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">職位：</label><select name="position" id="position" v-model="searchFrome.position"><option value=""></option><option value="1">班主任</option><option value="2">講師</option><option value="3">學工主管</option><option value="4">教研主管</option><option value="5">咨詢師</option></select><button type="button" v-on:click="search">查詢</button><button type="button" @click="clear">清空</button></form><table><!--  表頭  --><thead><!-- 定義一行 --><tr><th>序號</th><th>姓名</th><th>性別</th><th>頭像</th><th>職位</th><th>入職日期</th><th>最后操作時間</th><th>操作</th></tr></thead><tbody><tr v-for="(e, index) in empList" :key="e.id"><!-- index表示索引從0開始 序號表示從1開始 --><td>{{index+1}}</td>  <td>{{e.name}}</td><td>{{e.gender==1?'男':'女'}}</td><!-- 插值表達式，不能出現在標簽內部 --><td><img class='avatar' v-bind:src="e.avatar" :alt='e.name'></td><!-- <td>{{e.position}}</td> //需要條件判斷 --><td><span v-if="e.position==1">班主任</span><span v-else-if="e.position==2">講師</span><span v-else-if="e.position==3">學工主管</span><span v-else-if="e.position==4">教研主管</span><span v-else-if="e.position==5">咨詢師</span><span v-else>其他</span></td><td>{{e.entryDate}}</td><td>{{e.lastOpTime}}</td><td><button type="button">修改</button><button type="button">刪除</button></td></tr></tbody></table><footer class="footer"><p>cyy有限公司</p><p>版權，時間2025.5.9</p></footer>
</div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {searchFrome:{//封裝用戶輸入的查詢條件。name:'',gender:'',position:''},empList: [ //定義數組{"id":1,  //定義一個對象"name":"張三","gender": '1',"avatar": 'img/y2.png',"position": '1',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":2,"name":"李四","gender": '2',"avatar": 'img/y2.png',"position": '2',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":3,"name":"王五","gender": '1',"avatar": 'img/y2.png',"position": '3',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'}]} },// data后面添加方法methods:{search:function(){// 將搜索條件輸出到控制臺console.log(this.searchFrome);},clear:function(){// 清空搜索條件this.searchFrome={name:'',gender:'',position:''};}}}).mount('#all'); // 只針對與id為all的元素進行掛載</script></body>
</html>