日頃の行い

個人的な日頃の行いをつらつら書いてます＼＼\\ ٩( 'ω' )و //／／

気分でMVVMライブラリ（？）のvue.jsを試してみた。

JavaScript

文章にするとなんか捗るなと気がついたので書こうと思います。

vue.jsという存在をさっき知り
やりたいなーって思ってもどうせ一生やらないので今試してみようと思いました←

vue.jsとは

vue.js

Vue.jsは軽量なMVVMライブラリらしいです。（以下より引用）
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog

MVVMってなんだ・・・？

Model View ViewModel - Wikipedia

ふむふむ。わかったようなわからんような。

とりあえず書いてみればいいと思いましたヾ(๑╹◡╹)ﾉ”

インストール

bowerいいよbower←
参考：パッケージマネージャーbowerを試してみた。 - 日頃の行い

$bower install vue --save

楽だなー

使い方（Getting Started)

オフィシャルサイトのコードを書いてみました。
Getting Started - vue.js

書いたコード
https://github.com/tarata/VueTry/tree/v0.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src='bower_components/vue/dist/vue.js'></script>
    <title></title>
    <style>
        body {
            font-family: Helvetica Neue, Arial, sans-serif;
        }

        li.done {
            text-decoration: line-through;
        }
    </style>
</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>
            var demo = new Vue({
                el: '#demo',
                data: {
                    title: 'todos',
                    todos: [
                    {
                        done: true,
                        content: 'Learn JavaScript'
                    },
                    {
                        done: false,
                        content: 'Learn vue.js'
                    }
                    ]
                }
            });
    </script>
</body>
</html>

なんかTODOリスト的なものできちゃった(・∀・)ｗ
とりあえず導入はやったのでこれ以降は明日とかやろうかなーと思います。