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

组件化改造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 是模板，内容是 <li>todo item</li>。

使用 TodoItem 组件代替前面的 <ul><li v-for="item in list">{{item}}</li></ul>

写成 <todo-item v-for="item in list"></todo-item> 即可

但无论输入什么，输出都是 todo item，为解决这个问题

引入 v-bind ：向子组件传入绑定值；写成<todo-item v-bind:content="item" v-for="item in list"></todo-item>

在循环 list 的时候，把 list 的每个值赋值给 item ,再将 item 以 v-bind 的形式传给 todo-item(通过 content 变量传递)；

子组件接受内容： props:['content'] , 子组件可以接受到 content 的值，content 值是 item ，item 值是 list 的每一项 ,则

props 接收到了list 的每一项的值，则在 <li> 中显示出来即可，即 template:"<li>" + this.content + "</li>"

故将 template:"<li>" + this.content + "</li>" 改为 <li>{{content}}</li>

组件化代码（全局组件）

<!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>
        <todo-item v-bind:content="item" 
            v-for="item in list">
        </todo-item> 
    </div>

    <script>

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

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

局部组件

<!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>
        <todo-item v-bind:content="item" 
            v-for="item in list">
        </todo-item> 
    </div>

    <script>
        var TodoItem = {
            props:['content'],
            template:"<li>{{content}}</li>"
        }

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

将 TodoItem 注册到实例之中，原来是 TodoItem ，在实例中仍然是 TodoItem ，注册后再用 todo-item 即可

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

猜你喜欢