vue-element ui 学习笔记-04

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