vue--学习（三）
一、组件之间的参数传递
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:"xxx@126.com",
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>
