vue2.0開發聊天程序(四) 完總體驗一次Vue開發（下）

後來我才知道，生活就是個緩慢受錘的過程，人一每天老下去，奢望也一每天消失，最後變得像捱了錘的牛同樣。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——王小波
3、組件對象
在組件中被<script>包裹的代碼能夠當作是一個對象，也就是vue實例。下面將簡單介紹vue實例的屬性：

1. 數據
這裏的數據能夠看作是MVVM中的model層，用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。
關於MVVM,可閱讀此文章：
http://www.cnblogs.com/SanMao...
按照vue官網的歸類，可將如下屬性歸類到數據類屬性當中：

• data
  Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data 的屬性可以響應數據變化。（是經過getter和setter來修改和獲取數據的）。

注意：angular中雙向數據綁定的實現原理是對DOM或xhr事件作了定製，在裏面觸發digest（髒檢查）流程，去檢查全部的watcher，從而更新數據。VUE則是使用ES5提供的Object.defineProperty() 方法，監控對數據的操做，從而能夠自動觸發數據同步，更加的精準，省事。

• props
  props 能夠是數組或對象，用於接收來自父組件的數據。也就是以前說過的父傳子的prop方法。

• propsData
  此屬性只用於 new 建立的實例中。在建立實例時傳遞 props。主要做用是方便測試。

  /*經過VUE實例建立一個子類Comp，這個子類有一個props屬性*/
  var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
      })
  /*new一個Cmop對象的時候，我但願把props傳過去(模仿父級的操做)，可是又沒有父級，就能夠如下面的方式實現*/
  var vm = new Comp({        
    propsData: {
      msg: 'hello'
    }
  })

• computed
  計算屬性，此屬性是一個對象，用於定義對data中的數據進行操做的方法。分爲讀取和設置，也就對應了data的getter和setter。這個對象的方法中的this都是指向vue實例的data屬性。

  var vm = new Vue({
    data: { a: 1 },
    computed: {
      // 僅讀取，值只須爲函數
      aDouble: function () {
        return this.a * 2
      },
      // 讀取和設置
      aPlus: {
        get: function () { // get方法返回處理後的數據，不會改變本來的data
          return this.a + 1
        },
        set: function (v) {
          this.a = v - 1
        }
      }
    }
  })
  vm.aPlus   // -> 2
  vm.aPlus = 3
  vm.a       // -> 2
  vm.aDouble // -> 4

• methods
  methods和computed都是用來提供操做數據的方法的屬性，二者的區別在於computed中有在相關的數據發生改變時纔會再次觸發computed,而在模版從新渲染時，而相關數據沒有變化時並不會觸發。methods在從新渲染時就會觸發，在應用場景中提現：
  好比當須要求和時，使用計算屬性更加貼切，在angular中，一般都是直接在html中以{{a+b+c}}的形式來展現和，vue的計算屬性能夠說就是爲了讓模版中不應出現邏輯而提供的屬性。
  methods主要是事件觸發方法，表單提交，頁面控制等場景時使用。

• watch
  watch屬性用於監聽數據的變化，當數據發生變化時，須要作什麼操做。和computed(計算屬性)很類似，都是當相關的數據發生變化時執行。當你想要在數據變化響應時，執行異步操做或開銷較大的操做，應該使用watch。使用 watch 選項容許咱們執行異步操做（訪問一個 API），限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這是計算屬性沒法作到的。

2.DOM
除了在*.vue文件的<template>中聲明以外，還能夠經過el'、template、render來增長模版

• el
  只能在建立一個VUE實例的時候使用

new Vue({
  el: '#some-element',
  // 選項
})

• template
  在註冊組件的時候使用，其效果和*.vue文件中的template效果是同樣樣的。

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

• render
  render是一個方法，讓你發揮最大的編程能力去編寫一個html模版，相似於react的jsx語法，減小html中冗長的代碼。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 標籤名稱
      this.$slots.default // 子組件中的陣列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

3.生命週期鉤子

我們說，組件有他的生命週期，從建立到銷燬，那麼咱們有沒有辦法監聽到組件的生命週期呢？答案是有的，就是生命週期鉤子。爲組件增長對應的生命週期鉤子，就能夠對組件的建立銷燬作到可控制了。

---

• beforeCreate: 在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。

---

• create: 實例已經建立完成以後被調用,在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

---

• beforeMount: 在掛載開始以前被調用：相關的 render 函數首次被調用。

---

• mounted: el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

---

• beforeUpdate: 數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。

---

• updated: 因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

---

• activated: keep-alive 組件激活時調用。

---

• deactivaed: keep-alive 組件停用時調用。

---

• beforeDestory: 實例銷燬以前調用。在這一步，實例仍然徹底可用。

---

• destroyed: Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

---

其中，只有beforeCreate和Create在服務器端渲染期間可使用，而其餘鉤子均不能使用。
用法以下：

export default {
  name: 'test',
  methods: {
      goPage: function () {
          this.$router.push('/')
      }
  },
  components: { // 一樣要注入Bus
      Bus
  },
   data () {
      return {
          whiteSay: 'nihao'
      }
  },
  created: function() { // 在組件被建立時候將會執行此函數  至關於進入頁面的自執行
     var _self = this; // 將當前做用域保存在變量中，和$on()的做用域區分開來
      Bus.$on('whiteSay', function(data) { // 使用$on方法監聽white屬性並執行一個回調函數
          _self.whiteSay = data
          console.log(_self.whiteSay)
      });
  }
}

4.資源
在angular中，有指令、過濾器等好用的方法，VUE中一樣也存在，並把他們歸類到了資源當中。

• directive： 除了v-bind，v-model等vue自帶的指令以外，也容許註冊自定義的指令。用法以下：
  註冊全局的指令：

// 註冊一個全局自定義指令 v-focus
Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

註冊局部的指令：

export default {
    data: () {
          return {
              whiteSay: 'nihao'
          }
    },
    directives: {
      focus: {
        // 指令的定義---
      }
    }
}

而後在html中使用：

<input v-focus>

關於自定義指令的詳細內容請參考：https://cn.vuejs.org/v2/guide...

• filter：vue2.0捨棄的自帶的過濾器，提供了fitler屬性來自定義過濾器。具體代碼以下：

new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

• components： 當組件中須要用到其餘的組件時，須要使用components屬性去建立一個哈希表。
  具體用法以下：

<template>
  <div id="app">
  <!-- 包含dagger組件 -->
    <dagger></dagger>
  </div>
</template>
<script>
import Dagger from './components/Dagger' // 引入Dagger組件

export default {
  name: 'app',
  components: {
    Dagger // 在components中添加dagger組件的哈希表
  },
  data () {
    return {
      noSay: ''
    }
  },
  methods: {
    toFatherSay: function(massage) {
      this.noSay = massage
    },
    changeDagger: function() {
      this.$store.commit('daggerCtrl')
    }
  }
}
</script>

收尾

除了上面這些屬性，還有一些雜項,詳情請看官網：
http://cn.vuejs.org/v2/api/#p...