Vue进阶
一、Vue的生命周期
1)Vue的声明周期图
2)后端常用的两个周期
created :data 和 methods 中的 数据和方法的初始化
mounted:内存中的模板渲染的初始化
二、路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由需要载入 vue-router 库
1、引入js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
2、编写html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
3、编写js
<script>
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在,应用已经启动了!
</script>
三、axios
Axios为vue中放送ajax请求的方式
1)编写json代码
创建一个新的data.json的文件。
{
"sucess":true,
"code":20000,
"message":"成功",
"data":{
"items":[
{"name":"lucy","age":20},
{"name":"greety","age":10},
{"name":"maky","age":18}
]
}
}
- 编写方法
el: '#app',
data: {
studentList:[]
},
created(){
this.getList();
},
methods: {
getList(){
//进行get请求
axios.get("./data.json")
.then(response =>{
console.log(response)
this.studentList=response.data.data.items;
})
}
}
3)填充数据
<table>
<tr v-for="item in studentList">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>