Vue进阶二
一、Vue中的表单
1.v-model修饰符
创建表单,并通过v-model绑定data中的属性
<template>
<div id="app">
<div style="width:50%" class="container">
<div>
<h3>Regist</h3>
<h5>Email</h5>
<input type="text" class="form-control" v-model.trim="mail" /><br/>
{
{mail}}
<h5>Password</h5>
<input type="password" class="form-control" v-model.lazy="password" /><br/>
{
{password}}
<h5>Gender</h5>
<input type="radio" name="gender" v-model="gender" value="female" />男
<input type="radio" name="gender" v-model="gender" value="male" />女<br/>
<h5>Hobby</h5>
<input type="checkbox" name="hobby" v-model="hobby" value="music" />音乐
<input type="checkbox" name="hobby" v-model="hobby" value="movie" />电影
<input type="checkbox" name="hobby" v-model="hobby" value="sport" />运动
{
{hobby}}
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
mail:"xxx@126.com",
password:"",
gender:"",
hobby:[]
}
}
}
</script>
2.使用v-model绑定表单控件,v-model修饰符
- lazy:失去焦点时才会绑定内容
- trim:绑定的内容自动去除开头和结尾的所有的空格,字符串内部的空格不去除。
二、http请求 -- ajax
1.什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架,它的主要作用就是实现AJAX异步通信,其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
- GitHub: https://github.com/axios/axios
2.为什么要使用Axios
由于Vue.js是一个视图层框架并且作者(尤雨溪)严格遵守Soc(关注度分离原则),所以Vue.js并不包含AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架
3.Axios的使用
1) 安装vue axios
npm install --save axios vue-axios
2) 在main.js中引入
在项目中使用axios模块
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3) 发生ajax请求
this.axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
data:{}
})
.then(function(response){
console.log(response.data)
})
4) 服务端解决跨域问题
<mvc:cors>
<mvc:mapping path="/**"
allowed-origins="*"
allowed-methods="POST, GET, OPTIONS, DELETE, PUT, PATCH"
allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
allowed-credentials="true" />
</mvc:cors>
在spring-mvc.xml中加入上述这一段。其中,allowed-origins指的是允许的访问源的域名,"*"表示任何人都可以访问,也可以指明具体的域名
5) 解决axios无法传递data中的参数问题
原因:默认情况下发送axios时请求头中的内容类型为:
Content-Type:application/json;charset=UTF-8
而实际服务端需要的是:
Content-Type:application/x-www-form-urlencoded
因此,使用axios中的qs内置库中的方法进行内容类型的转换。
import Qs from 'qs'
thi