組件基礎(chǔ)

// 定義一個(gè)名為 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

組件是可復(fù)用的 Vue 實(shí)例们镜，且?guī)в幸粋€(gè)名字：在這個(gè)例子中是 <button-counter>结蟋。我們可以在一個(gè)通過(guò) new Vue 創(chuàng)建的 Vue 根實(shí)例中砸琅，把這個(gè)組件作為自定義元素來(lái)使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

一個(gè)組件也擁有data炕置、methods诚些、computed、watch這些屬性氢哮，但一個(gè)組件里袋毙，data必須是一個(gè)函數(shù)，data里的數(shù)據(jù)必須通過(guò)return返回冗尤。

一個(gè)組件必須只能有一個(gè)根元素听盖，所以需要將組件包裹在一個(gè)父級(jí)的div容器里。

組件的注冊(cè)

組件的全局注冊(cè)

Vue.component('my-component-name', {
  // ... 選項(xiàng) ...
})

組件的局部注冊(cè)

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

組件模板

//以VUE為后綴名的文件裂七，有如下模板
<template>
  <div></div>
</template>

<script>
</script>

<style>
</style>

父子組件傳值

父組件向子組件傳值皆看，是通過(guò)屬性來(lái)傳遞的。prop是你可以在組件上注冊(cè)的一些自定義特性背零，當(dāng)一個(gè)值傳遞給一個(gè)prop特性的時(shí)候腰吟，它就變成了那個(gè)組件實(shí)例上的一個(gè)屬性。當(dāng)prop注冊(cè)之后徙瓶，就可以把數(shù)據(jù)作為一個(gè)自定義特性傳遞進(jìn)來(lái)毛雇。

//父組件發(fā)送數(shù)據(jù)
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
//子組件接受數(shù)據(jù)
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

子組件向父組件傳值，是通過(guò)事件觸發(fā)的方式來(lái)傳遞的：

1.綁定
   methods:{
    handleEvent:function(msg){}
   }
   <son @customEvent="handleEvent"></son>
2.觸發(fā)
子組件內(nèi)部：
this.$emit(‘customEvent’,100);

ref是可以讓父組件得到子組件中的數(shù)據(jù)和方法：

 1.指定ref屬性
    <son ref="mySon"></son>

 2.根據(jù)ref得到子組件實(shí)例
    this.$refs.mySon

parent可以得到父組件的實(shí)例：

this.$parent得到父組件的實(shí)例

非父子組件間通信

兄弟組件通信:
    1.var bus = new Vue();
    2.接收方
    bus.$on('eventName',function(msg){})
    3.發(fā)送方
    bus.$emit('eventName',123);

自定義指令

創(chuàng)建和使用
 Vue.directive('change',{
    bind:function(el,bindings){
    //首次調(diào)用
    },
    update:function(el,bindings){
    //只要是有數(shù)據(jù)變化侦镇，都會(huì)調(diào)用
    },
    unbind:function(){
    //解綁
    }
 })
 <any v-change="count"></any>

鉤子函數(shù)：

一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：

bind：只調(diào)用一次灵疮，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置壳繁。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在震捣，但不一定已被插入文檔中)荔棉。

update：被綁定于元素所在的模板更新時(shí)調(diào)用，而無(wú)論綁定值是否變化蒿赢。通過(guò)比較更新前后的綁定值江耀，可以忽略不必要的模板更新。

componentUpdated：被綁定元素所在模板完成一次更新周期時(shí)調(diào)用诉植。

unbind：只調(diào)用一次祥国，指令與元素解綁時(shí)調(diào)用。

接下來(lái)我們來(lái)看一下鉤子函數(shù)的參數(shù) (即 el晾腔、binding舌稀、vnode 和 oldVnode)。

自定義指令中傳遞的三個(gè)參數(shù)：

el: 指令所綁定的元素灼擂，可以用來(lái)直接操作DOM壁查。
binding: 一個(gè)對(duì)象，包含指令的很多信息剔应。
vnode: Vue編譯生成的虛擬節(jié)點(diǎn)睡腿。

過(guò)濾器

1.創(chuàng)建
   Vue.filter(
    'myFilter',
    function(myInput){
       //myInput是在調(diào)用過(guò)濾器時(shí)，管道前表達(dá)式執(zhí)行的結(jié)果
       //針對(duì)myInput峻贮，按照業(yè)務(wù)需求做處理
       //返回
       return '處理后的結(jié)果'
    })

2.使用
    <any>{{expression | myFilter}}</any>

在調(diào)用過(guò)濾器的時(shí)候席怪，完成參數(shù)的發(fā)送和接受

1.發(fā)送
<any>{{expression | myFilter(參數(shù)1，參數(shù)2)}}</any>

2.接受
Vue.filter('myFilter',function(myInput纤控，參數(shù)1挂捻，參數(shù)2){
    return '處理后的結(jié)果'
})

Vue生命周期

什么是vue的生命周期

指的是實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期船万。也就是從開(kāi)始創(chuàng)建刻撒、初始化數(shù)據(jù)、編譯模板耿导、掛載Dom→渲染声怔、更新→渲染、卸載等一系列過(guò)程舱呻，我們稱這是 Vue 的生命周期醋火。

生命周期的作用

生命周期中有多個(gè)鉤子函數(shù)，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯狮荔。

總共有八個(gè)階段也就是八個(gè)鉤子函數(shù)

創(chuàng)建前/后, 載入前/后,更新前/后,銷(xiāo)毀前/銷(xiāo)毀后

頁(yè)面第一次加載的時(shí)候會(huì)觸發(fā)beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子胎撇，DOM 渲染在 mounted 中就完成

每個(gè)周期的具體場(chǎng)景

1. beforeCreate

   在實(shí)例初始化之后介粘，數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用殖氏。

2. created

   實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步姻采，實(shí)例已完成以下的配置：
   數(shù)據(jù)觀測(cè)(data observer)雅采，屬性和方法的運(yùn)算，watch/event 事件回調(diào)。然而婚瓜，掛載階段還沒(méi)開(kāi)始宝鼓，$el 屬性目前不可見(jiàn)。

3. beforeMount

   在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用巴刻。

4. mounted

   el 被新創(chuàng)建的 vm.el 也在文檔內(nèi)沥寥。

5. beforeUpdate

   數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前柠座。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)邑雅，這不會(huì)觸發(fā)附加的重渲染過(guò)程。

6. updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM妈经，重新渲染和打補(bǔ)丁淮野，在這之后會(huì)調(diào)用該鉤子。

當(dāng)這個(gè)鉤子被調(diào)用時(shí)吹泡，組件 DOM 已經(jīng)更新骤星，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下爆哑，你應(yīng)該避免在此期間更改狀態(tài)妈踊，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用泪漂。

7. beforeDestroy

   實(shí)例銷(xiāo)毀之前調(diào)用廊营。在這一步，實(shí)例仍然完全可用萝勤。

8. destroyed

   Vue 實(shí)例銷(xiāo)毀后調(diào)用露筒。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定敌卓，所有的事件監(jiān)聽(tīng)器會(huì)被移除慎式，所有的子實(shí)例也會(huì)被銷(xiāo)毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用趟径。