大したこと書いてません。
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イベントに登録します。登録の仕方は以下の2つの記法があります。
<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のライフサイクルでやることをはっきりさせることができそうだなという印象も持っています。
もう少し色々触ってみたいと思います。
コードはこちら