使用组件化思想改造TodoList (2-6)

最新推荐文章于 2021-10-12 07:44:39 发布

罗彬桦

最新推荐文章于 2021-10-12 07:44:39 发布

阅读量81

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45647118/article/details/113533141

版权

Vue 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

使用组件化思想改造TodoList

全局组件化
局部组件化

其实组件化，就是组件他的模板罢了。

 template: "<li>{{content}}</li>"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:content="item" 
                       v-for="item in list">            
            </todo-item>
        </ul>
    </div>    

    <script>

 		// 全局组件化
        // Vue.component("TodoItem", {
        //     props: ['content'],
        //     template: "<li>{{content}}</li>"
        // })

 		// 局部组件化
        var TodoItem = {
            props: ['content'],
            template: "<li>{{content}}</li>"
        } 

        var app = new Vue({
            el: '#root',
            components: {
                TodoItem: TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

罗彬桦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用组件化思想改造TodoList (2-6)

使用组件化思想改造TodoList全局组件化局部组件化其实组件化，就是组件他的模板罢了。 template: "<li>{{content}}</li>"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫

专栏目录