这篇文章记录 vue 的第一个 demo todoList 的实现过程。
1.测试， 引入 vue 确保可以取到数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todoList</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="app">
hello {{test}}
</p>
<script>
new Vue({
el: '#app',
data: {
test: 'world!'
}
})
</script>
</body>
</html>
界面显示值：hello world
2.编辑HTML 实现界面
<p id="addItem">
<input type="text" v-model="newItem"/>
<button v-on:click="addNewItem()">add</button>
<ol>
<li v-for="(item,index) in inputData">
{{item}}
<button v-on:click="dele(index)">dele</button>
</li>
</ol>
</p>
3. 添加JS事件
<script>
var addItem= new Vue({
el: '#addItem',
data: {
inputData: [],
newItem: ''
},
methods: {
addNewItem: function() {
this.inputData.push(this.newItem);
this.newItem="" ;
},
dele:function(index){
this.inputData.splice(index,1)
}
}
});
</script>
4. 扩展新功能，添加已完成与未完成分类功能
HTML：
<p id="addItem">
<input type="text" v-model="newItem"/>
<button v-on:click="addNewItem()">add</button>
<ol>
<p>待完成：{{inputData.length}}</p>
<li v-for="(item,index) in inputData">
{{item}}
<button v-on:click="dele(index)">dele</button>
<button v-on:click="complete(index)">complete</button>
</li>
<p>已完成:{{comleteItem.length}}</p>
<li v-for="(item,index) in completeItem">
<del>{{item}}</del>
<button v-on:click="deleComplete(index)">dele</button>
</li>
</ol>
</p>
javascript:
<script>
var addItem= new Vue({
el: '#addItem',
data: {
inputData: [],
completeItem:[],
newItem: ''
},
methods: {
addNewItem: function() {
this.inputData.push(this.newItem);
this.newItem="" ;
},
dele:function(index){
this.inputData.splice(index,1)
},
complete:function(){
var comItem=this.inputData[index];
this.inputData.splice(index,1);
this.completeItem.push(comItem);
}
deleComplete:function(){
this.completeItem.splice(index,1);
}
}
}
});
</script>
