「Vueの学習を始めたぞ」の巻

大したこと書いてません。 Vue を覚えないとそろそろいけないので触りからはじめました。

手順

環境

go + vue.js
※ 静的なファイルをサーブできればなんでもいいのでgoじゃなくてもいいと思います。

環境用意

goの環境用意

mkdir todo; and mkdir todo/src; and mkdir todo/src/todo
cd todo; and touch .envrc

emacs .envrc
export GOPATH=$(pwd)

direnv allow
direnv: loading .envrc
direnv: export ~GOPATH

cd todo/src/todo
dep init
touch main.go

とりあえずざっくりこんな感じでgoの動く環境を用意します。

ディレクトリ構成

todos
  /src
    /todo
        main.gp
        handler/main.gp
  /tmpl
    /layout
      index.tmpl

静的ファイルを表示させる

Vueを書いていくHTMLファイルを用意します。

index.tmpl

<!DOCTYPE HTML>
<html>
<body>
<div id="app">
    <p>This is sample Vue app</p>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>

とりあえず簡単なvueの動作確認だけしたいので、CDNからDLするようにします。（ビルド周りとか、*.vueファイル使うのはまた次回）

Vueでコードを書く

イベントを作成する

イベントを作成します。カウントアップするだけのコードを書きます。

new Vue({
    // describe options
    el: '#app',
    data: {
        count:0,
    },
    methods: {
        countUp: function () {
            this.count++
        }
    }
})

イベントリスナーを登録する

methods に記載した countUp をclickイベントに登録します。登録の仕方は以下の２つの記法があります。

<button v-on:click="countUp">countUp</button>
<button @click="countUp">countUp</button>

@ が省略記法らしい。この辺どちらを使うのがVueっぽいのだろうか...

双方向データバインディングを書く

<div id="app">
  <input type="text" v-model="text">
  <p v-html="text"></p>
</div>

new Vue({
    // describe options
    el: '#app',
    data: {
        text:""
    },
    methods: {
        // 何も書かなくていい
    }
})

(これだけで最小限の双方向データバインディング書けるの結構感動しました。ロジックに何も書いてない...)

textareaを使用した場合は改行た適切に反映されないので出力側のスタイルを調整します。 cf. フォーム入力バインディング — Vue.js - 複数行テキスト

その他、フォーム入力バインディング — Vue.js - 基本的な使い方に各種要素の使い方が記載せれてますが、 methods にロジックを追加せずとも双方向データバインディングできるのはマジで便利。

コンポーネントを作る

Vueでは機能ごとのコンポーネントを作成してそれを組み合わせることによって画面を組みたてることができるので、そのパーツを作ってみました。

以下のように Vue のインスタンスの内部でコンポーネントを追加します。

new Vue({
    // describe options
    el: '#app',
},
// componentを作成
Vue.component('item', {
    template: '<div><span v-html="content"></span> world</div>',
    props: ['content']
}))

※ #appにVueがマウントされている必要があります。

props

テンプレに値を渡すときには props を使います。 props にproperty名を指定しておくと、それをテンプレートにbindしてくれます。

API経由で取得した値なんかを props を使ってbindしておくとかに使えそうだなっと思いました。

まとめ

関わっているプロジェクトでも使っているのでVueの触りを学習し直してみましたが、ドキュメントの豊富と記法の容易さというのは非常に良い点だと思いました。
正直触りしかやってませんし、コンポーネントの考え方とvuexまで追いつかないといけないのでこれからですが、jqueryを脱CDN経由で入れれば実行環境問わないし、単純なプロジェクトで考えればこれでいいのではとも思ってます。
ライフサイクルも単純なのでマウント以前にAPI通信をするなど、各Vueのライフサイクルでやることをはっきりさせることができそうだなという印象も持っています。

もう少し色々触ってみたいと思います。

コードはこちら

github.com

emahiro/b.log

Drastically Repeat Yourself !!!!