一个简单的Todolist

最新推荐文章于 2023-10-31 12:29:28 发布

weixin_34218579

最新推荐文章于 2023-10-31 12:29:28 发布

阅读量184

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b19216ae51d4506b80e7069

版权

实现一个简单的Todolist

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <li v-for="(item,index) of list" :key="index">
            {{item}}
        </li>

    </ul>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function () {
                this.list.push(this.inputValue),
                    this.inputValue=''
            }
        }
    })
</script>

</body>
</html>
复制代码

#在调试的过程中发现输入文本框的值始终无法循环,原因就是插值表达式{{item}}的两对花括号使用了中文格式下的括号

注册全局组件的语法

Vue.component('todo-item',{
    template:'<li>item</li>'
})
复制代码

一个vue组件就是一个vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <!--li v-for="(item,index) of list" :key="index">
            {{item}}
        </li-->
        <todo-item v-for="(item,index) of list"
        :key="index"
        :content="item">
        </todo-item>

    </ul>
</div>
<script>
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>{{content}}}</li>'
    })

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },

        methods:{
            handleSubmit:function () {
                this.list.push(this.inputValue),
                    this.inputValue=''
            }
        }
    })
</script>

</body>
</html>
复制代码

props:声明模板中的值可以传递

子组件和父组件之间的通信: 子组件通过发布一个事件,正好父组件监听了这个事件,然后子组件通过索引传递给父组件对应的下标值,父组件通过下标找到对应的数据然后删除

  @delete="handleDelete">
  
  template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function () {
                this.$emit('delete',this.index);
            }
            
             handleDelete:function (index) {
                this.list.splice(index,1);
            }
复制代码

父组件和子组件的通信:通过属性

 props:['content','index'],
 
  <todo-item v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete">
        </todo-item>
复制代码

实例源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <!--li v-for="(item,index) of list" :key="index">
            {{item}}
        </li-->
        <todo-item v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete">
        </todo-item>

    </ul>
</div>
<script>
    Vue.component('todo-item',{
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function () {
                this.$emit('delete',this.index);
            }
        }
    })

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },

        methods:{
            handleSubmit:function () {
                this.list.push(this.inputValue),
                    this.inputValue=''
            },
            handleDelete:function (index) {
                this.list.splice(index,1);
            }
        }
    })
</script>

</body>
</html>
复制代码

scoped:对单前组件有效,一般倾向样式前面加这个

转载于:https://juejin.im/post/5b19216ae51d4506b80e7069

weixin_34218579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的Todolist

实现一个简单的Todolist<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Todolist</title></head><body><script src="https://cd...
复制链接

扫一扫