vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)

ermu

后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。
                                         ——王小波
三、组件对象
在组件中被<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模版,类似于reactjsx语法,减少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...

    阅读 3.8k

    vue2.0 开发聊天程序
    开发这个项目的契机是一位朋友(群里认识的),要做一个npp的聊天插件,不太会写前端,所以拜托群里人帮忙...

    不行啊,要上班

    500 声望
    117 粉丝
    0 条评论

    不行啊,要上班

    500 声望
    117 粉丝
    文章目录
    宣传栏