Vue全知识脉络梳理

少年不识愁滋味，爱上层楼。爱上层楼。为赋新词强说愁。
而今识尽愁滋味，欲说还休。欲说还休。却道天凉好个秋。

一、ES6常用语法
    -- 变量定义
    -- 模板字符串
    -- 类
    -- 函数
    -- 数据的解构
二、vue的常用指令
    -- v-text
    -- v-html
    -- v-for 
    -- v-if
    -- v-show 
    -- v-on
    -- v-model
    -- v-bind
    -- 自定义指令
    -- 计算属性
    -- 获取DOM
    -- 指令修饰符
三、组件
    -- 注册
        -- 全局 局部 子组件
    -- 通信
        -- 父子 子父 非父子
    -- 混合
        -- mixins
    -- 插槽
        -- slot
四、路由
    -- 注册
        -- let routes= [{}.{}]
        -- 把routes注册到VueRouter对象中
        -- 把VueRouter对象注册到Vue实例对象中
        -- router-link
        -- router-view
    -- 路由的参数
        -- params， query
    -- 命名路由
        -- name
    -- 命名路由视图
    -- 子路由
    -- 手动路由
    -- 钩子函数
    -- $route  $router 区别
五、生命周期
    -- 监听
        -- 字符串
        -- 数组 
            -- 改变数组里的值是监听不到的
            -- app.$set(app.xxx, index, value)
        -- 对象
            -- app.$set(app.xxx, key, value)
            -- watch ==> deep: true
    -- beforeCreate
    -- created
    -- beforeMount
    -- mounted
    -- beforeUpdate
    -- updated
    -- beforeDestroy
    -- destroyed
六、npm 包管理工具 node.js
    -- npm install xxx@0.0.0(latest) pm i
    -- npm uninstall xxx
    -- npm i npm@latest -g
    -- npm update xxx
    -- 项目管理
        -- 切换到工作目录下
        -- npm init -y
七、webpack 打包上线
    -- 入口文件
    -- 出口文件
    -- webpack 4
        -- webpack 不独立存在
        -- npm i webpack webpack-cli
        -- 手动创建src目录
            -- index.js 默认入口文件
        -- 打包后自动生成 dist目录
            -- 放出口文件
        -- webpack mode development/p...
八、vue-cli 
    -- 下载vue-cli
        -- npm install vue-cli -g
        -- vue-cli@2.9.7
    -- 借助vue-cli帮助我们创建项目
        -- vue init webpack xxxx
            -- cd xxxx
            -- npm run dev
    -- npm run dev
        -- 没有node_moudels文件夹
            -- 切换到项目目录下
            -- npm install
            -- npm run build
            -- npm run dev

        -- xxxxx ... json .....
            -- npm cache clean --force
            -- 执行接下来的操作
        -- 没有package.json
            -- 没有切换到项目目录下

九、vuex 天花板
    -- 下载
        -- npm i vuex
    -- 导入vuex
        -- import vuex from "vuex"
        -- Vue.use(vuex)
    --  new vuex.Store({
            state: {
              show: false,
            }
        });
        -- Store 仓库
        -- state放数据的
    -- state 存放数据的
        -- this.$store.state.xxx
    -- getters 给state数据进行处理
        -- this.$store.getters.xxxx
    -- mutations 修改state中的数据
        -- 组件提交给仓库事件 （打报告）
            -- this.$store.commit("事件名称", data)
        -- mutations: {
            "事件名称": function(state, data){
                    state.xxx = data
            }
        }
十、ajax 和 axios 发送请求
        -- $.ajax({
            url: ''',
            type: xxxx,
            ....,
            success: function(){},
            error: function(){}
        })  
    -- url 接口
    -- axios
        -- this.$axios.request({
            url: "接口"，
            method: "get",
            data: 
        }).then(function(data){})
        .catch(function(data){})




十一、MVC MTV模式
        -- Model View Control
        -- Model Template View
        -- 解耦 
    -- 前端
        -- 静态页面 模板工程师
        -- 动态页面  js出现了
        -- ajax技术  局部刷新
        -- 前端借鉴后端MVC思想 MVVM前端框架思想
        -- MVVM
            -- Model View ViewModel
            -- 数据驱动视图
    -- 前后端分离
        -- 移动端
            -- app 
                -- 前端 后端
            -- pc
                -- 前端 后端
        -- 前端一套 后端一套  前后端分离
        -- 前端vue 
        -- 后端Python  django