2018-07-22 局部组件的使用2

2018-07-22  本文已影响0人  无欲而为
  <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='../vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inputValue' >
        <button v-on:click = 'handleBtnClick'>提交</button>
        <ul id="list" >
            <!-- <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 vm = new Vue({
            components : {
                TodoItem :TodoItem
            },
            el:'#app',
            data:{
                list:[],
                inputValue:''
            },
            methods:{
                handleBtnClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue= ''
                }
            }
        })

    </script>
</body>
</html>

局部组件需要注册到Vue实例之中才可以使用

模版和传值的封装 template 和 props

一个逗号的小Bug

上一篇 下一篇

猜你喜欢

热点阅读