1.Vue简介
它是一个JavaScript框架,作用:简化dom的操作,以及响应式编程
2.在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>
//创建一个vue对象
let app = new Vue({
//vue对象挂载到id为app的标签上,那么标签下的所有元素都可以使用vue对象中的成员
el:"#app"
//数据可以是任意数据类型
data:{
msg:"今天学vue"
}
})
</script>
3.vue指令
(1)v-text:它会替代显示对应的数据对象上的值。不会解析数据对象值中的html标签
(2)v-html:它会替代显示对应的数据对象上的值。会解析数据对象值中的html标签。
(3)v-on:用于绑定事件
(4)v-show:通过判断自定义值为true或false进行隐藏显示,原理是修改元素 的display。
(5)v-if:通过判断自定义值为true或false进行隐藏显示,原理是创建和去除元素
(6)v-bind:绑定元素的属性,如src,title等,元素的属性在标签内部。
(7)v-for:用于迭代数组,渲染列表。
(8)v-model:常用于表单组件的绑定,例如input,select等。它与v-text的区别在于它实现表单组件的双向绑定。
4.vue结合axios以及后台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="Inquire">查询所有学生数据</button>
<table border="1" cellspacing="1" width="500">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>班级ID</th>
</tr>
<tr v-for="item in students">
<td>{{item.sid}}</td>
<td>{{item.sname}}</td>
<td>{{item.age}}</td>
<td>{{item.cid}}</td>
</tr>
</table>
</div>
</body>
<script>
let app = new Vue({
el:"#app",
data:{
students:[],
student:{}
},
methods:{
Inquire(){
axios.post("http://localhost:8080/findByField",this.student).then(result =>{
this.students = result.data.data
})
}
}
})
</script>
</html>
后端代码
@CrossOrigin //开启跨越请求
@RestController
@Api(tags = "学生操作API")
@CrossOrigin //开启跨域请求
public class StudentController {
@Autowired
private StudentService studentService;
@PostMapping("findByField")
@ApiOperation(value = "条件查询学生信息")
public Result findByField(@RequestBody Student student){
return studentService.findByField(student);
}
}