概要

昔に描いた10分で始めるReact.js(v.0.14.7)に続きVue.jsをちょっとだけ触ったので導入部分だけ簡単にまとめます。
Vue.jsを知らない人、もしくは知ってるけど実際に触ったことない人向けに、とりあえずどんなもんか短時間で体感できるようにまとめてみました。

0.Vue.jsとは

Vue.jsとはMVVMと呼ばれる設計パターンを採用しているフレームワークです
jsのフレームワークはたくさんありますがその中でも最もシンプルで学習しやすいフレームワークの1つとして有名です

1.環境のセットアップ

環境	Mac 10.11.6(OS X EI Capitan)

今回はVue.jsをnpmからインストールします。なのでまずはHomebrew,nodebrewを入れます。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install nodebrew
$ mkdir ~/.nodebrew
$ mkdir ~/.nodebrew/src
$ nodebrew install-binary stable
$ echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.zshrc

確認
$ node -v
v6.8.0

参考：NodeBrewインストール編

2.Vue.jsのインストール

nodeを入れたらnpmでVue.jsのインストールします。

$ npm install vue@csp

~/node_modules/以下にインストールされる
$ ls ~/node_modules/vue
LICENSE     README.md   dist/       package.json    src/

参考：Vue.js インストール

3.サンプルを試す

sample.html

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
</head>

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})
</script>

</html>

参考：Vue.js はじめに

4.確認

ブラウザでsample.htmlを確認します。

以上です

なんとなくのパッと見がReactよりもシンプルで分かりやすいかなと思います
その分学習しやすかったり、運用しやすかったりする気がします
Reactもそうですが、既存で使っているフレームワークや素のjsでも一部だけVue.jsにすることができるので試しに導入してみるとかも良さそうです

10分で始めるVue.js(基本編)

概要