<!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> |