Vue2 Starter
ES6 + Vue.js jsFiddle Starter Template
by Christian Gambardella
http://gambardella.info/2016/11/03/jsfiddle-starter-for-vue-js/
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="(todo, i) in todos">
<label>
<input type="text">
</label>
<button v-on:click="delete1">
delete
</button>
</li>
</ol>
</div>
SCSS
#app {
margin-bottom: 20px
}
#note {
max-width: 340px
}
Babel + JSX
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
methods: {
delete1: function(){
this.todos.splice(0, 1);
},
toggle: function(todo){
todo.done = !todo.done
}
}
})