todolist组件拆分

xuxinwen32

于 2019-01-28 11:05:06 发布

阅读量218

点赞数

分类专栏：前端文章标签： todolist组件拆分

本文链接：https://blog.youkuaiyun.com/xuxinwen32/article/details/86673831

版权

前端专栏收录该内容

40 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist组件拆分</title>
    <script src="../2.5.20-vue.js"></script>   <!--//提前加载，避免出现抖屏-->
</head>
<body>

<div id="root">
    <div>
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
       <todo-item
       v-for = "(item, index) of list" :key="index"
       :content = "item"
       ></todo-item>
    </ul>
</div>

<script>


    Vue.component("todo-item", {         //全局定义的组件
//        props: ['content'],          //我这个小组件定义接收从外面传过来的content的属性值
        template: '<li>{{content}}</li>'
    });
 /*   var TodoItem = {           //局部变量定义的组件
        template: '<li>item</li>'
    }*/
    new Vue({
        el: '#root',  /**创建vue的实例，接管id等于root的内容*/
        data: {
            inputValue: "",
            list: []
        },
        methods: {
            handleSubmit(){
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }

    })
</script>

</body>
</html>