Vue.js学习过程（一）

注：本文参考Vue.js的官方教程

官方教程

声明式渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

app是一个Vue实例，message可以通过Vue渲染进DOM里。
如果需要向后端请求数据，需要用到ajax发起异步请求。
我们可以通过两种方式来实现：
1.导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
2.导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
1.导航完成之后获取

export default {
  data () {
    return {
      ...
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      ...
    }
  }
}

2.在导航完成前获取数据

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

我选择在导航完成之后获取数据，然后通过更改data的数据，重新渲染到DOM中。
注意，如果是要更新数组中的一个元素，直接更改后DOM并不会发生变化，所以，需要通过Vue.set()的方法来更新。
比如，要更改一个bool数组isEditting中下标为index的元素的那个值，要通过以下方式来解决：

这样子DOM才会发生改变。