📒 博客首頁：?﹏??敬坤的博客 🎈
😊 我只是一個代碼的搬運工 🎃
🎉 歡迎來訪的讀者關注、點贊和收藏 🤞
😉 有問題可以私信交流 😆
📃 文章標題：結合同事做的筆記，總結了一份入門到進階的詳細教程 🖍

Vue從入門到進階思維導圖

基礎篇

環境搭建

1.安裝npm【下載地址】

2.安裝vue腳手架 npm install --global vue-cli

3.創建專案 vue create 專案名

4.運行專案 進入專案根目錄 npm run serve

指令

1. v-if：根據運算式的值的 truthiness 來有條件地渲染元素，在切換時元素及它的資料系結 / 組件被銷毀并重建，如果元素是 ，將提出它的內容作為條件塊，
2. v-else：前一兄弟元素必須有 v-if 或 v-else-if

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

3. v-for：基于源資料多次渲染元素或模板塊，此指令之值，必須使用特定語法 alias in expression，為當前遍歷的元素提供別名

<div v-for="item in items">
  {{ item.text }}
</div>

4. v-on：系結事件監聽器，事件型別由引數指定，運算式可以是一個方法的名字或一個行內陳述句，如果沒有修飾符也可以省略

<button v-on:click="doThis"></button>

5. v-text：更新元素的 msg，如果要更新部分的 msg，需要使用 {{ msg}} 插值

<span v-text="msg"></span>

6. v-bind：動態地系結一個或多個 attribute，或一個組件 prop 到運算式

<img v-bind:src="imageSrc">

7. v-slot：提供具名插槽或需要接收 prop 的插槽

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>
</base-layout>

8. v-pre：跳過這個元素和它的子元素的編譯程序，可以用來顯示原始 Mustache 標簽，跳過大量沒有指令的節點會加快編譯

<span v-pre>span標簽</span>

9. v-cloak：這個指令保持在元素上直到關聯實體結束編譯，和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實體準備完畢

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ msg}}
</div>

10. v-once：只渲染元素和組件一次，隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過，這可以用于優化更新性能

<span v-once>This will never change: {{msg}}</span>

class和style系結

1. class系結

.F-size-12{
	font-size:12px;
}
<!-- 定義方式一 -->
<span :class="{'F-size-12':true}">This will never change: {{msg}}</span>
<!-- 定義方式二 -->
<span :class="[true?'F-size-12':'']">This will never change: {{msg}}</span>

2. style系結

<span :style="{'color':'red'}">This will never change: {{msg}}</span>

內置組件

1. component：渲染一個“元組件”為動態組件，依 is 的值，來決定哪個組件被渲染

<!-- 動態組件由 vm 實體的 `componentId` property 控制 -->
<component :is="componentId"></component>

2. transition： 元素作為單個元素/組件的過渡效果， 只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出現在可被檢查的組件層級中

<!-- 簡單元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

3. keep-alive： 包裹動態組件時，會快取不活動的組件實體，而不是銷毀它們，和 相似， 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

常見的幾種事件

1. click：被單擊時執行

<div @click="getClick">點擊</div>

2. touchstart：當按下或者點下時執行

<div @touchstart="onTouchstart">點下</div>

3. touchmove：當按下之后移動時執行

<div @touchmove="onTouchmove">移動</div>

4. touchend：當按下之后松開時執行

<div @touchend="onTouchend">松開</div>

事件修飾符

1. .stop：阻止單擊事件繼續傳播

<a v-on:click.stop="doThis"></a>

2. .prevent：提交事件不再多載頁面

<form v-on:submit.prevent="onSubmit"></form>

3. .capture：添加事件監聽器時使用事件捕獲模式，即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理

<div v-on:click.capture="doThis">...</div>

4. .self：只當在 event.target 是當前元素自身時觸發處理函式，即事件不是從內部元素觸發的

<div v-on:click.self="doThat">...</div>

5. .once：點擊事件將只會觸發一次

<a v-on:click.once="doThis"></a>

6. .passive：滾動事件的默認行為 (即滾動行為) 將會立即觸發，而不會等待 onScroll 完成，這其中包含 event.preventDefault() 的情況

<div v-on:scroll.passive="onScroll">...</div>

特殊的attribute

1. key：key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes，如果不使用 key，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試就地修改/復用相同型別元素的演算法，而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素
   有相同父元素的子元素必須有獨特的 key，重復的 key 會造成渲染錯誤

<ul>
  <li v-for="item in items" :key="item.id">{{item}}</li>
</ul>

2. ref：ref 被用來給元素或子組件注冊參考資訊，參考資訊將會注冊在父組件的 $refs 物件上，如果在普通的 DOM 元素上使用，參考指向的就是 DOM 元素；如果用在子組件上，參考就指向組件實體：

<p ref="p">hello</p>

3. slot：用于標記往哪個具名插槽中插入子組件內容（廢棄）

4. scope：用于表示一個作為帶作用域的插槽的 元素，它在 2.5.0+ 中被 slot-scope 替代（移除）

5. is：用于動態組件且基于 DOM 內模板的限制來作業

<table>
  <tr is="my-row"></tr>
</table>

常見的實體方法

1. vm. o n ： 監 聽 當 前 實 例 上 的 自 定 義 事 件 ， 事 件 可 以 由 v m . on：監聽當前實體上的自定義事件，事件可以由 vm. on：監聽當前實例上的自定義事件，事件可以由vm.emit 觸發，回呼函式會接收所有傳入事件觸發函式的額外引數

vm.$on('test', function (msg) {
  console.log(msg)
})

2. vm.$once：監聽一個自定義事件，但是只觸發一次，一旦觸發之后，監聽器就會被移除

vm.$once('test', function (msg) {
  console.log(msg)
})

3. vm.$emit：觸發當前實體上的事件，附加引數都會傳給監聽器回呼

vm.$emit('test', 'hi')

4. vm.$forceUpdate：迫使 Vue 實體重新渲染，注意它僅僅影響實體本身和插入插槽內容的子組件，而不是所有子組件，

5. vm.$nextTick：將回呼延遲到下次 DOM 更新回圈之后執行，在修改資料之后立即使用它，然后等待 DOM 更新，它跟全域方法 Vue.nextTick 一樣，不同的是回呼的 this 自動系結到呼叫它的實體上，

this.$nextTick(function () {
   // DOM 現在更新了
   // `this` 系結到當前實體
   this.doSomethingElse()
})

過濾器

filters：包含 Vue 實體可用過濾器的哈希表

// 注冊
Vue.filter('my-filter', function (value) {
  // 回傳處理后的值
})

// getter，回傳已注冊的過濾器
var myFilter = Vue.filter('my-filter')

進階篇

uniapp框架

nuxt框架

nuxt框架官網

vue-element-admin

vue-element-admin框架官網鏈接