Vue基础部分

继之前的html css js 之后，我们过度到js框架。
vue是一款用于构建用户界面的渐进式js框架

及基于数据渲染出用户看到的界面
在这里插入图片描述
框架，就是一套完整的项目解决方案

准备

引入vue模块
创建vue应用实例，控制视图元素
准备元素div,被vue控制

数据驱动视图

准备数据
通过插值表达式渲染页面

通过 mount 将 Vue 实例挂载到指定的 DOM 元素上

javascript"><!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">// 导入Vueimport {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

在这里插入图片描述
注意：

javascript"><!-- 插值表达式是不能出现在标签内部的 --><!-- 但是可以使用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">javascript">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>