Vue:前端体系、前后端分离
1. 概述
2. 前端知识体系
2.1.前端三要素
2.2、结构层（HTML）
太简单，略
2.3、表现层（CSS）
什么是CSS预处理器
2.4、行为层（JavaScript）
JavaScript框架
UI框架
JavaScript构建工具
2.5、三端统一
混合开发（Hybrid App）
微信小程序
2.6、后端技术
2.7、主流前端框架
Vue.js
iView
ElementUI
ICE
VantUI
AtUI
CubeUI
Vue:写下Vue的第一个程序
Vue
MVVM模式的实现者
为什么要使用Vue.js
第一个Vue程序
下载地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
message:"hello,vue"
}
})
</script>
</body>
</html>
什么是MVVM
为什么要使用MVVM
MVVM的组成部分
View
Model
ViewModel
Vue语法
v-bind
上代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
message:"hello,vue"
}
})
</script>
</body>
</html>
v-if,v-else
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="ok">A</h1>
<h1 v-else>C</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
ok:true
}
})
</script>
</body>
</html>
v-else-if
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='D'">D</h1>
<h1 v-else>C</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
type:'A'
}
})
</script>
</body>
</html>
v-for
- v-for
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
items:[ {message:'ljh'},
{message:'ljh1'}]
}
});
</script>
</body>
</html>
v-on
上代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
message:"ljh"
},
methods:{
//方法必须定义在Vue的Methods对象中,v-on:事件
sayHi:function (events) {
alert(this.message)
}
}
});
</script>
</body>
</html>
Vue:表单双绑、组件
什么是双向数据绑定
为什么要实现数据的双向绑定
在表单中使用双向数据绑定
单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入的文本：<input type="text" v-model="message">{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model：数据
data:{
message:"ljh"
}
});
</script>
</body>
</html>
单选
下拉框
什么是组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--组件，传递给组件中的值:props-->
<ljh v-for="item in items" v-bind:l="item"></ljh>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//定义一个Vue组件component
Vue.component("my-component-li",{
props:['l'],
template:'<li>{{l}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["java","linux","前端"]
}
});
</script>
</body>
</html>
使用props属性传递参数
我们需要传递参数到组件的，此时就需要使用props属性，
注意：默认规则下props属性里的值不能为大写
Vue:Axios异步通信
什么是Axios
为什么要使用Axios
第一个Axios应用程序
咱们开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建一个名为data.json的文件并填入上面的内容，放在项目的根目录下
data.json
{
"name": "ljh",
"url": "https://www.sohu.com",
"page": 1,
"isNonProfit": true,
"address":{
"street":"金牛区",
"city":"四川成都",
"country":"中国"
},
"links":[
{
"name":"bilibili",
"url":"https://www.bilibili.com"
},
{
"name":"百度",
"url":"https://www.csdn.net"
},
{
"name":"微博",
"url":"https://weibo.com"
}
]
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">搜狐</a>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vue = new Vue({
el:"#vue",
//data:属性：vm
data(){
return{
//请求的返回参数格式，必须和json字符串一样
info:{
name:null,
address:{
street:null,
city:null,
country:null
},
url:null
}
}
},
mounted(){//钩子函数
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
Vue的生命周期
Vue:计算属性、内容分发、自定义事件
什么是计算属性
计算出来的结果，保存在属性中，内存运行：虚拟Dom
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>currentTime1{{currentTime1()}}</p>
<p>currentTime2{{currentTime2}}</p>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello,ljh"
},
methods:{
currentTime1:function () {
return Date.now();//返回一个时间数
}
},
computed:{//计算属性：method，computed方法名不能重名，重名之后，只会调用methods的方法
currentTime2:function () {
this.message;
return Date.now();//返回一个时间数
}
}
})
</script>
</body>
</html>
内容分发
测试
第一步：定义一个待办事项的组件
<div id="app">
<todo></todo>
</div>
<script>
Vue.component("todo",{
template:
'<div>\
<div>待办事项</div>\
<ul>\
<div>ljh的java</div>\
</ul>\
</div>'
});
</script>
第二步：我们需要让待办事项的标题和值实现动态绑定，怎么做呢？，我们可以留出一个插槽！
- 将上面的代码留出一个插槽，即slot
Vue.component("todo",{
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
- 定义一个名为todo-title的待办标题组件和todo-items的待办内容组件
Vue.component("todo-title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template: '<li>{{item}}</li>'
});
- 实例化Vue并初始化数据
var vm = new Vue({
el:"#app",
//Model：数据
data:{
title:"书籍列表",
todoItems:['ljh的java','ljh的Linux','ljh的前端']
}
});
- 将这些值，通过插槽插入
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
说明：我们的todo-titl和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中
上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("todo",{
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el:"#app",
//Model：数据
data:{
title:"书籍列表",
todoItems:['ljh的java','ljh的Linux','ljh的前端']
}
});
</script>
</body>
</html>
自定义事件
- 在vue的实例中，增加了methods对象并定义了一个名为removeTodoItems的方法
var vm = new Vue({
el:"#app",
//Model：数据
data:{
title:"书籍列表",
todoItems:['ljh的java','ljh的Linux','ljh的前端']
},
methods: {
removeItems:function (index) {
console.log("删除了"+this.todoItems[index]+"ok")
this.todoItems.splice(index,1);//一次删除一个元素
}
}
});
- 修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！
Vue.component("todo-items",{
props:['item','index'],
//只能绑定当前组件的方法
template: '<li>{{index}}----{{item}}<button @click="remove">删除</button></li>',
methods:{
remove:function (index) {
//
this.$emit('remove',index);
}
}
});
- 修改todo-items待办内容组件的HTML代码，增加一个自定义时间，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法中！
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
v-bind:index="index" v-on:remove="removeItems" :key="index">
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
v-bind:index="index" v-on:remove="removeItems" :key="index"></todo-items>
</todo>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("todo",{
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item','index'],
//只能绑定当前组件的方法
template: '<li>{{index}}----{{item}}<button @click="remove">删除</button></li>',
methods:{
remove:function (index) {
//
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:"#app",
//Model：数据
data:{
title:"书籍列表",
todoItems:['ljh的java','ljh的Linux','ljh的前端']
},
methods: {
removeItems:function (index) {
console.log("删除了"+this.todoItems[index]+"ok")
this.todoItems.splice(index,1);//一次删除一个元素
}
}
});
</script>
</body>
</html>
Vue入门小结
说明
Vue:第一个vue-cli项目
什么是vue-cli
需要的环境
第一个vue-cli程序
- 创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，
- 创建一个基于webpack模板的vue应用程序
#这里的myvue是项目名称，可以根据自己的需求起名
vue init webpack myvue
一路选择no即可
执行完成后，目录多了很多依赖
idea打开，也可以启动，
如果不生效，可以cmd管理员到路径下启动，
或者
然后重启idea
Vue:Webpack学习
什么是Webpack
模块化的演进
安装Webpack
配置
使用webpack
- 创建项目
- 创建一个名为modules的目录，用于放置JS模块等资源文件
- 在modules下创建模块文件，如hello.js,用于编写JS模块相关代码
//暴露一个方法
exports.sayHi = function () {
document.write("<h1>ljh谈ES6</h1>")
};
- 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
var hello = require("./hello");
hello.sayHi();
- 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports={
entry:'./modules/main.js',
output:{
filename:"./js/bundle.js"
}
}
- 在项目目录下创建HTML页面，如index.html,导入WebPack打包后的JS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js">
</script>
</body>
</html>
-
在IDEA控制台中直接执行webpack,如果失败的话，就使用管理员权限运行即可，webpack后就有bundle.js了
-
运行HTMl看结果
Vue:vue-router路由
说明
安装
测试
- 先删除设备没有用的东西
- components目录下存放我们自己编写的组件
- 定义一个Content.vue的组件
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
- 安装路由，在src目录下，新建一个文件夹：router，专门存放路由,index.js
import Vue from "vue"
import VueRouter from "vue-router"
import Content from "../components/Content"
import Main from "../components/Main"
//安装路径
Vue.use(VueRouter);
//配置导出路由
//对于export defalut 在是输出，在vue里面的用法是用来输出组件，相当于把接口暴露在外部，共所有文件用import来调用，而new vue（{}）是创建一个vue实例化，对组件进行数据操作
export default new VueRouter({
routes:[
{
//路由路径
path:'/content',
name:'content',
//跳转的组件
component:Content
},
{
//路由路径
path:'/main',
name:'main',
//跳转的组件
component:Main
}
]
})
- 在main.js中配置路由
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'//自动扫描里面的路由配置
Vue.config.productionTip = false
//显示声明使用VueRouter
Vue.use(VueRouter)
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
- 在App.vue中使用路由
<template>
<div id="app">
<h1>Vue-router</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!-- 路由匹配到的组件将显示在这里 -->
<!-- 主要是更新路由，可以不用跳转到一个新的页面，不会更新初始化函数mounted和created，只更新<router-view></router-view>标签下所渲染的组件。可以不用引入组件。-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
目录结构：
Vue:实战快速上手
创建工程
注意：命令行都要使用管理员模式运行
-
创建一个名为hello-vue的工程vue init webpack hello-vue
-
安装依赖，我们需要安装vue-router,element-ui、sass-loader和node-sass四个插件
-
Npm命令解释
创建登录页面
把没有用的初始化东西删掉；
在源码目录中创建如下结构：
创建首页视图，在views目录下创建一个名为Main.vue的视图组件；
<template>
<div>
首页
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
创建登录页面视图在views目录下创建一个名为Login.vue的视图组件，其中el-*的元素为ElementUI组件：
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible=false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return{
form:{
username:'',
password:''
},
//表单验证，需要在el-form-item元素中增加prop属性
rules:{
username:[
{required:true,message:'账号不可为空',trigger:'blur'}
],
password:[
{required:true,message:'密码不可为空',trigger:'blur'}
]
},
//对话框现实和隐藏
dialogVisible:false
}
},
methods:{
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});},
onSubmit(formName){
//为表单绑定验证功能
this.$refs[formName].validate((valid)=>{
if(valid){
//使用vue-router路由到指定页面，该方式称之为编程式导航
this.$router.push("/main");
}else{
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius:5px ;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title{
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
index.js,封装组件
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from "../views/Login";
Vue.use(Router);
export default new Router({
routes:[{
path:'/main',
component:Main
},{
path: '/login',
component: Login
}
]
});
app.vue初始页面
<template>
<div id="app">
<router-link to="/login">login</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
main.js引入router包和ElementUI
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(router);
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render: h => h(App)//ElementUI
})
路由嵌套
- 用户信息组件，在views/user目录下创建一个名为profile.vue的视图组件
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>
- 用户列表组件在views/user目录下创建一个名为List.vue的视图组件；
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
- 配置嵌套路由修改router目录下的index.js路由配置文件，代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from "../views/Login";
//用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
routes:[{
path:'/main',
name:'Main',
component:Main,
//配置嵌套路由
children:[
{path:'/user/profile',component:UserProfile},
{path:'/user/list',component:UserList}
]
},{
path: '/login',
name:'Login',
component: Login
}
]
});
说明：主要在路由配置中增加了children数组配置，用于在该组件下设置嵌套路由
- 修改首页视图，我们修改Main.vue视图组件，此处使用了ElementUI布局容器组件，代码如下：
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
</el-container>
<el-container>
<el-header style="text-align: right;font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header{
background-color: #83c0D1;
color: #333;
line-height: 60px;
}
.el-aside{
color: #333;
}
</style>
说明：
参数传递及重定向
<template>
<!--所有的元素，必须不能直接在根节点下-->
<div>
<h1>个人信息</h1>
{{$route.params.id}}
{{id}}
{{name}}
{{age}}
</div>
</template>
<script>
export default {
props:['id','name','age'],
name: "Profile"
}
</script>
<style scoped>
</style>
Main.vue
<el-menu-item index="1-1">
<!--name地址把 params传递参数-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
</el-menu-item>
重定向
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from "../views/Login";
//用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
routes:[{
path:'/main',
name:'Main',
component:Main,
//配置嵌套路由
children:[
//:id
{path:'/user/profile/:id',
name:UserProfile,
component:UserProfile,props:true},
{path:'/user/list',component:UserList}
]
},{
path: '/login',
name:'Login',
component: Login
},{
path: '/goHome',
//重定向
redirect: 'main'
}
]
});
404和路由钩子
路由模式与404
路由钩子与异步请求
在钩子函数中使用异步请求
- 安装Axios
cnpm install axios -s
- main.js 引用Axios
import axios from 'axios';
import VueAxios from 'vue-axios'
Vue.use(axios,VueAxios)
- 准备数据，data.json
- profile.vue执行方法数据
<template>
<!--所有的元素，必须不能直接在根节点下-->
<div>
<h1>个人信息</h1>
{{$route.params.id}}
{{id}}
{{name}}
{{age}}
</div>
</template>
<script>
export default {
props:['id','name','age'],
name: "UserProfile",
//过滤器 chain
beforeRouteEnter:(to, from, next) =>{
console.log("进入路由之前")
next(vm=>{
vm.getData();//进入路由之前执行getData
});
},
beforeRouteLeave:(to, from, next) => {
console.log("离开路由之前")
next();
},
methods:{
getData:function () {
this.axios({
method:'get',
url:"http://localhost:8080/static/mock/data.json"
}).then(function (response) {
console.log(response)
})
}
}
}
</script>
<style scoped>
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
