七周七种前端框架四：Vue.js 概览

关于 Vue

Vue 从去年开始火的不行，如果你觉得 Angular1 又旧又太庞杂不好用，而Angular2又显得磨磨唧唧一直不出正式版，那么 Vue 可能是一个很好地选择。另外 Vue 的作者是一个国人大牛。

看 Vue 第一眼的感觉就是 麻雀虽小五脏俱全，该有的 data bind, component, directive 都有，API 简洁清晰，而且 directive 和 component 界限分明不会傻傻分不清。

关于和其他框架的比较可以参考官网的说明：https://vuejs.org/guide/comparison.html

大致可以这么总结：

• 相比于 Angular， Vue 更加简洁高效，在API设计和代码大小上都是如此。不过和 Angular2 倒是有很多相似的地方，component 和directive 都很像。
• 相比于 React，最大的区别当然是 Vue根本就没有 virtual dom，所以只能用在web上，而 React 可以编译成各种UI控件因此可以移植到 iOS 和 Android 上。

Todo list demo

创建一个 todolist 作为了解 Vue 的第一步。首先，我们需要定义一个 HTML 结构，其实写法大致上和Angular也没太大区别，无非就是这四步：

• 双向绑定一个 input
• 监听表单提交后更新 list
• 监听 checkbox change 更新 list
• 循环输出 list

<div id="todo">
  <form v-on:submit="add" v-on:submit.prevent>
    <input type="text" v-model="input"/>
    <input type="submit" value='add' />
  </form>

  <ul>
    <li v-for='todo in list'>
      <label v-bind:class="{ done : todo.done }" >
        <input type="checkbox" v-model="todo.done"/>
        {{todo.title}}
      </label>
    </li>
  </ul>
</div>

然后我们要创建一个 Vue 实例来封装和处理这些业务逻辑和数据：

new Vue({
  el: "#todo",
  data: {
    input: "",
    list: [
      {
        title: "Make Something Tonight",
        done: false
      }
    ]
  },
  methods: {
    add: function() {
      var title = this.input.trim();
      if(!title) return false;
      this.list.unshift({
        title: title,
        done: false
      });
      this.input = "";
    }
  }
});

代码非常简洁，其中添加一个todo我们用 add 函数进行添加，而改变todo状态我们直接双向绑定了 todo.done 就行了，不用额外写JS代码来实现。简单的20+行JS代码就可以实现一个有基本功能的todolist应用。

这个例子和官网上的例子稍微有点不同，主要是我加上了改变todo状态的操作。
这个例子主要是展示了 Vue 的如下几个特性：

• 双向数据绑定，或者叫响应式数据绑定 - reactive data binding
• 事件绑定
• DOM 操作

下面一章 我们仔细看看几个重点：

1. 基本语法
2. Component
3. Directive