局部組件 Vue里
全局組件 Vue外

Vue.component(tagName, options)
tagName為組件名，options 模板
<tagName></tagName>

props 傳遞組件參數(shù)

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
<script>
// 注冊(cè)
Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用
  template: '<span>{{ message }}</span>'
})
// 創(chuàng)建根實(shí)例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父組件內(nèi)容'
  }
})
</script>

props參數(shù)驗(yàn)證

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

使用 emit(eventName) 觸發(fā)事件

注冊(cè)指令 (便于寫框架)

<div id="app">
    <p>頁面載入時(shí)，input 元素自動(dòng)獲取焦點(diǎn)：</p>
    <input v-focus>
</div>
 
<script>
// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
  // 當(dāng)綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 創(chuàng)建根實(shí)例
new Vue({
  el: '#app'
})
</script>

鉤子函數(shù)

• bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
• inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
• update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。
• componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
• unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

參考鏈接
https://www.runoob.com/vue2/vue-custom-directive.html

router-link
切換頁面
流程

//1. 定義（路由）組件。
const Foo = { template: '<div>foo</div>' }
// 2. 定義路由
const routes = [
  { path: '/foo', component: Foo }
]
// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
const router = new VueRouter({
  routes // （縮寫）相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實(shí)例。
const app = new Vue({
  router
}).$mount('#app')

動(dòng)畫用到時(shí)看
https://www.runoob.com/vue2/vue-transitions.html