走进Vue的第四天

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todolist功能开发、组件拆分</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">

        <div>
            <input type="text" v-model="inputValue">
            <button @click="sub">提交</button>
        </div>
        <ul>
            <!--原始写法-->
            <li v-for="(item,index) in list">
                {{item}}
            </li>

            <!--使用全局组件,通过使用:content来进行传值-->
            <todo-item v-for="(item,index) in list" :key="index" :content="item"></todo-item>

            <!--使用局部组件-->
            <todo-tem v-for="(item,index) in list" :content="item"></todo-tem>
        </ul>

    </div>

    <script>
        //定义一个全局组件(使用props进行接值)
        Vue.component('todo-item',{
            props:['content'],
            template: '<li>{{content}}</li>'
        });

        //定义一个局部组件(需要在vue实例中关联使用components)
        var todoItem = {
            props:['content'],
            template:"<li>{{content}}</li>"
        };

        //vue实例
        new Vue({
            el:"#root",
            components:{
              'todo-tem':todoItem
            },
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                sub:function () {
                    //加入数组
                    this.list.push(this.inputValue);
                    //恢复文本框内容为空
                    this.inputValue = '';
                }
            }
        });
    </script>
</body>
</html>
猜你喜欢
