初探 Vue

[cobish]

在接触「Vue」之前，其实我已经学习了一段时间的 React。一直没来得及总结 React，却先本末倒置地学习起 Vue 来了。也许我是有点浮躁，被技术的浪潮拍打着前进。总之，既然学习了，那就总结一下这一次的学习吧。

比较

Vue vs jQuery

jQuery 是一名出色的老将，它的出现是 js 巨大的一次进步。jQuery 能够出色的操作 DOM 元素，但是操作 DOM 依然是一项麻烦的事情。你必须先获取到 DOM 元素，然后才能进行增删改操作。而 Vue 则是将 html 和 js 通过某种方式绑定在一起，只有修改了 js 里的数据，那么 html 也会跟着变化。相比于 jQuery，Vue 省去了开发者操作 DOM 的麻烦。

Vue vs React

React 是一款特别出色的库，它的虚拟 DOM 和组件化方式都是一种先进的思想，它的出现可以说是 js 的一次大变革。但是 React 的生态系统太过于庞大，不适合开发者短期之内掌握并使用于正式项目。因为它身后的 jsx、flux、redux、webpack、react-native、hot reload，React 并不能让团队里的每一个开发成员都能够快速上手。而 Vue 采用自底向上增量开发的设计，React 有的它也不缺。假如你还没接触 webpack，没关系，你可以直接 script 外部引入开包即用。相比于 React，Vue 能够更快地上手。

使用

基础语法

通过 script 或者 webpack 等方式引入 Vue 文件之后，便可以通过构造函数创建一个 Vue 实例。实例中的 data 属性与 html 中的插值进行数据绑定。无论那一边的数据改动，另一个也会跟着一起变化。

<span id="app">Message: {{ msg }}</span>

new Vue({
  el: '#app',
  data: {
    msg: 'Hello World!'
  }
});

Vue 的条件渲染与列表渲染跟模板引擎的写法很类似，在 HTML 中通过指令便可以使用条件判断与循环。

<h1 id="app-1" v-if="ok">Yes</h1>

<ul id="app-2">
  <li v-for="item in items">
     {{ item.message }}
  </li>
</ul>

var app1 = new Vue({
  el: '#app-1',
  data: {
    ok: true
  }
});

var app2 = new Vue({
  el: '#app-2',
  data: {
    items: [{
      message: 'Foo'
    }, {
      message: 'Bar'
    }]
  }
});

Vue 比 jQuery 简单之处有一项就在于事件的绑定上，jQuery 通常先给标签的 id 或 class 取名，然后通过获取的方式获取到 DOM 元素，然后再进行事件的绑定。而 Vue 则直接通过指令进行事件绑定。

<div id="app">
  <button v-on:click="addCounter">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

new Vue({
  el: '#app',
  data： {
    counter: 0
  },
  methods: {
    addCounter: function() {
      this.counter += 1;
    }
  }
});

当然，Vue 最吸引人的功能之一就在于它的组件，组件可以扩展 HTML 元素，封装可重用的代码。Vue 注册组件的方式有两种，一种是全局注册，被注册的组件被称为全局组件，即可被全局使用；另一种则是局部注册，被注册出来的组件只能在特定的实例或组件中使用。

全局组件的注册与使用方式如下：

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  template: '<span>Hello World!</span>'
});

new Vue({
 el: '#app'
});

局部组件的注册与使用方式如下：

var Child = {
  template: '<span>Hello World!</span>'
};

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  }
});

单文件组件

文件扩展名为 .vue 的单文件组件作为一种局部组件，它需要使用 Webpack 或 Browserify 等构建工具才能使用，「vue-loader」就是其中一种使用方法。但是由于它可以将 HTML、CSS 和 JS 都写到一个文件里，所以很适合组件的提取。

一个名为 Hello.vue 的简单实例：

<template>
  <p>{{ greetring }} <span>World!</span></p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      return {
        greeting: 'Hello'
      };
    };
  }
};
</script>

<style>
p {
  color: red;
  font-size: 2em;
  text-align: center;
}

span {
  color: blue;
}
</style>

在 HTML 中引入该组件，并在 Vue 实例中引用即可：

<div id="app">
  <Hello></Hello>
</div>

var Vue = require('vue');
var Hello = require('./components/hello');

new Vue({
  el: '#app',
  components: {
    'hello': Hello
  }
});

当然单文件组件里可以使用 ES6 和 Sass 等，具体代码可以简单参考我编写的一个「demo」。

路由

在创建单页面应用中，路由则有前端负责管理。当页面变化时，浏览器的 url 也会随着改变。使用官方的 「vue-router」，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

以下是一个路由的简单示例：

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

var Foo = { template: '<div>foo</div>' };
var Bar = { template: '<div>bar</div>' };

var router = new VueRouter({
  routes: [{
    path: '/foo',
    component: Foo
  }, {
    path: '/bar',
    component: Bar
  }]
});

var app = new Vue({
  el: '#app',
  router: router
});

环境部署

Vue 提供了一套官方的构建脚手架「vue-cli」，安装完毕后可选择需要的 template 进行初始化。目前使用得比较多的是「webpack-simple」和「webpack」。

webpack-simple 主要用于学习使用，真正项目的开发则是初始化 webpack，安装如下：

$ npm install -g vue-cli

# 初始化 webpack-simple
$ vue init webpack-simple my-project

# 初始化 webpack
$ vue init webpack my-project

当然，即使是用 vue-cli 初始化 webpack 也不一定能够满足项目的需求，这时可以根据初始化后的代码进行修改调整。

结尾

上面只是总结了 Vue 一些简单入门的功能，实际上 Vue 相关的功能远远不止这一些，比如状态管理 vuex，调试工具 vue-devtools，单元测试等等。等今后接触学习到了再进行总结吧。