vue進階二

最怕万一见温柔發表於2024-03-10
Vue

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:[]	
		}
	},
	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>

相關文章