day 68小结

js原型补充

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')

路由逻辑跳转(重点)

组件的生命周期钩子

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

路由配置

{
    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

路由传参

第一种

{{ course.title }}
{{ course.title }}

js路由配置

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

第二种

{{ course.title }}

js路由配置

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

总结:

1、创建项目：vue create 项目名  -  babel、vue-router、vuex

2、项目目录：
    node_modules依赖(不同电脑依赖需要重新构建)
    views：页面组件
    components：小组件
    router/index.js：路由配置文件 - 路径与页面组件对应关系
    App.vue：根组件，固定五行话(看代码)
    main.js：项目总脚本文件 - 配置所有环境，加载根组件
    
3、vue请求生命周期：
    浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的占位符
    注： i) 可以用 用户页完成标签跳转
        ii) this.$router.push('/user')完成逻辑跳转
        
4、vue组件的生命周期钩子：组件 创建 到 销毁 中的时间节点回调的方法
    created(){}  |  mounted(){}
    
5、路由跳转
this.$router.push({name: '路由名', query: {拼接的参数}})
this.$router.go(number)

6、路由配置
{
    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


7、js类的原型：类属性

8、配置全局css样式
import '@/assets/css/global.css'
require('@/assets/css/global.css');


路由知识点概况：
    1）路由配置：router/index.js
    2）路由跳转与路由渲染：router-link、router-view、$router.push、$router.go
    3）路由传参：两种传参
"""