Vue.js基礎拾遺

模版語法

插值

一、Vue.js的數據綁定形式是使用「Mustache」語法（雙大括號）的形式，針對Html代碼，須要使用v-html指令。

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
複製代碼

二、Mustache語法不能做用在HTML特性上面，此時須要使用v-bind指令。

<div v-bind:id="dynamicId"></div>
複製代碼

指令

一、一些指令可以接收一個「參數」，在指令名稱以後以冒號表示，如v-bind。

<a v-bind:href="url">...</a>
複製代碼

二、從2.6.0開始，能夠用方括號擴起來的Javascript表達式做爲一個指令的參數

<a v-bind:[attributeName]='url'>...</a>
複製代碼

這裏的 attributeName 會被做爲一個 JavaScript 表達式進行動態求值，求得的值將會做爲最終的參數來使用。例如，若是你的 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 v-bind:href。

一樣，咱們可使用動態參數爲一個動態的事件名綁定處理函數

<a v-on:[eventName]="doSomething"> ... </a>
複製代碼

動態參數預期會求出一個字符串，異常狀況下值爲 null。這個特殊的 null 值能夠被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。 動態參數表達式有一些語法約束，由於某些字符，例如空格和引號，放在 HTML 特性名裏是無效的。

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

<form v-on:submit.prevent="onSubmit">...</form>
複製代碼

四、指令簡寫

v-bind指令

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

<!-- 縮寫 -->
<a :href="url">...</a>
複製代碼

v-on指令

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

<!-- 縮寫 -->
<a @click="doSomething">...</a>
複製代碼

計算屬性與偵聽器

計算屬性是和普通屬性同樣在模版中綁定的，只不過該屬性的值涉及到一系列的計算，並非單純的一個屬性值。

計算屬性的getter函數是沒有反作用（side effect）的。

計算屬性VS方法

咱們能夠將同一個函數定義爲一個方法而不是一個計算屬性，兩種方式的最終結果是相同的。不一樣的是計算屬性是基於他們的依賴進行緩存的。當相關依賴不變的狀況下，計算屬性是直接獲取緩存的結果，不須要執行函數，而方法的寫法每當從新渲染時，都會被再次執行。

計算屬性VS偵聽屬性

Vue提供了一種更通用的方式來觀察和響應Vue實例上的數據變動：偵聽屬性，經過watch來監聽屬性的變化。可是一般更好的作法是使用計算屬性而不是命令式的watch回調。

那麼何時選擇偵聽屬性更好呢？

當響應數據變化的處理是執行異步或者開銷較大的操做時，使用偵聽屬性是有用的。

Class與Style綁定

v-bind用於class和style時，Vue.js作了專門的加強，表達式結果的類型除了字符串以外，還能夠是對象或數組。

綁定HTML Class

一、v-bind：class指令能夠與普通的class屬性共存。咱們也能夠綁定一個返回對象的計算屬性，這是很是有用的模式。

二、咱們能夠把一個數組傳給v-bind：class，以應用一個class列表。

三、當在一個自定義組件上使用 class 屬性時，這些類將被添加到該組件的根元素上面。這個元素上已經存在的類不會被覆蓋。

綁定內聯樣式

一、v-bind:style 的對象語法十分直觀——看着很是像 CSS，但實際上是一個 JavaScript 對象。CSS 屬性名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名.

二、直接綁定到一個樣式對象一般更好，這會讓模板更清晰：

三、對象語法經常結合返回對象的計算屬性使用

四、當 v-bind:style 使用須要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

五、能夠爲 style 綁定中的屬性提供一個包含多個值的數組，經常使用於提供多個帶前綴的值。這樣只會渲染數組中最後一個被瀏覽器支持的值。

條件渲染

一、v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。也能夠用 v-else 添加一個「else 塊」。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

二、在 <template> 元素上使用 v-if 條件渲染分組

三、經過添加一個具備惟一值的 key 屬性來表達「兩個元素是徹底獨立的，不要複用他們」。

四、帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

v-if & v-show

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

五、當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

列表渲染

一、v-for 指令根據一組數組的選項列表進行渲染。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。

二、能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法, v-for="item of items"

三、能夠用v-for來迭代一個對象的屬性。v-for="(value, key) in object"

在遍歷對象時，是按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下是一致的。

四、爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。理想的 key 值是每項都有的惟一 id。

不要使用對象或數組之類的非原始類型值做爲 v-for 的 key。用字符串或數類型的值取而代之。

五、因爲Javascript的限制，Vue不能檢測到下面的變更狀況：

• 當利用索引直接設置一個項目時,不會觸發狀態更新。能夠經過下面方式實現：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// 使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名 
vm.$set(vm.items, indexOfItem, newValue)
複製代碼

• 當直接修改數組長度時,不會觸發狀態更新。能夠經過下面方式實現：

vm.items.splice(newLength)
複製代碼

六、Vue 不能檢測對象屬性的添加或刪除

對於已經建立的實例，Vue 不能動態添加根級別的響應式屬性。可是，可使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性

七、須要爲已有對象賦予多個新屬性，好比使用 Object.assign() 或 _.extend()。在這種狀況下，你應該用兩個對象的屬性建立一個新的對象。

// ❌
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

// ✅
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
複製代碼

八、顯示過濾/排序結果，能夠經過建立返回過濾或排序數組的計算屬性來實現。在計算屬性不適用的狀況下（如嵌套v-for循環中）能夠適用method方法來處理。

九、v-for & v-if

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。

十、在自定義組件裏，你能夠像任何普通元素同樣用 v-for 。

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

然而，任何數據都不會被自動傳遞到組件裏，由於組件有本身獨立的做用域。爲了把迭代數據傳遞到組件裏，咱們要用 props。

// 一個完整的todolist demo
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </li>\ ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

複製代碼

事件處理

事件修飾符

• .stop
• .prevent
• .capture
• .self

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

複製代碼

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

• .once(2.1.4 new)

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
複製代碼

不像其它只能對原生的 DOM 事件起做用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

• .passive(2.3.0 new)

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>  // 2.3.0 new
複製代碼

.passive 修飾符尤爲可以提高移動端的性能

不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。

按鍵修飾符

在監聽鍵盤事件時，咱們常常須要檢查詳細的按鍵。Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符

<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
複製代碼

Vue提供了經常使用的按鍵碼的別名

• .enter
• .tab
• .delete (捕獲「刪除」和「退格」鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

系統修飾鍵（2.1.0 new）

能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

• .ctrl
• .alt
• .shift
• .meta

請注意修飾鍵與常規按鍵不一樣，在和 keyup 事件一塊兒用時，事件觸發時修飾鍵必須處於按下狀態。換句話說，只有在按住 ctrl 的狀況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。若是你想要這樣的行爲，請爲 ctrl 換用 keyCode：keyup.17。

.exact修飾符（2.5.0 new）

.exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即便 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
複製代碼

鼠標按鈕修飾符（2.2.0 new）

• .left
• .right
• .middle

這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

表單輸入綁定

你能夠用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值而老是將 Vue 實例的數據做爲數據來源。你應該經過 JavaScript 在組件的 data 選項中聲明初始值。

v-model 在內部使用不一樣的屬性爲不一樣的輸入元素並拋出不一樣的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 做爲 prop 並將 change 做爲事件。

對於須要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程當中獲得更新。若是你也想處理這個過程，請使用 input 事件。

修飾符

.lazy

在默認狀況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你能夠添加 lazy 修飾符，從而轉變爲使用 change 事件進行同步：

<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg" >
複製代碼

.number

若是想自動將用戶的輸入值轉爲數值類型，能夠給 v-model 添加 number 修飾符：

<input v-model.number="age" type="number">
複製代碼

這一般頗有用，由於即便在 type="number" 時，HTML 輸入元素的值也總會返回字符串。若是這個值沒法被 parseFloat() 解析，則會返回原始的值。

.trim

若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符：

<input v-model.trim="msg">
複製代碼

組件基礎

由於組件是可複用的 Vue 實例，因此它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。

一、data必須是函數

一個組件的data選項必須是一個函數，所以每一個實例才能夠維護一份被返回對象的獨立的拷貝。

二、組件有兩種註冊類型：全局註冊和局部註冊。咱們的組件都只是經過Vue.component全局註冊的

Vue.component('my-component-name', {
  // ... options ...
})
複製代碼

全局註冊的組件能夠用在其被註冊以後的任何 (經過 new Vue) 新建立的 Vue 根實例，也包括其組件樹中的全部子組件的模板中。

三、經過Prop向子組件傳遞數據

Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。一個組件默承認以擁有任意數量的 prop，任何值均可以傳遞給任何 prop。

四、每一個組件必須只有一個根元素

五、父級組件能夠像處理 native DOM 事件同樣經過 v-on 監聽子組件實例的任意事件,同時子組件能夠經過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件：

<parentElement 
  ...
  v-on:special-event="todo something..."></parentElement>

<childElement v-on:click="$emit('special-event')">
  Click to trigger special-enent
</childElement>
複製代碼

插槽

Vue自定義的<slot>元素能夠實現經過插槽分發內容。

解析DOM時的注意事項

HTML元素有些會有嚴格的限制包含和被包含的關係，這會致使咱們使用一些有約束條件的元素時會遇到一些問題。此時能夠經過is特性來解決

<table>
  <tr is="blog-post-row"></tr>
</table>
複製代碼

下面狀況不會出現限制：

• 字符串模版（例如 template：‘...’）
• 單文件組件（.vue）
• <script type="text/x-template">

---

小結

以上是在重溫Vue.js官方文檔基礎部份內容時作出的拾遺筆記，記錄認爲是一些須要特別注意的地方。後續會繼續深刻進行Vue.js的學習。