VUE.js [demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app1">
{{ message }}
</div>
<div id="app2">
<p >{{message+err.tect}}</p>
<input v-model="err.tect">
</div>
<div id="app3">
<ul>
<li v-for="todo in todos">
{{ todo.text}}
</li>
</ul>
</div>
<div id="app4">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div id="app5">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el: '#app1',
data: {
message: 'Hello Vue.js!'
}
})
new Vue({
el: '#app2',
data: {
message: 'Hello Vue.js!',
err: {tect:"dsf"}
}
})
new Vue({
el: '#app3',
data: {
todos: [
{ text: 'Learn JavaScript',text_1: 'Learn Vue.js' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
new Vue({
el: '#app4',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message+"2222";
}
}
})
new Vue({
el: '#app5',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos11111' },
{ text: 'Add some todos2222' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
};
</script>
</html>