Vue第六天

商品列表案例

my-tag

核心业务

1、显示隐藏切换---v-if  v-else

2、显示自动获取焦点

$nextTick 自定义指令 v-foucs

3、回显，回车修改数据

v-model和组件绑定

:value --- props:{ value:String }

@input --- this.$emit('input', XXX)

my-table

1、数据不能写死

父传子，传数组

内部动态渲染

2、结构不能写死

具名插槽+作用域插槽

两个不能写死{表头th   每行单元格td}

生命周期

概念：vue从创建到销毁的过程

三大阶段

1、初始化阶段
    准备数据，确认视图，准备模板，渲染结构

2、渲染阶段
    数据修改了，视图随之更新

3、销毁阶段
    组件销毁 v-if="false" / 切换路由

八大钩子

创建的create

1、beforeCreate
    数据和响应式初始化之前

2、created
    数据初始化完成之后
    可以发送ajax请求，获取后台数据，更新数据了

挂载的mount

1、beforeMount
    页面el元素挂载之前执行

2、mounted
    页面元素挂载之后
    可以开始操作dom了
        this.$refs.xxx

更新的update

1、beforeUpdate

2、updated

销毁的destroy

1、beforeDestroy

2、destroyed
    释放一些与vue无关的资源
    定时器，延时器，服务器资源...

路由

单页应用

概念：在一个页面中显示多个不同页面功能的应用

优点：页面切换不需要重新加载 用户体验好 开发效率高 页面传参方便

缺点：初次加载较慢 需要开发成本（学习路由）

路由概念：

组件和路径的映射关系

组件类型

    复用组件：用来复用、渲染页面（放在components文件夹中）
    页面组件：用来展示页面（放在views文件夹中）

vue-router是什么

    是一个vue官方的路由插件
    目录划分
        views
            页面组件
        components
            复用组件

vue-router的使用步骤（5+2）
    5基础
        1. 下载
            3.5.3
        2. 引入
        3. 使用 use
            通过vue.use(VueRouter)将插件添加到vue实例上
        4. 初始化路由对象(配置路由映射)
        5. 创建实例
            将初始化的路由对象添加到VueRouter实例上，获得一个Router实例
        6. 挂载注入
            将Router挂载到vue实例上
    2核心
        1. 配置规则
        2. 指定出口 router-view

路由模块拆分
    main.js中不要有太多的逻辑

声明式导航/导航链接
    语法：
        router-link
        1. 解析成 a 标签
        2. 通过to属性，配路径
            不加#
        3. 自带高亮的类名
            router-link-active
                模糊
            router-link-exact-active
                精确
            类名可以自定义 link...