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:"36cp是真的"
}
})
</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>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
</head>
<body>
<div class="wrap" id="app">
<button class="find" @click="findstudents">
查询学生信息
</button>
<table width="500" border="1">
<tr>
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
</tr>
<tr v-for="item in students">
<td>{{item.sid}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</body>
<script>
let app = new Vue({
el:"#app",
data:{
studentVo:{},
students:[],
},
methods:{
findstudents(){
axios.get("http://localhost:8080/student/select").then(result=>{
console.log(result)
this.students= result.data.data;
})
}
}
})
</script>
</html>
后端代码
@CrossOrigin //开启跨越请求
@RestController
@RequestMapping("student")
@Api(tags = "学生接口类")
@CrossOrigin //解决跨域问题
public class StudentController {
@Autowired
private StudentService studentService;
@Resource
private StudentMapper studentMapper;
@GetMapping("select")
public Result select(){
List<Student> student = studentMapper.selectList(null);
return new Result(200,"查询成功",student);
}
}