Vue.js Quick Example

by ksumarine

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li v-repeat="todos" v-on="click: done = !done" class="{{done ? 'done' : ''}}">
            {{content}}
        </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: [] //testing with data use: [{done:false,content:'testing'}]
    }
})