Vue.js Quick Example

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li
            v-repeat="item : todos"
            v-on="click: toggleDone(item)"
            v-class="{done: item.done}"
        >
            <span v-html="item.content"></span>
        </li>
    </ul>
</div>

CSS

body {
    font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
    text-decoration: line-through;
}

JavaScript

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