1 Hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script type="text/javascript">
// var dom = document.getElementById('app');
// dom.innerHTML = "hello world"
// setTimeout(function(){
// dom.innerHTML = 'bye world'
// },2000)
var app = new Vue({
el: '#app',
data: {
content: 'hello world'
}
})
setTimeout(function() {
app.$data.content = 'bye world'
}, 2000)
</script>
</body>
</html>
2 TodoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function(){
// alert(this.inputValue);
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
3 TodoList 改进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" name="" v-model="todoValue">
<button @click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemClick">
</todo-item>
</ul>
</div>
<script type="text/javascript">
// 全局组件
// Vue.component("TodoItem",{
// props: ['content'],
// template: "<li>{{content}}</li>"
// })
// 局部组件
var TodoItem = {
props: ['content', 'index' ],
template: "<li @click='handleItemClick'>{{content}}</li>",
methods: {
handleItemClick: function(){
this.$emit("delete", this.index) // 子组件向父组件传值
}
}
}
var app = new Vue({
el: '#root',
components:{ // 局部组件的注册
'TodoItem': TodoItem
},
data: {
list: [],
todoValue: ''
},
methods: {
handleBtnClick: function(){
// alert(this.todoValue);
this.list.push(this.todoValue)
this.todoValue = ''
},
handleItemClick: function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
