迟来半年的第一篇文章-初探VUE

大概半年前开通了CSDN的博客，本想着有空就写几篇博客，记录一下自己的前端学习经历和工作感悟，但是一来工作比较忙，二来也没有学到太多东西，所以羞于下笔。近最近事情不多，终于有时间有心情好好整理一下以前的知识，写几篇博文。

入职近一年，虽说工作比较多，但主要都是些重构的内容，或者是些简单的插件编写，没有接触到更深一层的前端知识。为了提升自己的能力和脱离‘切图仔’的称号，我打算深入研究一下前端框架，首选的肯定是圈内好评如潮的Vue了。

Vue是一个MVVM框架，MVC和MVVM都听说过，但一直都处于：“只理解意思不能拿出具体例子”的阶段，希望学习Vue之后能理解透彻。不得不说官方文档做得很好，循序渐进的介绍和实用具体的例子都让人很容易就能明白。虽然知道自己只是懂得了皮毛，还需要好好理解其中的原理和为什么这么做的原因，任重而道远啊。

Vue有一个原则：DOM操作交给Vue去完成，用户只需要花时间在处理数据和逻辑上面。这样就大大解放了很多重复且繁重的工作时间，让我们可以更好地实现页面的功能，这真的是极好的，以前编写插件的时候几乎都在跟DOM打交道，相当的烦心。

这是Vue官方文档上面的例子：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

这是一个简单的点击统计组件，每一个botton-counter点击都会实现自我变化，同时响应到总数变化，这里主要展示的是父组件监听子组件的功能。

核心内容在于：

'<button v-on:click="increment">{{ counter }}</button>'            ----子组件绑定点击事件
this.$emit('increment')                                            ----子组件传递点击事件
<button-counter v-on:increment="incrementTotal"></button-counter>  ----监听子组件点击事件，并响应

咋看之下用三个句子传递一个事件有点繁琐，但是这里为父子组件实现了很好的解耦，在复杂的应用中可以达到很高的复用性，这是十分优秀的一点，而且免除DOM操作，十分方便。