[JavaScript知识库]day01Vue案例

day01Vue案例

1.分析todolist案例

可以将此案例分为三个组件，其中list组件里包含item组件，如下图

即应该在app中引入三个组件

import Header from './component/MyHeader.vue'
import MyFooter from './component/Footer.vue'
import List from './component/List.vue'

2.实现

2.1在输入栏中利用v-model进行输入栏数据的双向绑定,通过@keyup.enter="add"实现回车确认添加选项

data() {
        return {
            title:''
        }
    },
    methods: {
        add(){
               const todoObj = {id:nanoid(),title:this.title,status:false}
               this.addTodos(todoObj)
        }
    },

引入nanoid作为id，将生成的对象通过属性传入到App中，即利用props，在app事先准备好方法，即addTodos。

methods: {
            addTodos(todos){
                this.todo.unshift(todos)
            },

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

2.2将数据展示到list中，并实现check状态的改变以及删除列表选项

通过v-for对MyItem组件进行遍历，实现选项的展示，并将每次遍历的对象传给子组件，子组件item可以通过props进行接收。

<MyItem v-for="todoObj in todos" 
    :key="todoObj.id" 
    :todo='todoObj'
    ></MyItem>

<label>
    <input type="checkbox" :checked="todo.status" @change="changeStatus(todo.id)"/>
    <span>{{todo.title}}</span>
</label>

此时将改变状态的id传给APP组件，在App组件通过遍历改变选项状态

bossChangeStatus(id){
                 this.todo.forEach((todos)=>{
                     if(id===todos.id) todos.status = !todos.status
                 })
            },

删除选项也是类似改变选项状态一样，通过App组件上预先设置好一个方法，再将方法的参数接收，通过bossDelete方法进行实现

bossDeleteButton(id){
                this.todo=this.todo.filter(todos=>todos.id!==id)
            },

2.3实现一个选项框控制其它选项框以及其它选项框全选控制总选项框的功能实现

这时候我们会想到v-model进行双向绑定，通过计算属性computed绑定ischecked.

<input type="checkbox" v-model="isChecked"/>

isChecked:{
        get(){
           return this.todosLength===this.completeChecked && this.completeChecked>0
        },
        set(a){
            console.log(a)
           this.todos.forEach((todo)=>{
               todo.status = a
           })
         }   
    }

2.4清空已经checked为true的选项框

预先在App中创建一个方法，通过props给footer组件传过来，在APP中实现功能

clearAllTodo(){
				this.todo = this.todo.filter((todos)=>{
					return !todos.status
				})
			}

3.结合localsession实现

data() {
        return {
          //通过localStorage获取选项
            todo:JSON.parse(localStorage.getItem("todo")) || []
        }
      },

watch:{
          //对todo实现监视
           todo:{
             //开启深度监视
             deep:true,
             handler(a){
               //将todo存储到localStorage中
                  localStorage.setItem("todo",JSON.stringify(a))
             }
            }  
        }

4.自定义组件事件

想要通过子组件传递数据到父组件有两种实现方式

1.通过props实现

2.通过自定义组件事件

<Student @xixi='getStudentName'/>

自定义事件适用于子组件传数据给父组件

5.安装事件总线

实现任何组件之间的数据传递，首先安装事件总线

new Vue({
    el:'#app',
    render:h => h(App),
    beforeCreate(){
        Vue.prototype.$bus=this  //安装全局事件总线
    }
})

调用事件总线

mounted() {
        //绑定事件总线hello
        this.$bus.$on('hello',(data)=>{
            console.log("这里是Shool",data)
        })
    },
    beforeDestroy() {
        this.$off('hello')
    },

methods: {
           //绑定事件总线hello
           getName(){
               this.$bus.$emit('hello',this.name)
           }
       },