vue进阶--前端学习（2）

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}
        ]
    }
}

2. 编写方法

 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>