Vue學習記錄（二）

Vue學習記錄（二）

組件

1.組件介紹：

組件(Component)能夠擴展HTML元素，封裝可重用的代碼。全部的Vue組件同時也都是Vue的實例，因此可接受相同的選項對象(除了一些根級特有的選項)並提供相同的生命週期鉤子。

2.組件使用：

(1) 全局註冊：

1) 建立一個Vue實例：

new Vue({
  el: '#example'
})

2) 註冊一個全局組件：

Vue.component('my-component', {
  template: '<div>Hello World!</div>'
})

3) 註冊後的組件，即可做爲自定義元素在一個實例的模板中使用(注意確保在初始化根實例以前註冊組件)：

<div id="example">
  <my-component></my-component>
</div>

以上三步效果即至關於：

<div id="example">
  <div>Hello World!</div>
</div>

(2) 局部註冊: 經過某個Vue實例/組件的實例選項components註冊僅在其做用域中可用的組件，這種封裝也適用於其它可註冊的Vue功能，好比指令：

var Child = {
  template: '<div>Hello World!</div>'
}
new Vue({
  components: {
    'my-component': Child
  }
})

(3) DOM 模板解析注意事項：
Vue只有在瀏覽器解析、規範化模板以後才能獲取其內容。像<ul>、<ol>、<table>、<select>這樣的元素裏容許包含的元素有必定的限制，而另外一些像<option>這樣的元素只能出如今某些特定元素的內部，這樣的狀況下自定義組件會致使錯誤的渲染效果，通常的解決方法是使用is特性，好比：

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

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

1) <script type="text/x-template">
2) JavaScript 內聯模板字符串
3) .vue 組件
綜上，應儘量使用字符串模板。

(4) data 必須是函數：

<div id="example">
  <my-component></my-component>
</div>
var data = { count: 0 }
Vue.component('my-component', {
  template: '<button v-on:click="count+= 1">{{ count}}</button>',
  data: function () {
    return data
  }
})

(5) 組件組合：
經過一個良好定義的接口來儘量將父子組件解耦是很重要的，這保證了每一個組件的代碼能夠在相對隔離的環境中書寫和理解，從而提升了其可維護性和複用性。在Vue中，父子組件的關係能夠總結爲prop向下傳遞，事件向上傳遞。父組件經過prop給子組件下發數據，子組件經過事件給父組件發送消息。

3.過濾器：
Vue.js容許自定義過濾器，用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在JavaScript 表達式的尾部，由「管道」符號指示，例如：

<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="divId | capitalize "></div>
<!-- 在一個組件的選項中定義本地的過濾器 -->
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}