todolist(day_04)

總結：添加遺漏的footer並將其置於頁面底部，添加todolist的完成按鈕並綁定事件

 

1.main.js 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import header from './components/header'
import footer from './components/footer'
Vue.config.productionTip = false

Vue.component('app-header',header)
Vue.component('app-footer',footer)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

2.APP.vue

<template>
  <div id="app">
    <app-header></app-header>
    <todo :addSomething="addSomething"
          :selectTime="selectTime"
          :list="list"  
          :timeList="timeList"  
           
          @childUpdate='parentUpdate'
            >
    </todo>
    <done :doneThing="doneThing"         
            >  
    </done>
    <app-footer></app-footer>
  </div>
</template>

<script>
import todo from './components/todo';
import done from './components/done';
export default {
  name: 'App',
  components: {
    todo,
    done
  },
  data(){
    return{
      addSomething:"",
      selectTime:"",
      list:[],
      timeList:['8:00-9:00','9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00'],
      doneThing:[]
      
    }
  },
  methods:{
    // parentAdd(){
    //   this.$refs['add'].add()
    // },
    parentUpdate: function(list){
        // console.log(doneThing)
        this.doneThing.push(list)
        // console.log(this.list)
    }
        
  }
}
</script>

<style scoped>
    html,body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #ccc;
    }
    #app {
      position: relative;
      width: 100%;
      min-height: 100%;
      height: auto !important;
      height: 100%;
      padding-bottom: 50px;
      margin:0 auto;
      text-align: center;
      background: #ccc;
      box-sizing: border-box;
      overflow: hidden;
    }

</style>

 3.todo.vue

<template>
    <div class="todo">
        <select id="selectTime" v-model="currentTime" required>  
        <option value="" selected>選擇時間</option>
        <option v-for='item in timeList' :key=item.id>{{ item }}</option>
        </select>
        <input id="doSomething" type="text" v-model="currentSomething" required="required" placeholder="do something..."/><button @click="add">提交</button>  
        <br>
        <h1>ToDoList</h1>
        <ul>
            <li id="something" v-for='(value,index) in list' :key=index >
            ({{ index+1 }}){{ value.time }}&nbsp;&nbsp;&nbsp;{{ value.thing }}
            <button id="update" @click="update(index)">完成</button>
            </li>
        <!-- <li v-for=' in list' ></li> -->
        </ul>  
    </div>
</template>

<script>
export default {
    props:['addSomething','selectTime','list','timeList','doneThing'],
    // name: 'todo'
    data(){
        return{
            currentSomething: this.addSomething,
            currentTime: this.selectTime
            }
        },
    methods:{
        add:function(){

        if(this.currentTime == "" && this.currentSomething == ""){
            alert("Select Time & Input Something!")
        }
        else if(this.currentTime == ""){
            alert("Select Time!")
        }
        else if(this.currentSomething == "" ){
            alert("Input Something!")
        }
        else{
            // alert('startpush');
            this.list.push({time: this.currentTime, thing: this.currentSomething});
            this.currentSomething='';
            this.currentTime=""
            // alert('finishpush');
        }
        },
        update:function(index){
        //1.賦給完成事項
            // alert('startupdate');
            // this.doneThing.push(this.list[index])
            this.$emit("childUpdate",this.list[index])
            //2.移除待辦事項
            this.list.splice(index,1)
            // console.log(this.list)
            alert('Well Done!')
        },
    }   
}
</script>
<style scoped>
    .todo {
        width: 400px;
        margin: 0 auto;
    }
    button {
        height: 32px;
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 3px;
        background-color: #fff;
    }
    ul {
        padding-inline-start: 0px;
    }
    #update {
        float: right;
    }
    #selectTime {
        height: 32px;
        border-radius: 3px;
    }
    #doSomething {
        height: 25px;
        border-radius: 3px;
    }
    #something {
        display: inline-block;
        height: 34px;
        width: 400px;
        line-height: 34px;
        text-align: left;
        padding-left: 1em;
        margin-bottom: 10px;
        list-style-type: none;
        border-radius: 3px;
        -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
        background-color:#fff;
        overflow: auto;
  
}
    
</style>

4.footer.vue

<template>
    <div id="footer">
        <h5>{{ copyright }}</h5>
    </div>
</template>

<script>
export default {
    name:'app-footer',
    data(){
        return{
            copyright:"copyright@leonzhou"
        }
    }
}
</script>

<style scoped>
    #footer {
        height: 50px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background-color:grey;
    }
</style>