Vue 进阶二

news2024/11/19 8:29:58

无知的我正在复盘Vue
该笔记特点是

重新整理了涉及资料的一些语言描述、排版而使用了自己的描述
对一些地方做了补充说明。比如解释专有名词、类比说明、对比说明、注意事项
提升了总结归纳性。尽可能在每个知识点上都使用一句话 || 关键词概括
更注重在实际上怎么应用
提出并回答了一些问题

下面的图片是我用思维导图总结的vue知识

文章目录

- Vue 进阶二
- - 一、Vue中的表单
  - - 1.v-model修饰符
    - 2.使用v-model绑定表单控件，v-model修饰符
  - 二、http请求--ajax
  - - 1. 什么是 Axios
    - 2.为什么要使用 Axios
    - 3.Axios的使用
    - - 1）安装vue axios
      - 2）在main.js中引入
      - 3）发送ajax请求
      - 4）服务端解决跨域问题
      - 5）解决axios无法传递data中的参数问题
  - 三、路由
  - - 1.安装路由模块
    - 2.设计路由界面
    - 3.创建静态路由表
    - 4.引入路由模块并使用
    - 5.路由初体验
    - 6.链接路由的实现
    - 7.参数的传递
    - 8.程序式路由的实现

一、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:[]	
		}
	},
	methods:{
		changeName:function(name){
			this.name = name
		}
	}
}
</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"
        allow-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'

this.axios({
	method:'post',
	url:'http://localhost:8081/regist',
	transformRequest: [function (data) {
		return Qs.stringify(data)
	}],
	data:{
		email:this.email
	}
})
.then(function (response) {
	alert(response.data.message)
});

三、路由

路由是第三方模块提供

1.安装路由模块

npm install vue-router -s

2.设计路由界面

创建components文件夹，文件夹内分别创建user、Home组件

user.vue

<template>
	<div>user</div>
</template>

Home.vue

<template>
	<div>Home</div>
</template>

3.创建静态路由表

在src下创建routes.js

import Home from '@/components/Home.vue'
import User from '@/components/user/user.vue'

export const routes = [
	{path:'/',component:Home},
	{path:'/user',component:User}
]

4.引入路由模块并使用

在main.js中引入路由模块并使用

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' //1.引入路由模块
import {routes} from './routes'	//2.引入静态路由表

Vue.use(VueRouter); //3.使用路由模块

//4.创建一个VueRouter模块的实例
const router = new VueRouter({
	routes:routes
});

new Vue({
  el: '#app',
  router,//5.把router实例放入到vue实例中
  render: h => h(App)
})

5.路由初体验

App.vue

<template>
  <div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-8">
				<h1>Routing</h1>
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

改变url，发现中的内容发生改变

http://localhost:8080/#/ 显示home
http://localhost:8080/#/user 显示user

向router实例中添加mode属性：

值"hash": url带# 适用于调试模式
值"history" url不带#

6.链接路由的实现

创建Header.vue

<template>
	<ul class="nav nav-pills">
		<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
		<router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>
	</ul>
</template>

修改App.vue

<template>
  <div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-8">
				<h1>Routing</h1>
				<Home></Home>
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>
<script>
	import Home from '@/components/Header.vue'
	export default{
		components:{"Home":Home}
	}
</script>

7.参数的传递

Header.vue传入参数

<template>
	<ul class="nav nav-pills">
		<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
		<router-link to="/user/10" tag="li" active-class="active"><a>User</a></router-link>
	</ul>
</template>

路由表：router.js

export const routes = [
	{path:'/',component:Home},
	{path:'/user/:id',component:User}
]

修改user.vue

<template>
	<div>
	<div>user</div>
	<p>userId:{{id}}</p>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				id:this.$route.params.id
			}
		}
	}
</script>

8.程序式路由的实现

在user.vue中加入回到首页按钮

<template>
	<div>
		<div>user</div>
		<p>userId:{{id}}</p>
		<button type="button" @click="goHome" class="btn btn-default btn-block">回到首页</button>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				id:this.$route.params.id
			}
		},
		methods:{
			goHome(){
				this.$router.push({path:'/'})
			}
		}
	}
</script>