起

博客每篇文章都有一个分类，有的时候，写着写着才发现没有建分类，这个时候只能保存一下草稿，出去创建分类，然后再回来继续写文章。对我这种本身就不擅长写文章的人来说，打断连续性无异于致命一击。于是想给新建文章的页面增加一个功能，就是页面内直接添加分类，添加成功后，追加到分类列表里。

搞

不管怎么说，一个input和一个button是肯定需要的，这之后就出现了一些分歧：

如果用比较传统的方式，需要给button绑一个onclick事件，在事件中获取input 的值，然后使用xhr传给后端，拿到结果后，在分类列表的select中添加一条option。

我想了一下，感觉有些麻烦，正好以前也了解过vue，感觉双向绑定这个武器，很适合做这个事情。

思路大概是这样的，我们需要两个数据绑定，一个是分类列表，一个是新增分类的input。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

createCategory: function () {
    this.$http.post('/category', {
        "name": this.tmpCategory
    }).then(function (data) {
        console.log(data);
        if (data.body.code == 0) {
            this.categories.push(data.body.data);
            this.tmpCategory = '';
        } else {
            alert(data.body.msg);
        }
    });

这是新增分类的方法，tmpCategory是使用v-model和input绑定在一起的，直接获取值就可以使用。使用v-on:click="createCategory"将这个方法绑定在按钮上，这样一点按钮就会触发。categories是和列表绑定的，所以push进去一个对象，列表也会更新，简直是太方便了。

1
2
3

<select class="form-control" id="category" name="category">
    <option v-for="category in categories" :value="category.id">@{{ category.name }}</option>
</select>

使用v-for就可以把列表循环出来了。

三

用的时候出现了一个问题，就是this.$http.post提示没有post这个方法，但是我去网上找了一圈vue的请求都是这么用的，很奇怪。之后根据错误提示，才发现，原来还需要vue-resource.js这个库才行，而且2.0里好像也不需要use就能使用了，而且2.0里生命周期也变了，从ready变成了mounted，估计还有其他需要注意的地方。

尾

从使用体验上来说，vue确实不错，但是就我用的深度来说，还达不到能横向对比的程度。纵向对比的话，确实比老旧的方法方便了很多，之后有机会的话，也会比较系统的看一遍文档来了解一下。

以前一直以为用vue的话，需要编译，没想到原来是直接用的，浏览器真是越来越高级了，前几天看到ff也支持web assembly了，世界真是日新月异。但是vue从ie9开始支持，对广义的国内环境来说，支持度还是稍微差了些。不过好在需要低版本支持的网站，也越来越少了。

a wonderful world