
<!DOCTYPE html> |
<html> |
<head> |
<meta charset="utf-8"> |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
<title>Examples</title> |
<meta name="description" content=""> |
<meta name="keywords" content=""> |
<link href="" rel="stylesheet"> |
<script type="text/javascript" src="vue.js"></script> |
</head> |
<body> |
<div id="app"> |
<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> |
<script type="text/javascript"> |
var vm = new Vue({ |
el: '#app', |
data: { |
newTodo: '', |
todos: [ |
{ text: 'Add some todos' } |
] |
}, |
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) |
} |
}, |
created: function () { // 钩子 |
// `this` 指向 vm 实例 |
console.log('a is: ' + this.a) |
} |
}); |
console.log(vm.$data); |
console.log(vm.$el); // == document.getElementById('app') |
</script> |
</body> |
</html> |



