vue--學習（三）
阿新 • • 發佈：2021-07-21
一、元件之間的引數傳遞
1.父傳子
父元件把引數傳遞給子元件
子元件
content
<template> <div id="app"> 歡迎你！{{name}},來自於{{address}} <br/> </div> </template> <script> export default{ data：function(){ return { name:"xiaoming" } }, props:["address"] } </script> <style> </style>
Props: 宣告用於接收其他元件傳遞來的引數的屬性名
props裡可以是陣列，數組裡可以是物件
父元件
app.vue
<template> <div id="app"> <Header></Header> <Content :address="message"></Content> <Bottom></Bottom> </div> </template> <script> export default { name: 'app', data :function() { return { message:"杭州" } } } </script> <style> </style>
父元件中通過：
<Content :address="message"></Content>
向子元件傳遞引數
2.子父互傳
3.改進版的子父傳參
子元件
<template> <div id="app"> 歡迎你！{{name}},來自於{{address}} <br/> <button type="button" @click="btnfn('北京')">點我</button> </div> </template> <script> export default{ data(){ return { name:"xiaoming" } }, // props:["address"] props:{ "address":{ type:String, required:true, default:"中國" }, // "btnfn":{ //btnfn引數是一個方法 // type:Function // } }, methods:{ btnfn(add){ this.$emit('newName',add);//子元件向上發射引數 } } } </script> <style> </style>
子元件通過：
this.$emit('newName',add);
向上發射引數，父元件可以收到這個引數的鍵值對。
父元件
<template>
<div id="app">
<Header></Header>
<!-- <Content :address="message" :btnfn="myFn"></Content> -->
<Content :address="message" @newName="message=$event"></Content>
<Bottom></Bottom>
</div>
</template>
<script>
export default {
name: 'app',
data :function() {
return {
message:"杭州"
}
},
mounted:function(){
//當元件完成頁面上的繫結以後會被呼叫
this.message="上海"
},
methods:{
myFn(add){
this.message=add;
}
}
}
</script>
<style>
</style>
父元件收到引數後賦值給message
二、Vue中的Axios請求
vue只注重檢視層，所以與後端互動的ajax,作者認為是不重要的。後面是需要的，於是vue之後推出了支援ajax模組，但是vue的該模組沒有第三方Axios做的後，於是在2.0版本Vue就官方支援大家使用Axios實現Ajax請求。
1.註冊頁面
<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 />
{{gender}}
<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}}
<br/>
<button type="button" class="btn btn-primary" @click="regist()">註冊</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
mail:"[email protected]",
password:"",
gender:"",
hobby:[]
}
},
methods:{
regist:function(name){
//把資料傳送給後端，通過ajax請求，但是vue沒有ajax，通過axios
}
}
}
</script>
2.專案中使用axios獲得前端提交的註冊的資料
- 建資料庫表
- 建立後端專案
- 生成entity mapper 介面
- 建立controller介面
- 使用Swagger2
- 前端傳送axios訪問後端
3.Axios的使用
1）安裝Axios
cnpm install --save axios vue-axios
在main.js中加入
import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)
2）在頁面中使用axios請求
<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="name" /><br />
<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="男" />男
<input type="radio" name="gender" v-model="gender" value="女" />女<br />
{{gender}}
<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}}
<br/>
<button type="button" class="btn btn-primary" @click="regist()">註冊</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
name:"",
password:"",
gender:"",
hobby:[]
}
},
methods:{
regist:function(name){
var hobby_str;
var hob = this.hobby;
//把陣列變成字串
for(var i=0;i<hob.size;i++){
if(i>0){
hobby_str += ',';
}
hobby_str += hob[i];
}
//把資料傳送給後端，通過ajax請求，但是vue沒有ajax
var vm = this;//把當前vue物件賦值給vm
this.axios({
method:'post',
url:'http://localhost:8090/user/regist',
data:{
"name":vm.name,
"password":vm.password,
"gender":vm.gender,
"hobby":hobby_str
}
}).then(function(response){
if(response.data.code==1000){
alert(response.data.message)
}
});
}
}
}
</script>
3）axios的使用總結：
axios({
method: 'post', //請求方式
url: '/user/12345', //請求的地址
data: { //攜帶的引數
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) { //返回的資料
console.log(response);
})
.catch(function(error){
console.log(error);
});
{
"data": {
"code": 1000,
"message": "註冊成功",
"data": 1
},
"status": 200,
"statusText": "",
"headers": {
"content-type": "application/json"
},
"config": {
"url": "http://localhost:8090/user/regist",
"method": "post",
"data": "{\"name\":\"xiaoli\",\"password\":\"123\",\"gender\":\"女\"}",
"headers": {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json;charset=utf-8"
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1
},
"request": {}
}
三、路由
1.路由的介紹
路由器中的“路由”，是用來選擇一條可行的路徑，在vue中路由實際上就是頁面的切換——跳轉。
實際上，在vue中的跳轉，是設定一個router-view控制元件，讓不同的vue元件在該router-view中進行展示。——vue中路由實現的邏輯
2.路由的安裝
npm install vue-router -s
3.設計路由介面： Home.vue User.vue
4.建立路由表(在src下建立routes.js)
import Home from "./components/router/Home.vue";
import User from "./components/router/User.vue";
//建立一個路由表常量
export const routes = [
{
path:'/home', //設定路徑
component:Home
},
{
path:'/user',
component:User
}
]
5.在main.js中註冊路由表
import Vue from 'vue';
import App from './App.vue';
import Header from "./components/header.vue";
import Content from "./components/content.vue";
import Bottom from "./components/bottom.vue";
import axios from 'axios';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router' //1.引入路由模組
import {routes} from './routes' //2.引入靜態路由表
Vue.use(VueRouter); //3.使用路由模組
Vue.use(VueAxios, axios)
Vue.component("Header",Header);
Vue.component("Content",Content);
Vue.component("Bottom",Bottom);
//4.建立一個VueRouter模組的例項
const router = new VueRouter({
routes:routes
});
new Vue({
el: '#app',
router,//5.把router例項放入到vue例項中
render: h => h(App)
})
6.通過router-link和router-view來實現路由(App.vue)
<template>
<div id="app">
<div>
<span>
<router-link to="/home">首頁</router-link>
</span>
<span>
<router-link to="/user">使用者管理頁</router-link>
</span>
</div>
<router-view></router-view>
</div>
</template>
<script>
// import Register from './components/register.vue';
export default {
name: 'app',
data :function() {
return {
}
}
}
</script>
<style>
</style>
7.路由時的引數傳遞
- 在路由表中配置路由的引數——設參
{
path:'/user/:id', //配置了路由引數id
component:User
}
- 在User元件中接收引數——接參
<template>
<div>User
使用者的基本資訊：
<p>
{{id}}
</p>
<p>
{{name}}
</p>
<p>
{{age}}
</p>
<p>
{{gender}}
</p>
</div>
</template>
<script>
export default{
data(){
return {
id:this.$route.params.id, //接收引數
name:"",
age:0,
gender:""
}
},
mounted(){
//去通過axios請求，帶著id去查詢該使用者的資訊
// this.axios({
// methods:'get',
// url:'/',
// })
}
}
</script>
<style>
</style>
- 在App.vue中傳參-傳參
<template>
<div id="app">
<div>
<span>
<router-link to="/home">首頁</router-link>
</span>
<span>
<!--通過/user/10來傳參10-->
<router-link to="/user/10">使用者管理頁</router-link>
</span>
</div>
<router-view></router-view>
</div>
</template>
<script>
//import Register from './components/register.vue';
export default {
name: 'app',
data :function() {
return {
}
}
}
</script>
<style>
</style>
8.通過js程式碼實現路由跳轉
通過js程式碼，而非通過router-link實現路由跳轉
this.$router.push("/home");//通過js實現路由跳轉
需要在User.vue中加入下面的程式碼
<template>
<div>User
使用者的基本資訊：
<p>
{{id}}
</p>
<p>
{{name}}
</p>
<p>
{{age}}
</p>
<p>
{{gender}}
</p>
<button type="button" @click="goHome">回到首頁</button>
</div>
</template>
<script>
export default{
data(){
return {
id:this.$route.params.id,
name:"",
age:0,
gender:""
}
},
mounted(){
//去通過axios請求，帶著id去查詢該使用者的資訊
// this.axios({
// methods:'get',
// url:'/',
// })
},
methods:{
goHome(){
this.$router.push("/home"); //通過js實現路由跳轉
}
}
}
</script>
<style>
</style>
四、mock假資料的用法
前端在開發的時候，已經有介面文件了，那麼就可以直接通過mock假資料的方式讓前端的專案跑通，而不需要等後端介面開發完成。
mock返回的資料形式
{
"data": {
"code": 1000,
"message": "註冊成功",
"data": 1
},
"status": 200,
"statusText": "",
"headers": {
"content-type": "application/json"
},
"config": {
"url": "http://localhost:8090/user/regist",
"method": "post",
"data": "{\"name\":\"xiaoli\",\"password\":\"123\",\"gender\":\"女\"}",
"headers": {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json;charset=utf-8"
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1
},
"request": {}
}
通過頁面直接請求mock獲取模擬後端資料(mouted鉤子函式中)
<template>
<div>User<br/>
使用者的基本資訊：
<p>{{id}}</p>
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{gender}}</p>
<button type="button" @click="goHome()">回到首頁</button>
</div>
</template>
<script>
export default{
data(){
return{
id:this.$route.params.id,//接收引數
name:"",
age:0,
gender:""
}
},
mounted(){
var vm =this;
//去通過axios請求，帶著id去查詢該使用者的資訊
this.axios({
methods:'get',
url:'https://www.fastmock.site/mock/38a087f24b20a74e67c93b0af2c8ec56/user/info/10',
}).then(function(response){
vm.name = response.data.name;
vm.age = response.data.age;
vm.gender = response.data.gender;
});
},
methods:{
goHome(){
this.$router.push("/home");//通過js實現路由跳轉
}
}
}
</script>
<style>
</style>
五、使用Webpack骨架建立專案
1.安裝webpack專案
vue init webpack 專案名稱
2.使用element ui 元件開發
官網地址：https://element.eleme.cn/
- 安裝element ui
npm i element-ui -S
3.建立各種頁面
Login.vue
<template>
<div class="login-box">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<h3 class="login-title">歡迎登入</h3>
<el-form-item label="使用者名稱" prop="name">
<el-input v-model="form.name" placeholder="請輸入使用者名稱" ></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input type="password" v-model="form.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="onSubmit('form')">登入</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
name: '',
password: ''
},
rules: {
name: [
{ required: true, message: '請輸入姓名', trigger: 'blur' },
{ min: 3, max: 12, message: '長度在 3 到 12 個字元', trigger: 'blur' }
],
password: [
{ required: true, message: '請輸入密碼', trigger: 'blur' },
{ min: 3, max: 12, message: '長度在 3 到 12 個字元', trigger: 'blur' }
]
}
}
},
methods:{
onSubmit(formName){
this.$refs[formName].validate((valid) => {
var vm = this;
if (valid) {
this.axios({
method:'post',
url:'https://www.fastmock.site/mock/70c016eea76630f57b1c6b118ebf6023/user/login',
data:{
"name":vm.name,
"password":vm.password
}
}).then(function(response){
console.log(response);
var data = response.data;
if(data.code==1000){
//跳轉
vm.$message({
message: data.message,
type: 'success'
});
//做一個定時器
setTimeout(function(){
//跳轉
vm.$router.push("/main");
},2000)
}else{
vm.$message.error('使用者名稱或密碼錯誤');
}
}).catch(function(error){
vm.$message.error('當前網路不可用，請檢查你的網路！');
})
} else {
vm.$message.error('請按要求填入資訊');
}
});
}
}
}
</script>
<style scoped>
.login-box{
width: 500px;
height: 300px;
border: 1px solid #DCDFE6;
margin: 150px auto;
padding: 20px 50px 20px 30px;
border-radius: 20px;
box-shadow: 0px 0px 20px #DCDFE6;
}
.login-title{
text-align: center;
margin-bottom: 40px;
}
</style>
Main.vue
<template>
<div>
首頁
</div>
</template>
<script>
export default{
name:"Main"
}
</script>
<style>
</style>
4.在路由表中註冊新的元件
建立路由表 router / index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from "../views/Login"
import Main from '../views/Main'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/login',
name:'Login',
component:Login
},
{
path:'/main',
name:'Main',
component:Main
}
]
})
配置路由main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
// 匯入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 安裝路由
Vue.use(VueRouter);
// 安裝 ElementUI
Vue.use(ElementUI);
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//啟用路由
router,
components: { App },
template: '<App/>',
// 啟用 ElementUI
render: h => h(App)
})
修改 App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>