vue.js基礎總結
表示式：
- 使用前要先引入檔案vue.js；
- 要建立vue例項物件，工廠模式的應用el/element、data/object、metnods、computed、watch
- el作用的範圍：全域性vue例項；
- 差值表示式{{ }} 簡單資料型別simple data type（string、number、boolean）、複雜資料型別complex（array、object、function）；
常用指令：
- v-on、簡寫 @ ：事件繫結；
- v-bind 簡寫 ：屬性繫結；
- v-model ：雙向資料繫結（適用於input、select、textarea）；
- v-html：渲染html內容；
- v-text：純文字輸出；
- v-once：一次渲染，可以幫助提升頁面效能；
- vue中所包含的事件，大多數都與原生類似，任何事件都會傳遞一個物件，該物件時event，需要注意它的形參及實參實參可以是event/$event；
- 阻止預設事件 ：return false、event.preventDefault
- 阻止事件冒泡：event.stopPropagation();/event.cancleBubble = true;
- vue中事件的修飾符：stop、prevent、space、enter、del；
- vue在html中進行事件的繫結：1.程式碼清晰 2.無需手動繫結 3.物件刪除，方法自動銷燬；
- DOM：三目運算、變數顯示、方法呼叫、屬性計算、物件監控；
vue中的樣式：
- class：v-bind：class進行動態樣式繫結（可以繫結object-->鍵名是類名，鍵值是布林值，也可以繫結data設定）
- style：v-bind：style進行動態樣式繫結（駝峰式寫法 、json object -->js object）普通樣式“”引入，多樣式陣列處理
語法：
- v-if（templete模板應用，忽略templete標籤的應用）、v-else-if、v-else、v-show、v-for（1.陣列【元素、下標】2.物件 【鍵名、鍵值、下標】3.：key 作用-->唯一值/在虛擬DOM中能夠快速找到該物件/效能的提升）；
vue例項物件的生命週期（lifecycle）：
- beforeCreate/created-->beforeMount/mounted-->beforeUpdate/updated-->beforeDestroy/dastroyed;
vue元件化開發：
- 將data全域性化，並且設定為vue的data屬性，會發現全域性的data與this.$data相等；
- 可以設定ref（reference）本地參考物件，類似於id的操作；
- 先例項化一個vue物件，裡面設定templete內容這時候是沒有載入到dom上的，通過$mount實現物件的載入操 作，載入到指定元素上。
- 要實現程式碼的高度重用，需要考慮到temponent元件化開發，可以通過Vue.component實現全域性元件的註冊操 作，（注意：需要在vue例項化之前定義）。
vue的CLI（commond line interface 命令列介面）：
- 全域性安裝vue-cli命令： npm i vue-cli -g；
- 建立一個vue專案命令： vue init webpack-simple（要使用的vue templete） vueProjectName（專案名稱）
- 執行vue專案命令：npm run dev
- 打包檔案命令：npm run build
vue專案目錄結構：
- src：assert-->靜態資源目錄、Vue.app-->主元件、main.js-->入口檔案；
- .babelrc:語法轉換配置檔案（es6、7轉es5）；
- indel.html：主頁面；
- package.json：依賴配置檔案；
- webpack.config.js:webpack配置檔案（1.入口配置 2.出口設定 3.載入器使用【sass-loader、less-loader、vue-loader、
- css-loader、style-loader、file-loader、...】 4.外部外掛管理）；
vue元件關係：
父與子：1.父元件繫結屬性（String、Number、Array、Object、Function...）
2.子元件屬性接收（props進行接收 array/object）；
子與父：回撥模式-->1.父元件繫結函式 ；
2.子元件接收並觸發函式；
3.傳遞引數到父元件的函式中 ；
4.再由父元件進行data修改；
emit模式-->1.子元件中進行$emit資料發射；
2.父元件進行事件的監聽，並接收event事件物件的內容 ；
3.通過event事件物件內容修改data資料；
非父子：公交匯流排模式-->1.建立一個vue例項，並且該例項與原vue例項處於同級並列關係 ；
2.那麼所有元件與該例項就處於上下級關係 ；
3.在某元件中進行$emit事件發射，發射到bus匯流排的vue例項中去 ；
4.想要接收並操作資料的元件進行事件的監聽，並接收event事件物件；
vue中slot插槽：
- slot可以將標籤中的內容進行插槽式顯示；
- 也可以利用slot name的方式指定顯示slot的內容；
- 如果不給slot定義name，那麼就是預設的slot顯示；
- 也可以在子元件中定義slot的預設值，如果父元件有傳值，那麼就顯示傳遞值，否則就顯示slot預設值；
- component可以實現動態元件載入；繫結屬性是： is；
- 可以利用keep-alive將載入的元件保持狀態；
- 組建的鉤子函式新增 activated/deactivated；
vue動畫：
- css動畫：transition（transition、animation）、appear、type、mode（in-out、out-in）、animate.css（庫）、transition-group；
- js動畫：不是鉤子函式，而是事件繫結、el、done；
vue指令：
Vue.directive（directives）、指令的鉤子函式-->bind（el、binding、vnode、oldVnode）、inserted、bindUpdate、 updated、unbind；
vue過濾：
Vue.filter：
- 第一個引數是過濾的物件；
- 第二個引數才是函式中的第一個引數；
- 通過 | （管道符）進行連線；
- 可以多個過濾進行操作，但需要注意資料的型別；
filters-->mixins-->程式碼的混入操作；
vue中的http：
- fetch：1. get 2.post（headers；資料一般是字串，不是物件） 3.put 4.delete ；
- vue-axios： 1.原理：axios 2.利用vue對axios進行二次封裝 3.先安裝，再引入，後使用；
vue中的表單：
- v-model：v-bind+v-on ；
- textarea：style ，white-space：pre （換行）
- 自定義元件：v-model（子元件中接收props：['value'];；子元件向父元件中傳遞this.$emit('input',value)；）
vue中的路由：
- vue中路由設定流程：1.模組安裝 2.路由配置 3.入口檔案修改 4.路由模組引入 5.靜態路由表引入 6.例項化路由模組 7.例項 化vue物件並將路由物件引入進去 8.設定route-view進行佔位；
- 路由的啟用狀態：actice-class（當前啟用）、exact（確切的，準確跳轉、高亮） ；
- 路由的巢狀：childern ；
- 通過字串拼接可以實現route-link的跳轉；
- 通過路由中的name設定，也可以實現路由的跳轉；
- 類似於slot的name，在路由中可以將conponent轉成components，也就是多個路由模組的設定（router-view中就可以利用 name進行指定模組的顯示）；
- 重定向：-->redirect *是模糊重定向；
- 路由的動畫處理：transition；
- 路由的滾動行為：scrollBehavior 、和錨點是關係的；
- 路由的鉤子函式：
- 在元件中設定路由的鉤子函式 -->beforeRouteEnter/beforeRouteLeave;
- 在路由中設定路由的鉤子函式-->beforeEnter/beforeLeave 不要寫route，因為已經在route中；
- 在main.js中設定路由的鉤子函式-->router.beforeEach 全域性所有路由的監控；
路由的懶載入：
resolve、require、ensure、
將所有模組定義成整體模組進行模組的懶載入。