Vue.js Quick Example

by Riderman Sousa

HTML

<div id="demo" v-cloak>
    <p v-if="!todos.length">No todos at this moment.</p>
    <ul v-else>
        <todo v-for="t in todos" :text="t.content"></todo>
    </ul>
</div>

CSS

body {
    font-family: Helvetica Neue, Arial, sans-serif;
}
li.done {
    text-decoration: line-through;
}
[v-cloak] {
    display: none;
}

JavaScript

Vue.filter('capitalize', function (value) {
    if (!value) return ''
  	value = value.toString()
  	return value.charAt(0).toUpperCase() + value.slice(1)
})

Vue.component('todo', {
 		computed: {
    	captalizedText: function () {
      	return Vue.filter('capitalize')(this.text)
    	}
  	},
 		props: ['text'],
    template: '<li>{{ captalizedText }} + add 3 min ago</li>'
});

var demo = new Vue({
    el: '#demo',
    data: {
        todos: [{done:false,content:'testing'}]
    }
})