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 [email protected](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
        -- [email protected]
    -- 借助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