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>
如何设置自动备份任务？)
