关于Vue中实例对象属性的归纳

关于Vue中诸如data、components等实例对象的归纳

提示：Vue实例中的属性，大多以复数命名，例如components、filters等，属性名写错导致在当前初学阶段浪费了不少时间

---

1／data:

数据类，页面相关的数据在这里进行绑定，每一个Vue实例会代理它的data对象，取文档中的例子如下

  var data = { a: 1 }
  var vm = new Vue({
    data: data
  })
  vm.a === data.a // -> true
  // 设置属性也会影响到原始数据
  vm.a = 2
  data.a // -> 2
  // ... 反之亦然
  data.a = 3
  vm.a // -> 3

值得注意的是只有被代理的属性是响应的，实例创建完成后添加的新属性无法触发响应刷新视图

---

2／components

列出本实例中所需要引用的组件，可以在该属性中注册局部组件和全局组件，举局部组件为例

 import HomeCell from './home/homeCell.vue'

 export default {

    name: 'home',
    data () {
      return {}
    },
   components: {
      'HomeCell':HomeCell
    }
}

---

3／refs

Vue2.0中用来代替els的属性，用于获取dom对象

---

4／filters

在这里注册过滤器函数

关于过滤器的内容看官方文档吧 <-- 戳这里

---

5／computed

计算属性，直接引用官方文档

点击这里到官方文档对应章节

---

6／methods

相关函数写在这里可以通过v-on:click等方法调用

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!'

7／watch
用于观察一些参数的变化，做出对应响应
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}