回归前端学习第16天——ＶＵＥ实现ToDoList

最新推荐文章于 2022-07-19 20:50:22 发布

Gib Gas!

最新推荐文章于 2022-07-19 20:50:22 发布

阅读量119

点赞数 1

分类专栏：前端学习文章标签： javascript vue.js html css

本文链接：https://blog.csdn.net/weixin_44584059/article/details/107853339

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

用VUE实现一个可以进行增删显示的ToDoList

v-model实现表单绑定双向数据绑定，组件接收值，界面反馈值的变化

 <input type="text" v-model="inputValue">

监听事件，点击触发，执行函数handleBtnClick

  <button @click="handleBtnClick">提交</button>

自定义组件TODOList，借助变量content.index.实现子组件的数据绑定，通过监听事件，点击触发delete事件执行handleItemDelete方法

<todo-list 
                v-bind:content="item"
                v-bind:index="index"
                v-for="(item,index) in list" 
                @delete="handleItemDelete"></todo-list>

通过对象建立子组件，需要在父组件中申明

 var TodoList={
        // 接收子组件传入的数据
        props:['index','content'],
        // 挂载到li标签，通过监听，点击触发事件，执行方法，并将item（content）的值显示出来
        template:"<li @click='handleItemDelete'>{{content}}</li>",
        methods:{
            // 将子组件的事件通过$emit向上传给父组件，当触发delete变量对应的事件时，将index作为参数传递出去
            handleItemDelete:function(){
                this.$emit("delete",this.index);
                // alert('ddd')
            }
}
    }

组件的申明

 var app=new Vue({
        // vue接管dom中的某个标签
        el:'#app',
        // 在父组件中申明子组件
        components:{
            TodoList:TodoList
        },
        data:{
            // 申明组件中出现的内容
         inputValue:'',
         list:[]

        },
        // 实现数据的增加,显示在list中
        methods:{
            handleBtnClick:function(){
                // alert('sss');
                // 表单的数据绑定,添加输入的数据
                this.list.push(this.inputValue);
                this.inputValue=""
            },
            handleItemDelete:function(index){
                // 删除列表中的某一项数据
                this.list.splice(index,1)
                // alert(index)
            }
        }
    })

注意：真正实现这个功能还需要导入一个ｖｕｅ．ｊｓ的文件，
整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="app">
        <div>
            <!-- v-model实现表单绑定 双向数据绑定，组件接收值，界面反馈值的变化-->
            <input type="text" v-model="inputValue">
            <!-- 监听事件，点击触发，执行函数 -->
            <button @click="handleBtnClick">提交</button>
        </div>
        <ul>
            <!-- 自定义组件TODOList，借助变量content.index.实现子组件的数据绑定 
                通过监听事件，点击触发delete事件执行handleItemDelete方法-->

            <todo-list 
                v-bind:content="item"
                v-bind:index="index"
                v-for="(item,index) in list" 
                @delete="handleItemDelete"></todo-list>
        </ul>
    </div>
<script>
    // 通过对象建立子组件，需要在父组件中申明
    var TodoList={
        // 接收子组件传入的数据
        props:['index','content'],
        // 挂载到li标签，通过监听，点击触发事件，执行方法，并将item（content）的值显示出来
        template:"<li @click='handleItemDelete'>{{content}}</li>",
        methods:{
            // 将子组件的事件通过$emit向上传给父组件，当触发delete变量对应的事件时，将index作为参数传递出去
            handleItemDelete:function(){
                this.$emit("delete",this.index);
                // alert('ddd')
            }
}
    }
    // 组件的申明
    var app=new Vue({
        // vue接管dom中的某个标签
        el:'#app',
        // 在父组件中申明子组件
        components:{
            TodoList:TodoList
        },
        data:{
            // 申明组件中出现的内容
         inputValue:'',
         list:[]

        },
        // 实现数据的增加,显示在list中
        methods:{
            handleBtnClick:function(){
                // alert('sss');
                // 表单的数据绑定,添加输入的数据
                this.list.push(this.inputValue);
                this.inputValue=""
            },
            handleItemDelete:function(index){
                // 删除列表中的某一项数据
                this.list.splice(index,1)
                // alert(index)
            }
        }
    })
</script>
</body>
</html>