Vue學習筆記和代碼記錄

## 安裝

* 直接引入連接：建議初學者使用；
* 經過node.js的NPM安裝Vue；
* 經過node.js的NPM安裝Vue-cli腳手架（推薦安裝方式）；

## 基礎

### 數據類型

* 字符串：title: 'hello world'；
* 數字：num:123；
* 數組：arrow: ['apple', 'banana','orange']；
* 對象：name: {firstName:'ming',lastName:'Li'}；
* 布爾值：true/false；

### 模版數據綁定

* {{ xxx }}：模版解析；
* v-text：文本綁定；
* v-model：數據雙向綁定；v-model.lazy：延遲對數據進行更新；
- v-model.number：對輸入的數據字符串轉爲數字；
- v-model.trim：對數據進行裁剪，去除空格等

### 表單數據綁定

- checkbox：儲存的數據類型是數組；
- radio：儲存的數據類型是字符串；
- select：存儲的數據類型是字符串；

### 標籤屬性

* v-bind：標籤屬性綁定，屬於動態綁定，能夠簡寫爲：。綁定後的屬性爲變量，能夠是字符串，數組或者是對象；
* v-if/v-if-else-if/v-else：條件渲染，若是成立則執行，不成立則註銷；
* v-show：一樣是條件渲染，不一樣的是不成立是隱藏而不是註銷；

### 事件綁定

* 經過v-on:event="eventName"進行綁定，可簡寫爲@:event="eventName";方法經過在methods裏進行方法定義；
* 在v-on:event.midiflyer添加修改器；
* 自定義事件：v-on:diyEvent="eventName"，經過$emit來觸發自定義事件。`methods: {my-function () {this.$emit('diyEvent'), 參數}}`；

### 計算屬性和數據監聽
* 傳值屬性：props: ['xx','xx']。父子組件若是須要傳值，必需要在props裏進行定義；
* 事件屬性：methods: {}。全部事件都在這裏進行定義；不少狀況下在執行事件時須要取消默認事件。function(e){e.preventDefault();}；
* 計算屬性：computed: {方法 () { return 方法 }}；計算屬性的優勢：能夠直接根據data的屬性動態的更改（data中myValue的值變化會同步反映到計算屬性裏）（計算屬性會緩存所依賴的那個值，直到那個值發生變化，不然不會從新取值）與方法調用的缺點：調用方法的時候纔會更新，即便data中myValue的值沒有變化，調用時依然會去從新取值。使用場景：在耗時、大量搜索的狀況下使用，減小dom重複渲染的性能支出。
* 建立屬性：created:function(){}。方法不須要手動調用，直接執行。
* 數據監聽：watch: { 方法 () {}}；

### 應用
#### 動態綁定class
* v-bind:class="{red:true}"；
* v-bind:class={changeClass:changeClass}；
* v-bind:class={active ? true : false}

## 組件

### 命名

* 不強制要求按照W3C規則進行命名，但最好遵循。例如：`my-template`;
* 無論組件是大駝峯仍是小駝峯，在模版引用的時候一概要轉爲中橫線的命名方式。例如：組件爲`comName`，引用時爲：`<com-name></com-name>`；在傳遞屬性時名稱也一樣。

### 註冊

* 全局註冊：`Vue.component('my-template', {template: '...'});` html：`<my-template></my-template>`
* 局部註冊：只在使用的場景進行註冊。`var myTemplate = {template: '...'}; new Vue({..., components: {'my-template: myTemplate'}})`

### 模版解析

* 特殊標籤下的模版須要注意，好比table、ol、ul、select等標籤，使用`is`進行掛載。例如:`<table><tr is="my-tr"></tr></table>`;
* 推薦使用字符串模版：
+ `<script type="text/x-template">`；
+ javascript內聯模版字符串；
+ vue組件；

* 組件中的data必須是函數。

### 組件組合

* 父組件經過prop進行向下傳遞；
* 子組件經過事件進行發送信息，子組件觸發事件，父組件進行監聽；
* 傳值時要主要命名的選擇和使用，使用props使用的駝峯式明顯須要轉變爲對應的中橫線式。`Vue.component('my-template', {props: ['myMessage'],template: '...'}); <my-template my-message="hello"></my-template>`
* 字面量語法和動態語法；
* slot插槽：父組件向子組件插入template模板，父子之間經過slot屬性和name屬性進行對應`<p slot="header">我是header</p><span slot="footer">我是footer</span>`；
* 動態組件：利用 `:is = ""` 進行組件的動態綁定，外層能夠用內置組件keep-alive 來進行緩存；

### 總結

* 使用組件樹設計項目，配置文件連接各個組件-命名轉換，動態組件；
* 父組件向內傳遞屬性-動態屬性；
* 子組件向外發佈事件；
* slot插槽傳遞模版 - 具名slot；

## 高級用法

### 動畫：使用transition 內置組件，有css過渡和js過渡兩種方式。

#### css過渡實現原理：給動畫的不一樣階段加上不一樣的class名稱。

* 四個階段：v-enter/v-enter-active/v-leave/v-leave-active；使用：`<transition name="fade"></transition>` .fade-enter/.fade-enter-active/.fade-leave/.fade-leave-active；
* 可以接受動畫的元素有：v-show/v-if/動態組件加載；
* 經過mode="out-in"/"in-out"實現動畫順序；
* 對於多元素模版，若是使用的是同標籤名，須要使用key來進行區分；

#### js過渡實現原理：經過定義不一樣的方法來實現動畫。

不一樣方法名：

`
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
...
</transition>
`
### 自定義指令

* 方法：主要有兩種：局部定義和全局定義。
* 使用：inserted和bind是指令的兩個配置屬性，屬性值是一個函數，因此用es6語法。講inserted函數，，而後而後回到組件，處理el表示使用了指令的元素對象，還有一個binding對象，其中binding.value表示的是使用了指令元素的指令的值，能夠是json，而後借這個json（裏面放着css相關信息）所包含的數據來修改dom的樣式。

### 插件

* vue-resource： 發送http請求
* vue-router： 前端路由
* 引入步驟：
+ 入口js文件 import from 插件
+ Vue.use(插件) 不過在模塊環境中應當始終顯式調用 Vue.use() :

## 相關概念

* MVC
* MVP
* MVVM

## 相關知識點

* Node.js
* NPM
* Mustache
* ECMAscript
* Javascript
* Ajax

## Vue全家桶

* vue.js
* vue-cli
* vue-router
* vue-axios
* vue-lazyload

## 打包工具

* Webpack
* Gulp
* Parcel

## 安裝依賴

* Css-loader
* Sass-loader
* Vue-style-loader
* Superagent

 

## 踩坑

* 在開發過程當中，若是修改了配置文件，須要從新啓動，不然報錯；
* 手寫輸入的拼寫錯誤問題，通常會提示出來；
* 樣式文件中的拼寫錯誤，包括屬性、值、圖片名稱，若是找不到也會報錯，通常很難找到，因此出現報錯的時候必定先要解決！！
* 使用webpack要進行loader依賴的安裝；
* proxyTable 反向代理設置；
* 在組件中template節點下必須只有一個子節點；
* 若是採用webpack進行打包管理，若是數據中有須要在js裏引用圖片地址，須要使用`require()`的方式進行引用，不然不會被打包到靜態文件目錄裏；
* 在組件使用時候先進行數據綁定；
* 在使用屬性的時候必定記得要添加做用域，好比this；
* 在組件或者模版中使用sass或less文件，必定要在style標籤上聲明lang，不然報錯沒商量；
* 在組件開發過程當中，若是須要傳參必定記得定義而且在引用的地方調用；

## 參考資料* [Vue官網](https://cn.vuejs.org/v2/guide/)