之前我们用MVC的思想实现功能，但是MVC只能实现模型到视图的单向展示，Vue基于MVVM（model-view-viewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
快速入门
新建HTML页面，引入vue.js文件
<script src="js/vue.js"></script>
创建vue对象，进行数据绑定
new Vue({
el:"#app",
data(){
return{
username:""
}
}
});
编写视图
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{username}}
</div>
vue常用指令
| 指令 | 作用 |
| v-bind | 为html标签绑定属性值，设置href，css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染元素，判定为true时渲染，否则不渲染 |
| v-else | |
| v-else-if | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind
<div id="app">
<a v-bind:href="url">绑定vue的url</a>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
url:"http://www.baidu.com"
}
}
});
</script>
<script src="js/vue.js"></script>
v-model
<div id="app">
<input v-model="url">
<a v-bind:href="url" >跳转输入页面</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
url:""
}
}
});
</script>
v-if、v-show
<div v-show="count==3">div4</div>
<div v-if="count==3">div1</div>
<div v-else-if="count==4">div2</div>
<div v-else="count==5">div3</div>
v-for
<div id="app">
<div v-for="city in arr">
{{city}}<br/>
</div></div>
<script>
new Vue({
el:"#app",
data(){
return{
arr:["杭州","武汉","九江"]
}
});
</script>
v-for也可以得到索引：
<div v-for="(city,index) in arr">{{city}}--{{index}}</div>
vue的生命周期（8个）
graph TD beforeCreate-->created created-->beforeMount beforeMount-->mounted mounted--挂载完成发送异步请求加载数据-->beforeUpdate beforeUpdate-->update update-->deforeDestory deforeDestory-->destoryed<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}
<input type="text" v-model="message" /><br />
<button @click="destoryVue()">摧毁</button>
<table></table>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "我是this.data.message",
userList: []
},methods:{
destoryVue(){
this.$destroy()
}
},
beforeCreate() {
console.log("我是实例化之前的vue，现在调用的是beforeCreate()");
// 实例化之前挂载对象都没有挂对象
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
created() {
console.log("我是实例化的vue，挂载对象el此时还没有完成，现在调用的是create()，主要用于数据初始化");
// 这里主要用于数据初始化，此时挂载对象还没有跟标签有任何关系
console.log(this)
console.log(this.$el);
console.log(this.$data);
},
beforeMount() {
console.log("此时模板已挂载完成，现在调用的是beforeMount()");
// 此时已经得到挂载对象el的根节点内容，但是还没有进行数据绑定
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
mounted() {
console.log("现在调用的是mounted()");
// 此时数据绑定已完成
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
beforeUpdate() {
console.log("现在调用的是beforeUpdate()");
// 修改之前会先调用这个函数再调用update（）
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
updated() {
console.log("现在调用的是updated()");
// 每次修改都会调用该函数
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
beforeDestroy() {
console.log("现在调用的是beforeDestroy()");
// 调用destroyed（）之前会自动调用该函数
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
destroyed() {
console.log("现在调用的是destroyed()");
// 摧毁之后，绑定会被摧毁
console.log(this)
console.log(this.$el);
console.log(this.$data)
}
})
</script>
</body>
</html>
查询数据库所有用户信息
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1px black" cellspacing="0px">
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>角色</th>
</tr>
<tr v-for="(user,index) in userList">
<td>{{user.id}}</td>
<td>{{user.userName}}</td>
<td>{{user.userPwd}}</td>
<td>{{user.role=="1"?"管理员":"用户"}}</td>
</tr>
</table>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
userList:[],
}
},
mounted() {
//注意这个this指的是vue
var thisVue=this;
//页面加载完成之后要查询数据，展示表格
axios.get("http://localhost:8088/axiosSelectServlet").then(function (resp) {
thisVue.userList = resp.data;
console.log(resp.data)
});
}
});
</script>
</body>
</html>
servlet：要注意相应字符的编码格式
@WebServlet(urlPatterns = "/axiosSelectServlet")
public class AxiosSelectServlet extends HttpServlet {
private UserService userService=new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("GBK");
response.setHeader("content-type", "text/html");
List<UserInfo> userInfos = userService.selectAll();
String string = JSON.toJSONString(userInfos);
response.getWriter().write(string);
}
}
新增用户信息：
前端页面：【这里有点懒，没有验证用户名是否重复】
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form action="" method="post">
用户名<input v-model="users.userName" id="username" name="username"/>
<span id="dupl" style="display: none;color: red;">用户名已存在</span><br/>
密码<input v-model="users.userPwd" name="password"/><br/>
角色:<input v-model="users.role" type="radio" name="role" value="0"/>用户
<input v-model="users.role" type="radio" name="role" value="1"/>管理员<br/>
<input id="sbmt" type="button" @click="sbm" value="注册"/>
</form>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
users:{
userName:"",
userPwd:"",
role:""
}
}
},methods:{
sbm(){
var user=this.users;
console.log(user.username)
axios.post("http://localhost:8088/axiosAddServlet",user).then(function (resp) {
if("success"==resp.data){
location.href="http://localhost:8088/vue-demo1.html"
}
})
}
}
});
</script>
</body>
</html>
servlet：
@WebServlet(urlPatterns = "/axiosAddServlet")
public class AxiosAddServlet extends HttpServlet {
private UserService userService = new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//因为注册提交方式为post，想得到参数需要获取请求体：
BufferedReader reader = request.getReader();
String s = reader.readLine();
System.out.println(s);
UserInfo userInfo = JSON.parseObject(s, UserInfo.class);
userService.add(userInfo);
response.getWriter().write("success");
}
}