vue路由，组件， 指令总结

高鑫
今日内容：
    回顾Vue
    Django Rest Framework 4--5天
    路飞项目 5天
    Flask
    爬虫+数据分析
    Linux 一周
内容详细：
    MVC   Model View Controller    
    MVVM  Model View ViewModel  数据驱动视图
    ES6的常用语法
        -- 变量的提升
        -- 模板字符串 ``  ${}
        -- 数据解构
        -- 类
        -- 函数
            -- 注意this跟普通函数的区别
        -- 单体模式
    Vue的常用指令
        -- v-text  innerText
        -- v-Html  innerHtml
        -- v-for   :key
        -- v-if v-else-if v-else   appendChild
        -- v-show  display
        -- v-on    @xxxx="自己处理的方法"
        -- v-bind  :属性名称="属性的值"
        -- v-model  
            -- input
            -- textarea
            -- select
        -- 指令修饰符
            -- .lazy
            -- .number
            -- .trim
        -- 计算属性
            -- 放入缓存
            -- 只有数据改变的时候才会重新计算
        -- 数据的监听
            -- 注意可变数据类型跟不可变数据类型的区别
        -- 获取DOM
            -- 给标签绑定ref属性  ref = "属性值"
            -- this.$refs.属性值
        -- 自定义指令
            -- Vue.directive("指令名称", function(el, binding){
                    el 绑定指令的标签元素
                    binding 指令的所有信息
            })
    Vue的组件
        -- 组件注册
            -- 全局注册
                --Vue.component("组件名称"，{})
            -- 局部注册
                -- const app = new Vue({
                        el: "#app",
                        components: {
                            组件的名称： 组件的配置信息
                        }
                })
            -- 子组件的注册
                -- 在父组件中注册components
            ## 注意写组件标签
            ## 每个组件的template只识别一个作用域块
        -- 通信
            -- 父子的通信
                -- 在父组件中给子组件绑定属性
                -- 子组件通过props=["属性名称"]
            -- 子父的通信
                -- 子组件先提交事件
                    -- this.$emit("事件名称"，值)
                -- 在父组件中给子组件绑定事件
                    -- <child @事件名称="父亲处理的方法"></child>
            -- 非父子的通信
                    -- 声明中间调度器  
                    -- 其中一个组件向中间调度器提交事件
                    -- 另一个组件监听中间调度器的事件
                    -- 注意this的问题
        -- 插槽
            -- <slot><slot>
            -- 命名的插槽
        -- 混合
            -- 代码重用的
            -- Mixins=[base]
    路由
        -- 注册
            -- let url = [
                {
                    path: "/",
                    name: "home",
                    component: {
                        template: ``
                    }
                }
            ]
            -- let router = new VueRouter({
                    routes: url
            })
            -- const app = new Vue({
                    el: "#app",
                    router: router
            })
            -- <router-link to="/">首页</router-link>
            -- <router-view></router-view>
        -- 子路由
            -- children: [
                {}
            ]
            -- 在父路由对应的组件的template里写router-link router-view
            
        -- 命名路由
            -- name
            -- 注意to加冒号动态绑定
        -- 路由参数
            -- {
                path: "/course/:id",    
            }
            -- this.$route.params.id
            -- this.$route.query.xxx
            -- $route 是一个对象 存放当前路由的所有信息
            -- $router  VueRouter实例化对象
        -- 手动路由
            --this.$router.push("/")
            --this.$router.push({name: "xxx"})
        -- 重定向
            -- redirect：{name: "xxx"}
        -- 路由的钩子
            -- beforeEach
                -- to
                -- from
                -- next
            -- afterEach
                -- to
                -- from
                
    node.js / npm
        -- npm
        -- 管理工作目录
            -- npm init -y
        -- 下载包
            -- npm i xxxx@0.0.0
        -- 卸载
            -- npm uninstall xxxx
        -- 更新
            -- npm update xxxx
    webpack 
        -- 下载
            -- npm i webpack webpack-cli
        -- 打包默认的入口文件
            --src目录下的 index.js
        -- 出口文件
            -- dist目录的main.js
    vue-cli
        -- 帮助我们快速搭建项目的脚手架工具
        -- 下载
            -- npm i vue-cli
        -- 用vue-cli帮助我们创建项目
            -- vue init webpack xxxx
        -- 启动项目
            -- npm run dev