- 准备
引入Vue模块(官方提供)
创建Vue程序的应用实例，控制视图的元素
准备元素(div)，被Vue控制
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script type="module">import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({}).mount('#app')</script>
</body>
</html>- 数据驱动视图
准备数据
通过插值表达式渲染页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{ message }}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data() {return {message: 'hello vue'};}}).mount('#app');</script>
</body>
</html>常用指令
指令:HTML标签上带有 V-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能
常用指令:
| 指令 | 作用 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-bind | 为HTML标签绑定属性值，如设置 href，css样式等 |
| v-if/v-else-if/v-else | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
v-for
作用:列表渲染，遍历容器的元素或者对象的属性
语法:
<tr v-for="(item,index)in items" :key="item.id">{{item}}</tr>参数说明:
- items 为历的数组
- item 为遍历出来的元素
- index 为索引/下标，从0开始:可以省略，省略index语法:v-for="item in items
key:
- 作用:给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
- 推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)
<!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><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" name="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="submit">查询</button><button type="reset">清空</button></form><!-- 表格展示区 --><table><!-- 表头 --><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体内容 --><tbody><tr v-for="emp in empList":key="emp.id"><td>{{emp.name}}</td><td>{{emp.gender==1? '男':'女'}}</td><td><img class="avatar" src="{{emp.image}}" alt="{{emp.name}}"></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.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 {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"}]}}}).mount('#container')</script></body>
</html>
注：标签内部不可以有插值表达式
v-bind
作用:动态为HTML标签绑定属性值，如设置href，src，style样式等
语法:v-bind:属性名="属性值"
<img v-bind:src."item.image" width "30px">简化:属性名=“属性值"
<img :srce"item.image" width="30px">实例
v-if &v-show
作用:这两类指令，都是用来控制元素的显示与隐藏的
v-if
语法:v-if="表达式"，表达式值为 true，显示;false，隐藏
原理:基于条件判断，来控制创建或移除元素节点(条件渲染)
场景:要么显示，要么不显示，不频繁切换的场景
其它:可以配合 v-else-if/v-else 进行链式调用条件判断
v-show
语法:v-show="表达式"，表达式值为 true，显示;false，隐藏
原理:基于css样式display来控制显示与隐藏
场景:频繁切换显示隐藏的场景
实例
v-if显示
v-show显示
v-model
作用:在表单元素上使用，双向数据绑定。可以方便的获取或设置 表单项数据
语法:v-model="变量名
v-on
- 作用:为html标签绑定事件(添加事件监听)
- 语法:
- v-on:事件名="方法名”
- 简写为@事件名=""
注：<button>中要加上type="button"要不然会刷新页面，影响实验
访问数据成员要用this关键字