初识 Vue（04）---(组件化改造TodoList)

最新推荐文章于 2022-12-24 12:33:04 发布

原创

最新推荐文章于 2022-12-24 12:33:04 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用Vue进行组件化改造，以TodoList为例。通过Vue.component创建全局组件TodoItem，并利用v-bind向子组件传递绑定值。在子组件中，通过props接收并显示父组件传递过来的list内容，实现组件化的功能。

组件化改造TodoList

原始代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <li v-for="item in list">{
  
  {item}}</li>
        </ul>  
    </div>

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

全局组件

Vue.component( ) 创建全局组件的方法

        Vue.component("TodoItem",{
            template:"<li>todo item</li>"
        })

创建全局组件，组件名字叫做"TodoItem", template 是模板，内容是

最低0.47元/天解锁文章