Vue.js 官方文檔-學習小記（抄錄-基礎篇）

時間 2019-11-18

標籤 vue.js vue 官方文檔學習抄錄基礎欄目 JavaScript 简体版

原文原文鏈接

介紹

原文引自 Vue 官方教程：https://cn.vuejs.org/v2/guide/javascript

Vue.js 是什麼？

Vue.js 是一套構建用戶界面的漸進式框架。採用的是自底向上增量開發的設計（與其餘重量級框架不一樣點）。Vue的核心庫只關注圖層，不只易於上手，還便於與第三方庫或既有項目整合。html

起步

# helloword

注意：不能將id = ‘app’寫在body或者html中

<script src = './vue.js'><script>
<div id = 'app>
    <p> {{ message }} </p>
</div>
<script>
var app = new Vue({
    el: '#app',
    message: 'helloword!!!'
})
<script>

如今的數據和DOM已經綁定在一塊兒了,全部的元素都是響應式
文本插值:從控制檯輸入app.message = '新信息' ,能夠修改DOM相應的更新
元素屬性:經過v-bind綁定例如v-bind:title="哈哈哈"vue

條件循環
v-if (文本到數據) 提供了一個強大的過渡效果系統,能夠在Vue插入/刪除/更新時自動應用過渡系統
v-for (結構到數據)java

處理用戶輸入
v-on 指令綁定一個事件監聽器,經過它調用咱們Vue實例中定義的方法
- v-on:click = "Add"
v-model 實現表單輸入和應用狀態之間的雙向綁定api

實例中的參數
el: 'id' //el就是 vue 程序的解析入口
data: { 數據 } //data就是ViewModel
methods: { 函數 } //函數中的this指向該應用中data的數據

computed: { 聲明一個計算屬性函數 }

例子

computed: {
// a computed getter
reversedMessage: function () {
  // `this` points to the vm instance
  return this.message.split('').reverse().join('')
}
}

filters: { 過濾器函數 }數組

組件化應用構建

在Vue裏,一個組件本質上是一個擁有預約義選項的一個Vue實例緩存

Vue實例

構造器
每一個 Vue.js應用都是經過構造函數Vue建立的一個Vue的根實例啓動的

var vm = new Vue({
    //選項
    })

沒有徹底遵循MVVM模式
能夠擴展Vue構造器,從而用預約義選項建立可複用的組件構造器
全部的 Vue.js 組件其實都是被擴展的 Vue 實例app

屬性和方法
每一個Vue實例都會代理其data對象裏全部的屬性
除了data屬性外，Vue實例還會暴露了一些有用的實例屬性和方法，都帶前綴$，以便與代理的data屬性區分
不要在實例屬性和回調函數中箭頭函數，由於箭頭函數綁定父上下文，this不會像預想的同樣是Vue實例框架

實例生命週期
Vue.js 是否有「控制器」的概念？答案是，沒有。dom

語法模板
在底層的實現上，Vue將模板編譯成虛擬DOM渲染函數。結合響應系統，在應用狀態發生改變時，Vue可以智能地計算出從新渲染組件的最小代價並應用到DOM操做上。
也能夠不用模板，直接寫渲染（render）函數，使用可選的JSX語法

插值

# 文本
數據綁定最多見的形式就是使用「Mustache」（雙大括號）的文本插值
使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新

# 純HTML
雙大括號會將數據解析成純文本，而非HTML。爲了輸出真正的HTML，須要使用v-html指令
注意：你的站點上動態渲染的任意 HTML 可能會很是危險，由於它很容易致使 XSS 攻擊。請只對可信內容使用 HTML 插值，毫不要對用戶提供的內容插值。

# 屬性
Mustache不能在HTML屬性中使用，應使用v-bind指令
對id，布爾值的屬性有效

# 使用Javascript表達式
例子
- {{ number + 1 }}
- {{ ok ? 'YES' : 'NO' }}
- {{ message.split('').reverse().join('') }}
表達式會在所屬 Vue 實例的數據做用域下做爲 JavaScript 被解析。有個限制就是，每一個綁定都只能包含單個表達式。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

注意：模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不該該在模板表達式中試圖訪問用戶定義的全局變量。

指令

是帶有v-前綴的特殊屬性

# 參數
一個指令能接受一個參數，在指令後面以冒號指明

# 修飾符
修飾符（Modifiers）是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()

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

過濾器

Vue.js容許自定義過濾器，可被用做一些常見的文本格式化，用在兩個地方：mustache插值和v-bind表達式

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

過濾器函數
- 能夠串聯
- 能夠接受參數
  
  # 縮寫
v-on

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

v-bind

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

計算屬性

# 基礎例子

# 計算緩存 vs methods

計算屬性:是基於它們依賴進行緩存的(因依賴改變而從新求值);Date.now()不是響應式依賴
methods:只要發生從新渲染, method調用總會調用執行該函數

# Computed屬性 vs Watched 屬性
Watched 屬性: 觀察和響應Vue實例上的數據變更
缺點:命令式和重複式。更多選擇 computed 屬性

# 計算 setter
計算屬性默認只有getter，根據需求也能夠提供一個setter

觀察 Watchers

Class 與 Style 綁定

綁定 HTML Class

# 對象語法
v-bind:class={ 鍵：值 }；能夠與普通的class屬性共存
也能夠綁定數據裏的一個對象 v-bind:class=「classObject」
也能夠綁定一個計算屬性

# 數組語法

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

# 用在組件上

綁定內聯樣式

# 對象語法

v-bind:style 的對象語法十分直觀，看着很是像CSS，本質是一個 JavaScript 對象，屬性名能夠用駝峯式或者短橫分隔命名
直接綁定到一個樣式對象

# 數組語法

<div v-bind:style="[baseStyles, overridingStyles]">

# Vue會自動判斷並添加前綴

當 v-bind:style 使用須要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。

條件渲染

v-if

# 中 v-if 條件組
v-if 是一個指令，只能添加到一個元素上，若是像切換到多個元素，須要

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

# v-else 指令來表示 v-if 的「else塊」

v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面——不然它將不會被識別。

# v-else-if 指令充當 v-if 的「else-if塊」
相似於 v-else,，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素以後。

# 用 key 管理可複用的元素
高效渲染元素，對複用已有元素不受從頭渲染。
還有別的好處，見官網

v-show
v-show 是簡單地切換元素地 CSS 屬性 display。
注意：不支持

v-if vs v-show
v-if 是真正地條件渲染(條件塊內的全部適當地被銷燬和重建)；同時也是惰性地；更高地切換開銷
v-show：無論初始條件是什麼，元素始終會被渲染；更高地初始渲染開銷

v-if 與 v-for 一塊兒使用
v-for 具備比 v-if 更高地優先級

列表渲染

v-for
v-for 還支持一個可選的第二個參數爲當前項的索引。

<li v-for="(item, index) in items">

能夠用 of 替代 in。
Template v-for
對象迭代 v-for
- 經過一個對象地屬性來迭代
```
<li v-for="value in object">
```
- 提供第二個的參數爲鍵名
- 第三個參數爲索引
- 注意：在遍歷對象時，是按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下是一致的。
整數迭代 v-for

<span v-for="n in 10">{{ n }}</span>

組件和 v-for

+ <my-component v-for="item in items"></my-component>

key

重用和從新排序現有元素，每項提供一個惟一的 key 屬性，須要用 v-bind 來綁定動態值。理想的 key 值是每項都有惟一的id。

<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>

建議儘量使用 v-for 來提供 key。
key 並不特別與 v-for 關聯，key 還有其餘用途

數組檢查更新
變異方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
重塑數組(非變異方法)
- filter()
- concat()
- slice()
- 不會改變原始數組，老是返回一個新數組
注意事項
- 不能檢測變更的數組
  1. 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
  2. 當你修改數組的長度時，例如： vm.items.length = newLength
    
    顯示過濾/排序結果
若是想要顯示一個數組的顧慮或者排序的副本，而不是實際改變或重置原始數據。=>建立返回過濾或排序數組的計算屬性

事件處理器

監聽事件
v-on

v-on:click="counter += 1"

方法事件處理器

在處理比較複雜的邏輯，直接把 Javascript 代碼寫在 v-on 是不可行的，能夠用 v-on 接受一個定義的方法來調用

v-on:click="greet"

內聯處理器方法

v-on:click="say('hi')"

事件修飾符

.stop() 阻止單擊事件冒泡
.prevent() 提交事件再也不重載頁面
.capture() 添加事件偵聽器時使用事件捕獲模式
.self() 事件只在該元素自己（而不是子元素）觸發時觸發回調
.once() 點擊事件將只會觸發一次

按鍵修飾符
監聽常見的鍵值
Vue 爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<input v-on:keyup.13="submit">

按鍵別名

<input v-on:keyup.enter="submit">

所有按鍵別名
- .enter
- .tab
- .delete (捕獲「刪除」和「退格」鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
經過全局 config.keyCodes 對象自定義按鍵修飾符別名：

Vue.config.keyCode.f1 = 112

2.1.0新增
- .ctrl
- .alt
- .shift
- .meta
  
  爲何在 HTML 中監聽事件？
這種事件監聽的方式違背了關注點分離傳統理念。沒必要擔憂，由於全部 Vue.js 事件處理方式和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。v-on 有幾個好處：
- 掃一眼 HTML 模板能夠輕鬆定位到 javascript 代碼中對應的方法
- 由於你沒法在Javascript中手動綁定事件，你的ViewModel能夠式很是純粹的邏輯，和DOM徹底解耦，便於測試
- 當一個ViewModel被銷燬，全部的時間處理器都會自動被刪除，無需擔憂本身如何清理它們
  
  表單控件綁定
  
  基礎用法
v-model 指令在表單控件元素上建立雙向數據綁定。負責監聽用戶的輸入事件以更新數據 ，並處理一些極端的例子。
注意：v-model 不關心表單控件初始化所生成的值。由於它會選擇 Vue 實例數據來做爲具體的值。

# 文本
input type=「text」

# 多行文本
textarea

# 複選框
input type=checkbox id=「hello」
label for=「hello」

# 單選按鈕
input type=「radio」 id=「hello」
label for=「hello」

# 選擇列表
select
option

綁定 value
v-bind：value=「a」

修飾符

# .lazy
轉變爲在 change 事件中同步

<input v-model.lazy="msg" >

# .number

將用戶的輸入值轉爲 Number 類型

<input v-model.number="age" type="number">

# .trim

自動過濾用戶的首尾空格

<input v-model.trim="msg">

v-model 與組件

組件

什麼是組件

組件是Vue.js最強大的功能之一。能夠拓展 HTML 元素，能夠封裝可重用的代碼。
在較高層面上，組件是自定義元素，Vue.js 編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性拓展

使用組件

# 註冊
建立一個全局組件

Vue.component('my-component', {
  // 選項
})

確保初始化以前註冊組件

# 局部註冊

new Vue({
  // ...
  components: {
    // <my-component> 將只在父模板可用
    'my-component': Child
  }
})

# DOM 模板解析說明

限制性元素：

<u l> ，<o l>，<t a b l e> ，<s e l e c t> 限制了能被它包裹的元素， 而一些像 <o p t i o n> 這樣的元素只能出如今某些其它元素內部。解決方案：使用特殊的 is 屬性

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

這些限制不適用：

+ <script type="text/x-template">
    + JavaScript內聯模版字符串
    + .vue 組件

# data 必須是函數

多個組件共享同一個 data，增長一個 counter 會影響全部的組件。解決方案：每一個組件返回一個全新的 data 對象：

data: function () {
  return {
    counter: 0
  }
}

# 構成組件

父子組件：組件 A 在它的模板中使用了組件 B。它們的關係能夠總結爲 props down，events up。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 給父組件發送消息。

Prop

# 使用 Prop 傳遞數據
組件實例的做用域是孤立的。
子組件使用父組件的數據，須要經過子組件的 props 選項

# camelCased(駝峯式) vs. kebab-case(短橫線隔開式)命名

# 動態 Prop

# 字面量語法 vs 動態語法

<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>

<!-- 傳遞實際的 number -->
<comp v-bind:some-prop="1"></comp>

# 單向數據流

prop 是單向綁定的：父組件的屬性發生變化時，將傳導給子組件，不會反過來。--防止子組件無心修改額父組件的狀態。
prop 做爲初始值傳入後，子組件想把它看成局部數據來用；解決方法：定義一個局部變量，並用 prop 的值初始化它

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

prop 做爲初始值傳入，由子組件處理成其它數據輸出，解決方法：定義一個計算屬性，處理 prop 的值並返回。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，若是 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

# Prop 驗證

自定義事件
父組件是使用 props 傳遞數據給子組件，但若是子組件要把數據傳遞回去，應該怎樣作？那就是自定義事件！

# 使用 v-on 綁定自定義事件

# 給組件綁定原生事件
v-on：click.native="doThing"

# 使用自定義事件的表單輸入組件

# 非父子組件通訊
在簡單的場景夏，可使用一個空的 Vue 實例做爲中央事件總線：
在複雜的狀況下，咱們應該考慮使用專門的狀態管理模式

使用 Slot 分發內容
爲了讓組件能夠組合，咱們須要一種方式來混合父組件的內容和子組件本身的模板，這個過程叫作內容分發，使用元素做爲原始內容的插槽。

# 編譯做用域

# 單個 Slot

# 具名 Slot

# 做用域插槽（2.1.0新增）

動態組件
keep-alive

雜項

# 編寫可複用組件
編寫組件時，記住是否要複用組件有好處。一次性組件和其它組件緊密耦合不要緊，可是可複用組件應當定義一個清晰的公開接口。
Vue 組件的 API 來自三個部分 - props，events 和 slots：
- Props 容許外部環境傳遞數據給組件
- Events 容許組件觸發外部環境的反作用
- Slots 容許外部環境將額外的內容組合在組件中。
  
  # 子組件索引
  
  # 異步組件
  
  # 組件命名約定
  
  # 遞歸組件
  
  # 組件間的循環引用
  
  # 內聯模板
  
  -這在有不少模版或者小的應用中有用，不然應該避免使用，由於它將模版和組件的其餘定義隔離了。
  
  # 對低開銷的靜態組件使用 v-once