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...