1.MVVM模式
MVVM是Model-View-View-Model的简写。他本质就是MVC的改进版。 Vue.js是一个提供了MVVM风格的双向数据绑定的javascript库，专注于View层。他的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View与Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
2.vue初体验
引入vue文件。
链接：https://pan.baidu.com/s/17D8tppn_c9fxt4-F_VF8UQ
提取码：xmr3
<body>
<div id="div1">
<!-- 将vue的视图的username绑定到div中，使用插值表达式{{username}} -->
<div>{{username}}</div>
</div>
<script>
// new Vue({json})
var vue = new Vue({
el: "#div1",//指定哪块区域可以使用vue
data: {
username: "哈利波特"
}//数据模型，要展示到视图上的数据
});
</script>
</body>
3.vue常用的事件
1.点击事件：v-on:click="函数()"
@click="函数()"
<body>
<div id="div1">
<!-- 将vue的视图的username绑定到div中，使用插值表达式{{username}} -->
<div>{{username}}</div>
<!-- 点击按钮改变内容 -->
<input type="button" value="change" @click="fn1()" />
</div>
<script>
// new Vue({json})
var vue = new Vue({
el: "#div1",//指定哪块区域可以使用vue
data: {
username: "哈利波特"
},//数据模型，要展示到视图上的数据
methods: {
fn1() {
// 改变div的值，只需要改变username即可
this.username = "醉了"
}
}
});
</script>
</body>
2.鼠标按下:mousedown
3.鼠标移入·：mouseover
3.v-text和v-html(重点)
v-text的区别就是会将所有内容以文本显示。包括标签。类似于js的innerText/Html
在这里插入代码片<body>
<div id="div1">
<div style="color: red;" v-html="username"></div>
</div>
<script>
var vue = new Vue({
el: "#div1",
data: {
username: "<h1>嗡嗡嗡</h1>"
},
});
</script>
</body>
4.vue绑定属性(重要)
1.v-bind
- vue绑定html标签的属性，使用v-bind进行绑定，绑定a标签的href属性。
v-bind:属性名=‘属性值’ 简写::属性名='数据模型’
<body>
<div id="t1">
<a v-bind:href="baidu">百度</a>
<!-- 携带的如果有id这样子写 -->
<a :href="tx+'?weijisheng=1'">腾讯</a>
</div>
<script>
new Vue({
el: "#t1",
data: {
baidu: "https://www.baidu.com",
tx: "https://www.tencent.com/zh-cn"
}
})
</script>
</body>
2.v-model
利用这个属性获取表单value，可用于数据回显
<body>
<div id="app">
<form>
用户名<input type="text" name="username" v-model="user.username"><br>
密码<input type="text" name="password" v-model="user.password"><br>
昵称<input type="text" name="nickname" v-model="user.nickname"><br>
地址<input type="text" name="address" v-model="user.address"><br>
<!--
1. 需求1: 点击获取表单数据的按钮的时候，将表单的所有数据获取到
-->
<input type="button" value="获取表单的数据" @click="obtainFormData()"><br>
<!--
2. 需求2: 点击回显表单数据，重新设置表单中的内容
-->
<input type="button" value="回显表单数据" @click="setFormData()">
</form>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
user: {
username: "张三",
password: "123456",
nickname: "大傻子",
address: "疯人院"
}
},
methods: {
//获取表单数据
obtainFormData() {
//其实就是获取数据模型user
console.log(this.user)
},
setFormData() {
//假设: 接收到了服务器端的响应数据
var responseData = {
username: "奥特曼",
password: "654321",
nickname: "和平",
address: "M78星云"
}
//目的：将表单的值设置为responseData里面的值
//只要将responseData的值设置给user就行了
this.user = responseData
}
}
});
</script>
</body>
5.v-for,v-if,v-show
1.v-for绑定城市列表循环和遍历后端传来的数据展示
<标签 v-for="(元素,索引) in 数组"></标签>
//1.元素的变量名随便取
//2.索引的变量名随便取
<标签 v-if="boolean类型的"></标签>
//1.v-if里面是true, 展示
//2.v-if里面是false, 不展示,标签都没有
<body>
<div id="a">
<!-- v-for遍历下拉列表 -->
<ul>
<li v-for="(Name,Index) in city" :id="Index" v-html="Name"></li>
<!-- 绑定id -->
</ul>
<!-- v-for遍历表格 -->
<table border="1" cellspacing="0" align="center" width="500">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr v-for="(user,index) in user">
<td v-html="index+1"></td>
<td v-html="user.name"></td>
<td v-html="user.age"></td>
<td v-html="user.address"></td>
</tr>
</table>
</div>
<script>
// 城市
var city = new Vue({
el: "#a",
data: {
city: ["北京", "上海", "广州", "深圳", "郑州"],
user: [
{
name: "小芳",
age: "18",
address: "河南"
},
{
name: "小明",
age: 17,
address: "云南"
},
]
}
})
</script>
</body>
2.v-if&v-show
<body>
<div id="lyf">
<img v-show="isShow" src="../vue/imgs/67d835f8a2c8223bf706941a505c9432.jpeg" /><br />
<input type="button" value="切换显示和隐藏" @click="toggleImg()">
</div>
<script>
new Vue({
el: "#lyf",
data: {
isShow: true
},
methods: {
toggleImg() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
6.axios的get与post提交方式
get方式都是通过地址栏上的name=value实现的
axios.get("first?username=&password=123&nickname=").then(response=>{
// //response就是http协议中的响应:包含行、头、体，我们要获取的是响应体的数据，其实就是response.data
// console.log(response.data)
// //处理响应数据，response就是服务器端的响应数据,将响应数据中的json赋值给user
// this.user = response.data
// }).catch(error=>{
// //处理请求失败,error就是服务器的异常信息
// console.log(error)
// })
//另外一种get请求携带参数的方式
/* axios.get("demo01",{
params:{
username:"",
password:"1234567",
nickname:""
}
}).then(response=>{
//response就是http协议中的响应:包含行、头、体，我们要获取的是响应体的数据，其实就是response.data
console.log(response.data)
//处理响应数据，response就是服务器端的响应数据,将响应数据中的json赋值给user
this.user = response.data
}).catch(error=>{
//处理请求失败,error就是服务器的异常信息
console.log(error)
})*/
post方式有一种是通过name=value，可在servlet中通过request.getParameter接收参数，而通过json传值的不能用这种方式接收参数。
1.第一种name=value
//post请求也可以在?后面携带参数
/* axios.post("first?username=&password=666666&nickname=").then(response=>{
this.user = response.data
})*/
2.第二种通过json方式
使用axios发送异步的post请求，并且携带json类型的参数(在请求体中)
axios.post("first",{username:"",password:"123456",nickname:""}).then(response=>{
this.user = response.data
})
在servlet中要想接收可以通过User user=JSON.parseObject(request.getInputStream(),User.class)，然后通过JSON.toJSONString(user), response.getWriter.write()回应数据 。可根据JsonUtils取代request.getInputStream()等，简化代码。
JsonUtils
import com.alibaba.fastjson.JSON;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class JsonUtils {
/**
* 响应结果
* @param response
* @param obj
* @throws IOException
*/
public static void printResult(HttpServletResponse response, Object obj) throws IOException {
response.setContentType("application/json;charset=utf-8");
JSON.writeJSONString(response.getWriter(),obj);
}
/**
* 把json转成对象
* @param request
* @param tClass
* @param <T>
* @return
* @throws IOException
*/
public static <T> T parseJSON2Object(HttpServletRequest request, Class<T> tClass) throws IOException{
// 把表单数据之间转对象
return JSON.parseObject(request.getInputStream(),tClass);
}
}