1.在空文件夾中打開終端 輸入指令： vue init webpack 項目名
2. cd? 項目名
3.下載依賴包? cnpm install
4.啟動服務(wù)器測試vue腳手架 npm run dev
5.任意組件內(nèi)寫即可恢氯，拿我來說霎苗，我就在App.vue組件內(nèi)寫的叛赚。代碼如下
<template>
? <div class="todo">
? ? ? <h3>ToDoList</h3>
? ? ? <input type="text"? v-model="task"? @keyup.enter="add"? >
? ? ? <div>
? ? ? ? ? ? <h3>正在進行? ? {{ count1 }} </h3>?
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li v-for="(item,index) of list"? v-if="!item.del && !item.done" :key="item.id" >
? ? ? ? ? ? ? ? ? ? ? <input type="checkbox"? v-model="item.done"? >
? ? ? ? ? ? ? ? ? ? ? <p style="display:inline-block"> {{ item.title }} </p>
? ? ? ? ? ? ? ? ? ? ? <button @click="del(item.id)" >X? {{ item.id }}</button>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? </div>
? ? ? ? ? ? ? <div>
? ? ? ? ? ? <h3>已經(jīng)完成 {{ count2 }}</h3>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li v-for="item of list2" :key="item.id">
? ? ? ? ? ? ? ? ? ? ? <input type="checkbox"? v-model="item.done"? >
? ? ? ? ? ? ? ? ? ? ? <p style="display:inline-block"> {{ item.title }} </p>
? ? ? ? ? ? ? ? ? ? ? <button @click="del(item.id)">X? {{ item.id }}</button>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? </div>
? </div>
</template>
<script>
export default {
? components:{},
? props:{},
? data(){
? ? return {
? ? ? ? task:"",
? ? ? ? list:[]
? ? }
? },
? watch:{},
? computed:{
? ? ? list2(){
? ? ? ? ? ? return this.list.filter(function(item){
? ? ? ? ? ? ? ? return item.done&&!item.del? //item.done==true 返回正在進行 任務(wù)中 done為true(即已打√)
? ? ? ? ? ? })
? ? ? },
? ? ? count1(){
? ? ? ? ? ? ? ? let n = 0;
? ? ? ? ? ? ? ? for(let i=0;i<this.list.length;i++){ //input框添加到正在進行任務(wù)中未打鉤 和 未刪除 任務(wù)數(shù)量
? ? ? ? ? ? ? ? ? ? if(this.list[i].done == false && !this.list[i].del ){
? ? ? ? ? ? ? ? ? ? ? ? ? n++
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return n;
? ? ? },
? ? ? ? ? count2(){
? ? ? ? ? ? ? ? let n = 0;
? ? ? ? ? ? ? ? for(let i=0;i<this.list.length;i++){
? ? ? ? ? ? ? ? ? ? if(this.list[i].done == true && !this.list[i].del ){? //正在進行任務(wù)中打鉤 和 已完成任務(wù)中未刪除 任務(wù)數(shù)量
? ? ? ? ? ? ? ? ? ? ? ? ? n++
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return n;
? ? ? }
? },
? methods:{
? ? add(){
? ? ? ? var task =? this.task;
? ? ? ? var id = this.list.length + 1//因為已完成中的每一項 并不是 已完成的每一項的索引 ，所以手動添加 id偏竟，來獲取id所對應(yīng)的獨一無二的數(shù)據(jù)
? ? ? ? this.list.unshift({id:id,title:task,done:false,del:false}); //在數(shù)組頭添加? done:false 為未打鉤 del:false 為未刪除
? ? ? ? this.task = ""
? ? },
? ? del(n){
? ? ? ? //this.list.splice(n,1)
? ? ? ? //this.list[n].del = true
? ? ? ? //找到對應(yīng)id的索引
? ? ? ? var index = this.list.findIndex(function(item){
? ? ? ? ? ? return? item.id == n
? ? ? ? })
? ? ? ? //alert(index)
? ? ? ? //改變狀態(tài)
? ? ? ? this.list[index].del = true
? ? }
? },
? created(){
? ? ? ? ? // this.$watch('list',function(){
? ? ? ? //? ? localStorage.setItem('list',JSON.stringify(this.list))
? ? ? ? // },{deep:true})
? },
? mounted(){
// console.log(JSON.parse(localStorage.getItem('list')))
? ? ? ? // if(localStorage.getItem('list')){
? ? ? ? //? ? this.list=JSON.parse(localStorage.getItem('list'))
? ? ? ? // }
? }
}
</script>
<style scoped>
</style>
在瀏覽器顯示如下：
??? 此樣式有些簡單谨垃，可按自己喜歡的來哦Ｑ⒂铡匿沛！
