对于初学者来说，面对vue中的各种属性确实有点犯懵，搞不清楚函数什么情况下写到哪个属性底下比较合适。今天就来罗列以下vue中最常用到的属性及其作用。
比如：
new Vue({
el: "#vm", //为实例提供挂载元素，该元素下被vue控制
data: {
fullName: 'foo mui',//初始化实例属性
lastname:"mui",
firstName:'foo'
},
props: ["title"], //父组件向子组件传值
methods: {
go:function(){
//该属性中申明方法
},
// 或者
// go(){
},
created: function(){
// 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
},
mounted: function(){
// 钩子函数,在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
},
computed: {
//计算属性，当数据发生变化时才调用，否则直接调用缓存。好处是提升性能
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
Filters:{
// 自定义过滤器
}
watch: {
//监测变化。
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
一、el属性
这是我们最常见的属性，用来为vue实例提供挂载元素。其中值为挂载元素的id。
例如：
el: '#vm',二、data属性
data属性是一个对象，对象属性是需要绑定的数据。若在组件中data属性返回的是一个函数，那需要绑定的数据放在函数里面。为什么会用一个函数来返回对象属性呢，因为组件一般都会被重复利用，组件被多处使用时，绑定的数据会发生变化，如果都写在data对象中，就不好维护甚至发生冲突，所以使用函数返回对象的方式。
例如：
var vm = new Vue({
el: '#vm',
data: { // 返回对象
title: "",
brandName: " ",
}
})
Vue.component("my-component",{
template: `<img />`
data: function(){ // 返回函数
return {
'a': 1
}
}
})
三、props属性
props属性是接受父组件传过来的值，如果值多，可以写成数组的形式。也可以写成一个对象，用传过来的值做校验等。
props: ["content","index"]
props: {
content: {
type: String, // 父组件传过来的值的类型。
default: xiao,
required: true
}
}
四、methods属性
methods对应一个对象，对象中存放的是函数方法，所以一般的函数定义都放在methods里面。
例如：
methods: {
go: function (val) { // 函数}
五、mounted属性与created属性
这两个属性，也是存放函数的，不同的是created在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
上理解图：
六、computed属性与watch属性
这两个都是监听vue属性，computed属性当数据发生变化时调用里面的函数，如果数据没发生变化就调用缓存数据，大大提高了性能，但是computed属性中需要一个返回值，而且代码是同步执行；而watch属性不需要返回值，也可以是异步的。
例如：
computed: {
//计算属性，当数据发生变化时才调用，否则直接调用缓存。好处是提升性能
fullName: function () {
return this.firstName + ' ' + this.lastName
}
// 计算属性中这两个方法是固定的(get是默认的，可以自己加set)，在调用和设置对应的值的时候会调用对应的函数。
},
watch: {
//监测变化。
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
