学习-06
1. 回顾
1.springboot整合swagger Api接口文档。
[1]引入相关依赖
[2]配置swagger配置类
[3]开始swagger注解驱动
[4]使用swagger注解。@Api @ApiOperation @ApiParam @ApiModel @ApiModelProperty
2. springboot整合定时器
2. 正文
1. vue简介
2. vue的使用
3. vue中常用的指令
4. axios发送异步请求
3. vue简介
它是一个Javascript框架，作用:简化dom的操作，以及响应式编程
4. 在webstorm中创建工程
（1）引入vue.js文件
<script type="text/javascript" src="js/vue.js"></script>
（2）body创建一个div标签
<body>
<div id="app">
{{msg}}
</div>
</body>
（3）创建自己的js代码
<script type="text/javascript">
//创建一个vue对象
var app=new Vue({
//vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
el: "#app",
//数据
data:{
msg:"qy163今天学习vue",
}
})
</script>
4.1 el属性:
把当前vue对象挂载到指定的标签元素上，使其vue生效。
5. vue指令
5.1 v-text 和v-html
设置标签的文本值(textContent)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{msg}}</span><hr>
<span v-text="msg">你喜欢什么?</span><hr>
<!--v-text:无法解析html标签 v-html可以解析html标签-->
<span v-html="msg">你喜欢什么?</span>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"<font color='red'>我喜欢打麻将</font>",
}
})
</script>
</html>
5.2 v-on基础
为元素绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{msg}}</span><hr>
<button v-on:click="fun">点击</button>
<!--上面的v-on:缩写为@-->
<button @dblclick="fun">点击2</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"<font color='red'>我喜欢打麻将</font>",
},
//定义方法
methods:{
fun(){
//this表示vue对象
this.msg="我喜欢打篮球";
},
fun2(){
}
}
})
</script>
</html>
5.3 v-show 和v-if
根据表达值的真假,切换元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<img src="imgs/sg.jpg" width="200" v-show="age>18&&age<36"/>
<hr>
<!--v-show通过style中disable来控制标签的显示和隐藏 v-if:通过删除和创建标签来控制-->
<img src="imgs/1.jpg" width="200" v-if="age>18&&age<36"/>
<button @click="fun">点击</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
age:18
},
methods:{
fun(){
this.age++;
}
}
})
</script>
</html>
5.4 v-bind
设置元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.a{
border: red solid 5px;
}
</style>
</head>
<body>
<div id="app">
<!--如何让img标签中src属性引用vue对象中的数据-->
<img v-bind:src="imgUrl" width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>
<!--v-bind: 缩写为: -->
<img :src="imgUrl" width="200" :title="title" :class="flag?'a':''"/><br>
<button @click="fun">点击</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
age:18,
imgUrl:"imgs/sg.jpg",
title:"帅哥",
flag:true
},
methods:{
fun(){
this.imgUrl="imgs/1.jpg";
this.title="美女好看"
}
}
})
</script>
</html>
5.5 v-for
循环数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--for(数据类型 b:数组){}-->
<li v-for="(item,index) in hobby">
{{item}}--->{{index}}
</li>
</ul>
<table width="500px" border="1" cellspacing="0" class="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="item in users">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button @click="deleteUser(item.name)">删除</button>
<button >编辑</button>
</td>
</tr>
</table>
<input type="text" @keyup.enter="fun()"/>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
hobby:["好吃","好喝","好色","好赌"],
users:[
{"name":"安志远","age":16,"sex":"女"},
{"name":"李云宵","age":19,"sex":"男"},
{"name":"闫锦超","age":15,"sex":"男"}
]
},
methods:{
deleteUser(name){
alert(name);
},
fun(){
alert("触发了回车键");
}
}
})
</script>
</html>
5.6 v-model
获取和设置表单元素的值. input select textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
<input type="text" v-model="name" />
{{name}}
<button @click="dj">点击</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
name:"刘德华"
},
methods:{
dj(){
this.name="张学友";
}
}
})
</script>
</html>
回顾：
v-text: -----v-html
v-on:-----@
v-show:-----v-if
v-bind: 标签属性绑定----:
v-for: 循环
v-model:表单元素的双向绑定
6. vue结合axios以及后台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/tianindex.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input
type="text"
class="input_txt"
placeholder="请输入查询的天气"
v-model="city"
/>
<button class="input_sub" @click="searchWeather">
搜 索
</button>
</div>
</div>
<table width="300" border="1">
<tr>
<td>姓名</td>
<td>薪水</td>
</tr>
<tr v-for="item in emps">
<td>{{item.ename}}</td>
<td>{{item.sal}}</td>
</tr>
</table>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="../js/axios.min.js"></script>
<!-- 自己的js -->
<script>
let app=new Vue({
el:"#app",
data:{
city:"",
empVo:{},
emps:[],
},
methods:{
searchWeather(){
axios.post("http://localhost:8080/emp/list/1/5",this.empVo).then(result=>{
this.emps=result.data.data.records;
})
}
}
})
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现