上午
组件 小巧 独立 可复用
组件系统
组件组织关系
1. 父子组件关系
<A>
<B></B>
<C></C>
</A>
2. 兄弟组件关系
<B></B>
<C></C>
组件之间的通信
1. 父组件访问子组件 （父组件修改子组件）
a. props 必须动态props 父组件修改自身的变量 把变化的值传入 子组件 子组件接收动态props
b. refs
c. 事件中央总线
d. vuex (最后一天)
2. 子组件访问父组件
a. 自定义事件 emit 子组件发送事件 on 父组件监听事件 修改内部变量
b. $parent 父实例，如果当前实例有的话 父组件
c. 逆向props 父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数 实现子改父
d. 事件中央总线
e. vuex
3. 兄弟组件之间的通信
事件中央总线 新建空的 vue 实例对象 $emit $on
event $emit $on 事件机制 监听和 发送事件 实现数据修改
中间人模式 父组件当做中间人
vuex 实现任何组件的通信
动态组件：
component 官方组件
is 属性 表示当前显示的组件
keep-alive 失活的组件将会被缓存！ 下一次失活组件重新激活的时候 会直接调用缓存 性能优化
transition 过渡组件
组件切换
1. v-if
2. v-show
3. component
4. 路由 route
slot 插槽
Vue 实现了一套内容分发的 API 将 <slot> 元素作为承载分发内容的出口
插槽 slot 专门接受 从父组件传递来的 html模板 内容分发
父组件给子组件传递数据 props
父组件 想给子组件 传递 模板(html标签) 用 slot 来接受 内容分发
slot 父组件可以把模板标签 动态分发子组件 子组件放到指定的位置区域 (slot 插槽)
具名插槽 slot 精准投放 定位 name="a"
template v-slot="a"
以后封装组件 props 80% slot 20%
refs this.$refs
6. 绑定到标签 指的当前的真实DOM
7. 绑定到组件 指的是当前的组件对象 直接修改组件内的变量 直接调用组件内部的函数
下午
node 路由 根据不同的url接口 返回对应的不同的数据或者页面
Vue 路由 router 根据不同的url路径 pathname 匹配路由里面的path 匹配成功就加载对应的组件(component)
Vue Router 是 Vue.js 官方的路由管理器。
它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
路由作用 实现构建单页面应用 index.html 其他页面 组件形式加载
single-page-appliaction (SPA)
将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
a. 掌握 配置最基本的路由 流程
b. 路由传递参数 动态路由
c. 嵌套路由
Vue 路由是用来实现单页面应用的
routes 会根据不同的path 去映射不同的 组件 , 然后渲染组件到 router-view
动态路由 == 路由参数传递 (动态路径参数)
动态路由匹配 2中 ?id=1903 :(冒号)
a. ?id=1903 问号拼接的参数 表示查询参数 (search ?id=1903 ) (query id=1903)
b. : 冒号声明
/users/:uid /users/1001 /users/1002 $route.params.uid
/users/:uname? /users/ming /users/55k $route.params.uname
? 表示这个是一个未知的参数 三目 表面这个参数可传可不传
$route 路由对象属性
$route.query 个 key/value 对象，表示 URL 查询参数 (?)
$route.params 一个 key/value 对象 获取路由参数 (:)
$route.name 当前路由的名称
$route.path 对应当前路由的路径，总是解析为绝对路径
$route.hash 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径
name 命名路由
通过一个名称来标识一个路由
:to="{name:'users',params:{uid:1002}}"
匹配优先级
同一个路径可以匹配多个路由 匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高
路由重定向 url 一定改变
www.baidu.com ==> www.zuozhaoxi.xom
{
path:"*", redirect:{
name:"404"}}
路由别名 第二个名称 缺点 没有高亮
path = '/admin'
alias = '/administrator'
路由跳转
1. 声明式 html跳转 router-link to
2. 编程式 javascript 跳转 函数代码跳转 this.$router router
router.push('home')
router.push({
path: 'home' })
router.push({
name: 'user', params: {
userId: '123' }})
router.push({
path: 'register', query: {
plan: 'private' }})
router == this.$router 路由实例对象 进行路由跳转 还可以监听路由切换
$route == this.$route 路由对象属性 (params query name)
router.go(1)
router.goforward(); 前进
router.go(-1); 后退
router.back()
路由嵌套