Vue基础部分
继之前的html css js 之后，我们过度到js框架。
vue是一款用于构建用户界面的渐进式js框架
及基于数据渲染出用户看到的界面
框架，就是一套完整的项目解决方案
准备
- 引入vue模块
- 创建vue应用实例，控制视图元素
- 准备元素div,被vue控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面
通过 mount 将 Vue 实例挂载到指定的 DOM 元素上
<!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">
<!-- 通过插值表达式{{message}}输出数据 -->
<h1>{{message}}</h1>
<h1>{{count}}</h1>
</div>
<script type="module">
// 导入Vue
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// 接管应用实例
createApp({
// 定义数据, 返回一个数据模型
data(){
return {
message: 'Hello Vue!',
count: 100
}
}
}).mount('#app');
</script>
</body>
</html>
常用指令
实际上vue就是html的特殊属性，以v-标识
以下根据案例进行学习
员工列表数据渲染展示 v-for
注意：
<!-- 插值表达式是不能出现在标签内部的 -->
<!-- 但是可以使用v-bind专门设置属性值 -->
<td><img class="avatar" :src="item.image" :alt="item.name"></td>
v-if & v-show
v-model & v-on
案例：由于没有后端，只是实现采集 用户输入 ** 的信息
采集表单项数据:v-model
添加事件监听（比如按钮点击）
一码全解，可自己运行查看网页效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueLearn</title>
<head>
<meta charset="UTF-8">
<title>Tlias智能学习辅助系统</title>
<style>
body {
margin: 20px;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.system-title {
font-size: 24px;
font-weight: bold;
}
.search-area {
background: #f5f5f5;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.search-row {
display: flex;
gap: 20px;
margin-bottom: 10px;
}
.search-item {
display: flex;
align-items: center;
gap: 5px;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
}
th,
td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f9f9f9;
font-weight: bold;
}
.operation-btn {
color: #1890ff;
cursor: pointer;
margin-right: 10px;
}
.logout-btn {
background: #1890ff;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="header"> <!-- 使用v-for循环渲染 -->
<div class="system-title">Tlias智能学习辅助系统</div>
<button class="logout-btn">退出登录</button>
</div>
<!-- 搜索表单区域 -->
<div class="main-container" id="container">
<div class="search-area">
<!-- 简单显示用户搜索的内容 -->
{{searchFrom}}
<form class="search-from">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" v-model="searchFrom.name" placeholder="请输入姓名">
<label for="gender">性别：</label>
<select id="gender" name="gender" v-model="searchFrom.gender">
<option value=""></option>
<option value="Male">男</option>
<option value="Female">女</option>
</select>
<label for="job">职位：</label>
<select id="job" name="job" v-model="searchFrom.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>
<!-- 按下按钮时调用方法 -->
<button type="button" v-on:click="search">搜索</button>
<button type="button" v-on:click="reset">重置</button>
</form>
</div>
<!-- 表格区域 -->
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- 遍历empList数组，使用v-for渲染出每一项数据 -->
<tr v-for="(item, index) in empList" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.gender == 'Male' ? '男' : '女'}}</td>
<!-- 插值表达式是不能出现在标签内部的 -->
<!-- 但是可以使用v-bind专门设置属性值 -->
<td><img class="avatar" :src="item.image" :alt="item.name"></td>
<!-- v-if控制元素的显示与否，成立才渲染 -->
<td>
<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>
<!-- v-show控制元素的展示与隐藏，不成立也渲染，实际上控制的是display属性 -->
<!-- <td>
<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>
<span v-show>其他</span>
</td> -->
<td>{{item.entrydate}}</td>
<td>{{item.updatetime}}</td>
<td><span class="operation-btn">编排学员</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data() {
return {
searchFrom: { // 封装用户输入的查询条件
name: '',
gender: '',
job: ''
},
// 方括号内是数组，大括号内是对象，对象中包含属性和值
empList: [
{
"id": 1,
"name": "John",
"image": "-",
"gender": "Male",
"job": "1",
"entrydate": "2021-06-15 15:30",
"updatetime": "2024-09-16 15:30"
},
{
"id": 2,
"name": "Alice",
"image": "-",
"gender": "Female",
"job": "2",
"entrydate": "2022-01-10 09:20",
"updatetime": "2024-09-18 13:15"
},
{
"id": 3,
"name": "Michael",
"image": "-",
"gender": "Male",
"job": "3",
"entrydate": "2020-11-23 11:00",
"updatetime": "2024-09-12 10:25"
},
{
"id": 4,
"name": "Sophia",
"image": "-",
"gender": "Female",
"job": "4",
"entrydate": "2019-08-05 16:40",
"updatetime": "2024-09-14 14:50"
},
{
"id": 5,
"name": "David",
"image": "-",
"gender": "Male",
"job": "5",
"entrydate": "2021-02-22 12:30",
"updatetime": "2024-09-15 09:00"
},
{
"id": 6,
"name": "Emily",
"image": "-",
"gender": "Female",
"job": "6",
"entrydate": "2023-03-16 08:15",
"updatetime": "2024-09-17 16:05"
},
{
"id": 7,
"name": "Daniel",
"image": "-",
"gender": "Male",
"job": "7",
"entrydate": "2020-06-30 14:45",
"updatetime": "2024-09-13 17:25"
},
{
"id": 8,
"name": "Olivia",
"image": "-",
"gender": "Female",
"job": "8",
"entrydate": "2022-07-11 10:50",
"updatetime": "2024-09-19 11:40"
},
{
"id": 9,
"name": "James",
"image": "-",
"gender": "Male",
"job": "9",
"entrydate": "2018-12-18 13:10",
"updatetime": "2024-09-20 15:55"
},
{
"id": 10,
"name": "Isabella",
"image": "-",
"gender": "Female",
"job": "10",
"entrydate": "2021-09-25 17:30",
"updatetime": "2024-09-21 10:35"
}
]
}
},
// 方法
// `methods`: 是 Vue 实例中的一个选项对象，
// 它里面包含了多个方法。在 Vue 中，`methods` 用来定义组件中的 **函数**，这些函数可以在模板中绑定并执行，或者在 JavaScript 逻辑中调用。
// 这里定义了一个 `search` 方法，用来将用户输入的搜索条件输出到控制台。
methods:{
// 将搜索条件输出到控制台
search() {
console.log(this.searchFrom);
},
reset(){
// 重置搜索条件,设置为空自动清空
this.searchFrom = {
name: '',
gender: '',
job: ''
}
}
}
}).mount("#container")
</script>
</body>
</html>
end.
致谢：本文参考黑马程序员的视频，本人也看过很多黑马程序员的视频，给我带来非常大的帮助。
https://www.bilibili.com/video/BV1yGydYEE3H/?vd_source=1b8f9bfb1d0891faf1c70d7678ae56db
