Vue学习8

ToDoList案例

app.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">

      <MyHeader :addt='add'/>
      <MyList :todos='todos' :changecheck='changecheck' :deleteT='deleteT'/>
      <MyFooter :todos='todos' :checkC='checkC' :deleteA='deleteA'/>

    </div>
  </div>

</template>

<script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter'

export default {
  name: 'App',
  components: {MyHeader,MyList,MyFooter},
  data(){
    return {
      todos:[
        {id:'001',thing:'写作业',done:true},
        {id:'002',thing:'看电视',done:false},
        {id:'003',thing:'看小说',done:false},
      ]
    }
  },
  methods:{
    add(ntodo){
      this.todos.unshift(ntodo);
    },
    changecheck(cid,ncheck){
      for (var todo of this.todos){
        if(todo.id==cid){
          todo.done=ncheck
        }
      }
    },
    deleteT(id){
      this.todos=this.todos.filter((todo)=>{
        return todo.id!=id
      })
    },
    checkC(val){
      for (var todo of this.todos){
        todo.done=val;
      }
    },
    deleteA(){
      this.todos=this.todos.filter((todo)=>{
        return !todo.done
      })
    }
  }  
}

</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>

MyHeader.vue

<template>
    <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="addtodo"/>
    </div>
</template>

<script>
export default {
    name:'MyHeader',
    props:['addt'],
    methods:{
      addtodo(e){
        const ntodo={
          id:Math.random(),
          thing:e.target.value,
          done:false,
        };
        this.addt(ntodo);
        e.target.value='';
      }
    } 
}
</script>

<style scoped>
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

</style>

MyList.vue

<template>
  <ul class="todo-main">
    <MyItem v-for='todo in todos' :key='todo.id' :todo='todo' :changecheck='changecheck' :deleteT='deleteT'></MyItem>
  </ul>
</template>

<script>   
import MyItem from './MyItem'
export default {
    name:'MyList',
    components:{MyItem},
    props:['todos','changecheck','deleteT']
}
</script>

<style scoped>
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}


</style>

 MyItem.vue

<template>
      <li>
      <label>
          <!-- 让标签拥有动态的属性 -->
        <input type="checkbox" :checked='todo.done' @change="changeCheck" :id='todo.id'/>
        <span>{{todo.thing}}</span>
      </label>
      <button class="btn btn-danger" @click='deleteTodo(todo.id)'>删除</button>
    </li>
</template>

<script>
export default {
    name:'MyItem', 
    props:['todo','changecheck','deleteT'],
    methods:{
        changeCheck(e){
            this.changecheck(e.target.id,e.target.checked)
        },
        deleteTodo(id){
            if(confirm('确定删除吗')){
                this.deleteT(id)
            }
        }
    }
}
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover {
  background-color: #ddd;  
}
li:hover button{
    display: block;
}
</style>

MyFooter.vue

<template>
        <div class="todo-footer">
        <label>
          <input type="checkbox" :checked='checkT' @change="checkc"/>
        </label>
        <span>
          <span>已完成{{doneTotal}}</span> / 全部{{todos.length}}
        </span>
        <button class="btn btn-danger" @click="deleteAll">清除已完成任务</button>
      </div>
</template>

<script>
export default {
    name:'MyFooter',
    props:['todos','checkC','deleteA'],
    computed:{
        doneTotal(){
            var t=0;
            for(var todo of this.todos){
                if(todo.done==true){
                    t++
                }
            }
            return t
        },
        checkT(){
            return this.doneTotal==this.todos.length && this.todos.length!=0
        },
    },
    methods:{
        checkc(e){
            this.checkC(e.target.checked)
        },
        deleteAll(){
            this.deleteA()
        }
    }
}
</script>

<style>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}

</style>

 案例总结

props适用于父组件向子组件通信以及子组件向父组件通信（要求父组件先给子组件一个函数）

 

组件化编码流程

拆分静态组件：组件按照功能点拆分，命名不要和html元素冲突

实现动态组件：考虑好数据存放的位置，如果数据是一个组件在用，则放在组件自身上，如果是一些组件在用，则放在其共同父组件上

实现交互：从绑定事件开始