• watcher
• key 與 v-for
• v-on:click.native="" 綁定原生事件？
• 過濾器
• 數(shù)據(jù)更新檢測
• $event
• 事件修飾符： .stop/.prevent/.capture/.self
• 按鍵修飾符（別名）
• v-model 具體原理
  與v-bind動態(tài)綁定結(jié)合
  修飾符.lazy/.number/.trim

組件

• 全局注冊

// 注冊
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
  el: '#example'
})

• 局部注冊

var Child = {
 template: '<div>A custom component!</div>'
}
new Vue({
 // ...
 components: {
   // <my-component> 將只在父模板可用
   'my-component': Child
 }
})

• is屬性的使用
  <ul> ，<ol>，<table> ，<select>限制了能被它包裹的元素

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

• 組件中，data必須為函數(shù)

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

• 組件間傳值

1. props父傳子
   子組件需要顯式地用 props 選項 聲明 “prop”：

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內(nèi)
  // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
  template: '<span>{{ message }}</span>'
})

傳入值為：

• 普通字符串<child message="hello!"></child>
  （使用非字符串模版時的命名格式轉(zhuǎn)換）
• 動態(tài)表達式

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

如果 prop 是一個對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(tài)。

• props驗證
  當(dāng) prop 驗證失敗了， Vue 將拒絕在子組件上設(shè)置此值，如果使用的是開發(fā)版本會拋出一條警告。

Vue.component('example', {
  props: {
    // 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數(shù)字，有默認(rèn)值
    propD: {
      type: Number,
      default: 100
    },
    // 數(shù)組／對象的默認(rèn)值應(yīng)當(dāng)由一個工廠函數(shù)返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

2. 自定義事件子傳父
3. 非父子組建通信