Vue是一款用于構建用戶界面的漸進式的JavaScript框架。
使用步驟
引入Vue模塊，創建Vue的應用實例，定義元素，交給Vue控制。
一、引入Vue模塊
因為使用的是模塊化的JavaScript，因此在script標簽內要聲明一個屬性：type=module。
<script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'</script>應用實例（用Vue控制視圖的元素）
<!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><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {message: 'Hello Vue!' ,count:100}}}).mount('#app');</script>
</body>
</html>上述代碼中，.mount(#id) 表明了Vue接管的區域，data()內返回的值就是準備的數據，但注意在Vue的data()中的數據如果外部需要使用，要在數據名稱外加兩層大括號。（如果要基于Vue渲染視圖，一定要將表達式放在Vue接管的區域內）
Vue的常用指令
| 指令 | 作用 |
| v-for | 列表渲染，遍歷容器的元素或者對象的屬性 |
| v-bind | 為HTML標簽綁定屬性值，如設置 href , css樣式等 |
| v-if/v-else-if/v-else | 條件性的渲染某元素，判定為true時渲染,否則不渲染 |
| v-show | 根據條件展示某元素，區別在于切換的是display屬性的值 |
| v-model | 在表單元素上創建雙向數據綁定 |
| v-on | 為HTML標簽綁定事件 |
應用實例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能學習輔助系統</title><style>/* 導航欄樣式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex彈性布局 */justify-content: space-between; /* 左右對齊 */padding: 10px; /* 內邊距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默認的上下外邊距 */font-weight: bold; /* 加粗 */color: white;/* 設置字體為楷體 */font-family: "楷體";}.navbar a {color: white; /* 鏈接顏色為白色 */text-decoration: none; /* 移除下劃線 */}/* 搜索表單樣式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之間的間距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 輸入框內邊距 */width: 260px; /* 寬度 */}.search-form button {padding: 5px 15px; /* 按鈕內邊距 */}/* 表格樣式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 邊框 */padding: 8px; /* 單元格內邊距 */text-align: center; /* 左對齊 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 頁腳樣式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下內邊距 */margin-top: 30px;}#container {width: 80%; /* 寬度為80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 頂部導航欄 --><div class="navbar"><h1>Tlias智能學習輔助系統</h1><a href="#">退出登錄</a></div><!-- 搜索表單區域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><!-- v-model綁定數據，將輸入的數據綁定到searchForm.name中 --><input type="text" id="name" name="name" v-model="searchForm.name" placeholder="請輸入姓名"><label for="gender">性別：</label><select id="gender" name="gender" v-model="searchForm.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">職位：</label><select id="position" name="position" v-model="searchForm.job"><option value=""></option><option value="1">班主任</option><option value="2">講師</option><option value="3">學工主管</option><option value="4">教研主管</option><option value="5">咨詢師</option></select><!-- v-on:click綁定點擊事件，將點擊事件綁定到search方法中 --><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><!-- v-for遍歷empList中的數據 --><tr v-for="(item, index) in empList" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.gender == 1 ?'男':'女'}}</td><!-- 插值表達式不能出現在標簽內部，只能出現在標簽屬性中，此時使用v-bind綁定src屬性，將item.image的值綁定到src屬性中 --><td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td><td><!-- v-if判斷不同的條件展示什么職位 --><span v-if="item.job==1">班主任</span><span v-else-if="item.job==2">講師</span><span v-else-if="item.job==3">學工主管</span><span v-else-if="item.job==4">教研主管</span><span v-else-if="item.job==5">咨詢師</span><span v-else>其他</span></td><!-- <td>v-show根據條件展示元素，與v-if不同，v-show不會銷毀元素，v-if會銷毀元素v-show只改變元素的display屬性，不會銷毀元素<span v-show="item.job==1">班主任</span><span v-show="item.job==2">講師</span><span v-show="item.job==3">學工主管</span><span v-show="item.job==4">教研主管</span><span v-show="item.job==5">咨詢師</span></td> --><td>{{item.entrydate}}</td><td>{{item.updatetime}}</td><td class="action-buttons"><button type="button">編輯</button><button type="button">刪除</button></td></tr></tbody></table><!-- 頁腳版權區域 --><footer class="footer"><p>江蘇傳智播客教育科技股份有限公司</p><p>版權所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchForm:{//封裝用戶輸入的查詢條件name:'',gender:'',job:''},empList: [{ "id": 1,"name": "謝遜","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": "1","entrydate": "2023-06-09","updatetime": "2024-09-30T14:59:38"},{"id": 2,"name": "韋一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": "1","entrydate": "2020-05-09","updatetime": "2024-09-01T00:00:00"},{"id": 3,"name": "黛綺絲","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg","gender": 2,"job": "2","entrydate": "2021-06-01","updatetime": "2024-09-01T00:00:00"}]}},// 定義方法methods: {search(){//將搜索條件輸出到控制臺console.log(this.searchForm);},clear(){//清空表單this.searchForm={name:'',gender:'',job:''} }},}).mount('#container')</script></body>
</html>
如何設置自動備份任務？)
