复习
"""
1、组件：
html、css、js的集合体
vue实例就代表组件
组件用template实例成员管理html结构，有且只有一个根标签
子组件可以复用，所以数据要组件化处理，data的值由方法的返回值提供
2、分类：
根组件：new Vue({})，顶级组件
全局组件: Vue.component('组件名', {})，不用注册可以在任何地方使用
局部组件：let 组件名 = {}，只有在注册的父组件中才能使用
3、组件间传参：
父传子：自定义属性
<tag :info="msg"></tag>
let tag = {
props: ['info'],
}
new Vue({
data: {msg: 12345}
components: {
tag,
}
})
子传父：自定义事件
<tag @action="fn"></tag>
let tag = {
data: {msg: 12345},
methods: {
tag_fn() {
this.$emit('action', this.msg)
}
}
}
new Vue({
components: {
tag,
},
methods: {
fn(info) {}
}
})
4、vue项目环境
官网下载安装node => 将npm换源为cnpm => cnpm install -g @vue/cli
=> vue项目创建...
"""
知识点总结
"""
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中的<router-view />占位符
注： i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
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）路由传参：两种传参
"""
