vue.js筆記

1、 基礎：

1. vue實例：

一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成。當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。

2. 模板語法：

Mustache 語法（即{{}}語法）不能做用在 HTML 特性上，遇到這種狀況應該使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

3. 計算屬性：

• 咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

reversedMessage: function () {
    return this.message.split('').reverse().join('')
}

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

4. 條件渲染：

• 在 <template> 元素上使用 v-if 條件渲染分組，也可使用 v-for 列表渲染分組；
• 由於 v-if 是一個指令，因此必須將它添加到一個元素上。可是若是想切換多個元素呢？此時能夠把一個 <template> 元素當作不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。
• Vue 爲你提供了一種方式來表達「這兩個元素是徹底獨立的，不要複用它們」。只需添加一個具備惟一值的 key 屬性便可；
• 當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。
• 注意，v-show 不支持 <template> 元素，也不支持 v-else

5. 列表渲染： v-for

• v-for 能夠把一個數組對應爲一組元素，還支持一個可選的第二個參數爲當前項的索引，也能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法；
• v-for 能夠經過一個 Object 對象的屬性來迭代，同時也能夠提供第二個的參數爲鍵名，第三個參數爲索引；
• v-for & v-if：當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中；

6. 表單輸入綁定 v-model：

可是有時咱們想綁定 value 到 Vue 實例的一個動態屬性上，這時能夠用 v-bind 實現，而且這個屬性的值能夠不是字符串。

如：複選框：

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b

如：單選按鈕：

<input type="radio" v-model="pick" v-bind:value="a">

// 當選中時
vm.pick === vm.a

 修飾符： 

• .number

若是想自動將用戶的輸入值轉爲 Number 類型 (若是原值的轉換結果爲 NaN 則返回原值)，能夠添加一個修飾符 number 給 v-model 來處理輸入值：

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

 這一般頗有用，由於在 type="number" 時 HTML 中輸入的值也老是會返回字符串類型。

• .trim

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

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

 7. 組件：

• is 特性：像 <ul>、<ol>、<table>、<select> 這樣的元素裏容許包含的元素有限制，而另外一些像 <option> 這樣的元素只能出如今某些特定元素的內部。在自定義組件中使用這些受限制的元素時會致使一些問題，例如：

  <table>
    <my-row>...</my-row>
  </table>

  自定義組件 <my-row> 會被看成無效的內容，所以會致使錯誤的渲染結果。變通的方案是使用特殊的 is 特性：

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

  應當注意，若是使用來自如下來源之一的字符串模板，則沒有這些限制：

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

  所以，請儘量使用字符串模板。

• data 屬性必須是函數；

 8. prop：

• 若是想傳遞一個真正的 JavaScript 數值，則須要使用 v-bind，從而讓它的值被看成 JavaScript 表達式計算，如：

  <!-- 傳遞了一個字符串 "1" -->
  <comp some-prop="1"></comp>
  
  <!-- 傳遞真正的數值 -->
  <comp v-bind:some-prop="1"></comp>

• 要指定驗證規則，須要用對象的形式來定義 prop，而不能用字符串數組：

  Vue.component('example', {
    props: {
      // 基礎類型檢測 (`null` 指容許任何類型)
      propA: Number,
      // 多是多種類型
      propB: [String, Number],
      // 必傳且是字符串
      propC: {
        type: String,
        required: true
      },
      // 數值且有默認值
      propD: {
        type: Number,
        default: 100
      },
      // 數組/對象的默認值應當由一個工廠函數返回
      propE: {
        type: Object,
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定義驗證函數
      propF: {
        validator: function (value) {
          return value > 10
        }
      }
    }
  }) 

• 對於多數特性來講，父組件傳遞給組件的值會覆蓋組件自己設定的值。即例如傳遞 type="large"將會覆蓋 type="date" 且有可能破壞該組件！所幸咱們對待 class 和 style 特性會更聰明一些，這兩個特性的值都會作合併 (merge) 操做；
• 自定義事件：自定義事件有：$on 和 $emit；有時候，你可能想在某個組件的根元素上監聽一個原生事件。可使用 v-on 的修飾符 .native；
• .sync 操做符：讓子組件改變父組件狀態的代碼更容易被區分；它只是做爲一個編譯時的語法糖存在。它會被擴展爲一個自動更新父組件屬性的 v-on 監聽器：

  <comp :foo.sync="bar"></comp>

  當子組件須要更新 foo 的值時，它須要顯式地觸發一個更新事件：

  this.$emit('update:foo', newValue)

9. 動態組件：

經過使用保留的 <component> 元素，動態地綁定到它的 is 特性，咱們讓多個組件可使用同一個掛載點，並動態切換：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 組件在 vm.currentview 變化時改變！ -->
</component>

也能夠直接綁定到組件對象上：

var Home = {
  template: '<p>Welcome home!</p>'
}

var vm = new Vue({
  el: '#example',
  data: {
    currentView: Home
  }
})

•  若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個 keep-alive 指令參數

10 . 其餘：

• $refs 只在組件渲染完成後才填充，而且它是非響應式的。它僅僅是一個直接操做子組件的應急方案——應當避免在模板或計算屬性中使用 $refs；
• 對低開銷的靜態組件使用 v-once：當組件中包含大量靜態內容時，能夠考慮使用 v-once將渲染結果緩存起來，如：

  Vue.component('terms-of-service', {
    template: '\
      <div v-once>\
        <h1>Terms of Service</h1>\
        ...不少靜態內容...\
      </div>\
    '
  })

 11. 過渡/列表過渡：

• 使用 <transition name="my-transition"> 能夠重置前綴，好比 v-enter 替換爲 my-transition-enter。v-enter-active 和 v-leave-active 能夠控制 進入/離開 過渡的不一樣階段；

• 當有相同標籤名的元素切換時，須要經過 key 特性設置惟一的值來標記以讓 Vue 區分它們，不然 Vue 爲了效率只會替換相同標籤內部的內容。即便在技術上沒有必要，給在 <transition> 組件中的多個元素設置 key 是一個更好的實踐；

• 同時生效的進入和離開的過渡不能知足全部要求，因此 Vue 提供了 過渡模式：

  • in-out：新元素先進行過渡，完成以後當前元素過渡離開；

  • out-in：當前元素先進行過渡，完成以後新元素過渡進入；

• 列表的排序過渡：<transition-group> 組件還有一個特殊之處。不只能夠進入和離開動畫，還能夠改變定位。要使用這個新功能只需瞭解新增的 v-move 特性，它會在元素的改變定位的過程當中應用。像以前的類名同樣，能夠經過 name 屬性來自定義前綴，也能夠經過 move-class 屬性手動設置；

2、 可複用性 & 組合： 

1. 混合 (mixins) 是一種分發 Vue 組件中可複用功能的很是靈活的方式。混合對象能夠包含任意組件選項。當組件使用混合對象時，全部混合對象的選項將被混入該組件自己的選項。

// 定義一個混合對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定義一個使用混合對象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

2. 選項合併： 

• 當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合。好比，同名鉤子函數將混合爲一個數組，所以都將被調用。另外，混合對象的鉤子將在組件自身鉤子以前調用；值爲對象的選項，例如 methods, components 和 directives，將被混合爲同一個對象。兩個對象鍵名衝突時，取組件對象的鍵值對。注意：Vue.extend() 也使用一樣的策略進行合併。
• 謹慎使用全局混合對象，由於會影響到每一個單首創建的 Vue 實例 (包括第三方模板)。大多數狀況下，只應當應用於自定義選項，就像上面示例同樣。也能夠將其用做 Plugins 以免產生重複應用

 三. 插槽：

slot：

// 父組件
<navigation-link url="/profile">
  Your Profile
</navigation-link>

或

<navigation-link url="/profile">
  <!-- 添加一個 Font Awesome 圖標 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

或

<navigation-link url="/profile">
  <!-- 添加一個圖標的組件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

// 子組件
<a v-bind:href="url" class="nav-link" > 
　　<slot></slot>
</a>

以上爲不具名 slot。

若是 <navigation-link> 沒有包含一個 <slot> 元素，則該組件起始標籤和結束標籤之間的任何內容都會被拋棄。