此篇檔案僅僅作為筆記分享,不用於其他用途!!! 

看了許多關於vue的書籍和學習材料之類的,稍微做個總結吧

官網裡說的是Vue 是漸進式框架的:

漸進式含義：沒有多做職責之外的事。

• 你可以在原有大系統的上面，把一兩個元件改用它實現，當jQuery用；

• 也可以整個用它全家桶開發，當Angular用；

• 還可以用它的檢視，搭配你自己設計的整個下層用。

• 你可以在底層資料邏輯的地方用OO和設計模式的那套理念，

• 也可以函式式，都可以，它只是個輕量檢視而已，只做了最核心的東西。

vue.js只提供了 vue-cli 生態中最核心的 元件系統

像vuex、vue-router都屬於圍繞 vue.js開發的庫。

比如說，你要使用Angular，必須接受以下東西：

• 必須使用它的模組機制
• 必須使用它的依賴注入-
• 必須使用它的特殊形式定義元件（這一點每個檢視框架都有，難以避免）

所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西整合，這些主張會帶來一些困擾。

比如說，你要使用React，你必須理解：

• 函數語言程式設計的理念，
• 需要知道什麼是副作用，
• 什麼是純函式，
• 如何隔離副作用
• 它的侵入性看似沒有Angular那麼強，主要因為它是軟性侵入。

vue.js的兩個核心

1、資料驅動，也叫雙向資料繫結。

Vue.js資料觀測原理在技術實現上，利用的是ES5Object.defineProperty和儲存器屬性: getter和setter（所以只相容IE9及以上版本），可稱為基於依賴收集的觀測機制。核心是VM，即ViewModel，保證資料和檢視的一致性。

2、元件系統。

.vue元件的核心選項:

1、模板（template）：模板聲明瞭資料和最終展現給使用者的DOM之間的對映關係。 2、初始資料（data）：一個元件的初始資料狀態。對於可複用的元件來說，這通常是私有的狀態。 3、接受的外部引數(props)：元件之間通過引數來進行資料的傳遞和共享。 4、方法（methods）：對資料的改動操作一般都在元件的方法內進行。 5、生命週期鉤子函式（lifecycle hooks）：一個元件會觸發多個生命週期鉤子函式，最新2.0版本對於生命週期函式名稱改動很大。 6、私有資源（assets）：Vue.js當中將使用者自定義的指令、過濾器、元件等統稱為資源。一個元件可以宣告自己的私有資源。私有資源只有該元件和它的子元件可以呼叫。 等等。

vue幾種常用的指令

• v-if：根據表示式的值的真假條件渲染元素。在切換時元素及它的資料繫結 / 元件被銷燬並重建。
• v-show：根據表示式之真假值，切換元素的 display CSS 屬性。
• v-for：迴圈指令，基於一個數組或者物件渲染一個列表，vue 2.0以上必須需配合 key值 使用。
• v-bind：動態地繫結一個或多個特性，或一個元件 prop 到表示式。
• v-on：用於監聽指定元素的DOM事件，比如點選事件。繫結事件監聽器。
• v-model：實現表單輸入和應用狀態之間的雙向繫結
• v-pre：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
• v-once：只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。

v-if 和 v-show 的區別

共同點：

v-if 和 v-show 都是動態顯示DOM元素。

區別：

1、編譯過程： v-if 是 真正 的 條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性display。

2、編譯條件： v-if 是惰性的：如果在初始渲染時條件為假，則什麼也不做。直到條件第一次變為真時，才會開始渲染條件塊。v-show不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

3、效能消耗： v-if有更高的切換消耗。v-show有更高的初始渲染消耗。

4、應用場景： v-if適合執行時條件很少改變時使用。v-show適合頻繁切換。

vue常用的修飾符

v-on (簡寫為@)指令常用修飾符：

• .stop - 呼叫 event.stopPropagation()，禁止事件冒泡。
• .prevent - 呼叫 event.preventDefault()，阻止事件預設行為。
• .capture - 新增事件偵聽器時使用 capture 模式。
• .self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
• .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
• .native - 監聽元件根元素的原生事件。
• .once - 只觸發一次回撥。
• .left - (2.2.0) 只當點選滑鼠左鍵時觸發。
• .right - (2.2.0) 只當點選滑鼠右鍵時觸發。
• .middle - (2.2.0) 只當點選滑鼠中鍵時觸發。
• .passive - (2.3.0) 以 { passive: true } 模式新增偵聽器

注意： 如果是在自己封裝的元件或者是使用一些第三方的UI庫時，會發現並不起效果，這時就需要用`·.native修飾符了，如：

//使用示例：
<el-input
  v-model="inputName"
  placeholder="搜尋你的檔案"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

v-bind (簡寫為:)指令常用修飾符：

• .prop - 被用於繫結 DOM 屬性 (property)。(差別在哪裡？)
• .camel - (2.1.0+) 將 kebab-case 特性名轉換為 camelCase. (從 2.1.0 開始支援)
• .sync (2.3.0+) 語法糖，會擴充套件成一個更新父元件繫結值的 v-on 偵聽器。

v-model 指令常用修飾符：

• .lazy - 取代 input 監聽 change 事件
• .number - 輸入字串轉為數字
• .trim - 輸入首尾空格過濾

//使用示例：
<el-input
  v-model.trim="inputName"
  placeholder="搜尋你的檔案"
  :size="config.xxxx"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

 v-on的使用

v-on可以監聽多個方法，例如：

<input type="text" :value="name" @change="onChange" @focus="onFocus" @blur="onBlur" />

但是同一種事件型別的方法，只會響應第一個，例如：

<button @click="methodsOne" @click="methodsTwo"></button>

只會響應methodsOne方法。

vue中 key 值的作用

key值：用於 管理可複用的元素。因為Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做使 Vue 變得非常快，但是這樣也不總是符合實際需求。

2.2.0+ 的版本里，當在元件中使用 v-for 時，key 現在是必須的。

例如，如果你允許使用者在不同的登入方式之間切換：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那麼在上面的程式碼中切換loginType將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素，</input>不會被替換掉，僅僅是替換了它的 placeholder`。

這樣也不總是符合實際需求，所以Vue為你提供了一種方式來表達這兩個元素是完全獨立的，不要複用它們。只需新增一個具有唯一值的 key 屬性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

現在，每次切換時，輸入框都將被重新渲染。

vue-cli進行工程升級 

前言：此命令謹慎使用，實際開發中如需升級建議直接使用 vue-cli 腳手架搭建，只需要瞭解即可！否則盲目升級可能會造成許多不必要的麻煩,比如webpack3和webpack4的特性及配置不同.所以謹慎使用!!!!!!!

推薦使用：

//升級外掛
npm-check-updates

首先安裝外掛，建議用 npm 源安裝，測試時用 cnpm 安裝未下載成功：

npm install npm-check-updates -g

然後在待升級工程的目錄結構下，命令列輸入：

ncu

執行效果圖：

然後升級所有版本，命令列輸入：

ncu -a

再輸入：

npm install