チャット開発。今度はクライアントサイドvue.js

なんとなくいい感じに、動くようになってきているので、今度はクライアントサイドをもう少しカッコよく。

Angular.jsにしようかなと思っていたら http://blog.kzfmix.com/entry/1402486345

vue.jsというのがあるらしく。そっちにしてみようかな。 Backbone.jsも脳内キャッシュからページアウトしてしまっているのでどうせならＭＶＣ変えてみようというわけで。

動かない動かないと焦っていたら、javascriptを置く場所がheaderだったからだ。。テンプレートをよみこんだ後でないといけないんですね。だから、bodyの閉じる前に移したらすんなり動いた。感動。

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to the Mojolicious real-time web framework!</title>
    <script src="/js/vue.min.js"></script>
  </head>
  <body>
  <div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li
            v-repeat="todos"
            v-on="click: done = !done"
            class="{{done ? 'done' : ''}}">
            {{content}}
        </li>
    </ul>
  </div>  
  <script src="/js/test.js"></script>
  </body>
</html>

test.js

var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [
            {
                done: true,
                content: 'Learn JavaScript'
            },
            {
                done: false,
                content: 'Learn vue.js'
            }
        ]
    }
})

それにしても、魔法のようにすっきり書けるものだ。こりゃ便利です。シングルページレイアウトのチャットアプリであれば、十二分に対応できると思われます。

鈍足ランナーのＩＴ日記

走るのが好きな5流のＩＴエンジニアのブログ。

チャット開発。今度はクライアントサイドvue.js