day 68小结

js原型补充
vue项目生命周期(重点)
配置自定义全局样式
路由逻辑跳转(重点)
组件的生命周期钩子
路由配置
路由传参
- 第一种
- 第二种
总结:

js原型补充

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
<script>

    function A() {}

    let a1 = new A();
    let a2 = new A();

    // 为A类添加原型 => 类似于类属性
    A.prototype.num = 100;

    console.log(a1.num);
    console.log(a2.num);


    // ES6语法下类
    class B {
        constructor(name) {
            this.name = name;
        }
    }
    let b1 = new B('Tom');
    let b2 = new B('Ben');
    B.prototype.count = 666;
    console.log(b1.count);
    console.log(b2.count);

    console.log(b1.name);
    console.log(b2.name);

    // 推导
    Vue.prototype.$ajax = 12345;
    // this.$ajax

</script>
</html>

vue项目生命周期(重点)

1, 启动项目,加载主脚本文件 main.js
加载vue环境, 创建根组件完成渲染
加载系统已有的第三方环境: router,store
加载自定义的第三方环境与自己配置的环境: 后期项目不断添加

2, router被加载, 就会解析router文件夹下的index.js 脚本文件,完成路由-组件的映射关系

3, 新建视图组件 . vue(在views文件夹中) 在路由中配置(在router的index.js中), 设置路由跳转(在导航栏组件中Nav.vue)

配置自定义全局样式

配置全局样式: @就代表src文件夹的绝对路径, 官方提供require加载静态文件

// import '@/assets/css/global.css'
reuqire('@assets/css/global.css')

路由逻辑跳转(重点)

<script>
	export default {
        name:"Nav",
        methods: {
            goHome() {
                //console.log(this.$router); //控制路由跳转
                //console.log(this.$route);	//控制路由数据
                
                if (this.$route.path !=='/') {
                    //this.$router.push('/');	// 往下再跳转一页
                    //this.$rouoter.go(2);	//go是历史记录前进后退,正数是前进,负数是后退
                }
            }
        }
    }

</script>

组件的生命周期钩子

1, 一个组件从创建到销毁的众多时间节点回调的方法
2, 这些方法都是vue组件实例的成员
3, 生命周期钩子的作用就是满足在不同的时间节点做需要完成的事

<script>
    import Nav from '../components/Nav'
	export default {
        data() {
            return {}
        },
        methods: {}
        components: {
            Nav,
        },
        beforeCreate() {
       		console.log('Home组件要创建了')
    }
    	creaeted() { // 重要方法: 在该钩子中完成后台数据的请求
            console.log('Home组件创建成功了')
        }
    	beforeMount() {
            console.log('Home组件准备加载')
        }
    	mounted() { // 特别耗时的数据请求, 可以延后到组件初步加载成功后,再慢慢请求
            console.log('Home组件加载完成')
        }
    	destroyed() {
            console.log('Home组件要销毁了')
        }
</script>

路由配置

{
	path: '/course/detail',
	name: 'course-detail',
    component: CourseDetail
}
{
	path: '/detail',
    redirect: '/course/detail'
}
this.$router.push('/course/detail');  ==  this.$router.push('/detail');
this.$router.push('/course/detail?pk=1');  => this.$route.query.pk

```````````````````````````````````````````````````````````````````````
{
	path: '/course/detail/:pk',
	name: 'course-detail',
    component: CourseDetail
}
this.$router.push('/course/detail/10');  => this.$route.params.pk

路由传参

第一种

<!--vue文件中-->
<router-link :"`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>
<router-link :to="{
                  name: 'course-detail',
                  query: {pk: course.id}
                  }">{{ course.title }}
</router-link>

js路由配置

{
    path: '/course/detail',
    name: 'course-detail',
    component: CourseDetail
}

第二种

<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>