脚本宝典收集整理的这篇文章主要介绍了vue2.0开发聊天程序(四) 完整体验一次Vue开发（下），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。
——王小波
三、组件对象
在组件中被<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 // -> 4methods
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...
以上是脚本宝典为你收集整理的vue2.0开发聊天程序(四) 完整体验一次Vue开发（下）全部内容，希望文章能够帮你解决vue2.0开发聊天程序(四) 完整体验一次Vue开发（下）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。