Vue-TodoList组件化思维

作者: 秋玄语道 | 来源:发表于2019-03-24 23:26 被阅读0次

Vue-TodoList组件化思维
封装组件-面向对象
时间价值催化剂：组件化复利思维
Android组件化 - gradle配置（一）
B端组件化思考-基本规范篇
Android：插件化
iOS 组件化实战篇（私有库）
iOS组件化
vue零基础开发004——todolist组件化
Android组件化方案思路

一、全局组件化

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" name="" v-model="valueText">
            <button @click='handleBtnClick()'>提交</button>
        </div>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script type="text/javascript">
         Vue.component("TodoItem",{
            props:['content'],
            template:"<li>{{content}}</li>"
         });
        var app =new Vue({
            el:"#app",
            data:{
               valueText:'',
               list:[]              
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.valueText);
                    this.valueText = '';
                }
            }
        })
    </script>
</body>
</html>

二、局部组件化

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" name="" v-model="valueText">
            <button @click='handleBtnClick()'>提交</button>
        </div>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script type="text/javascript">
        var TodoItem={
            props:['content'],
            template:"<li>{{content}}<li>"
        }
        var app =new Vue({
            el:"#app",
            components:{
                TodoItem:TodoItem
            },
            data:{
               valueText:'',
               list:[]              
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.valueText);
                    this.valueText = '';
                }
            }
        })
    </script>
</body>
</html>

三、子组件给父组件传值

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" name="" v-model="valueText">
            <button @click='handleBtnClick()'>提交</button>
        </div>
        <ul>
            <todo-item :content="item" :index="index" v-for="(item,index) in list"
                           @delete="handleItemDelete"></todo-item>
        </ul>
    </div>
    <script type="text/javascript">
        var TodoItem ={
            props:['content','index'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit("delete",this.index);
                }
            }
        }
        var app =new Vue({
            el:"#app",
            components:{
                TodoItem:TodoItem
            },
            data:{
               valueText:'',
               list:[]              
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.valueText);
                    this.valueText = '';
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <counter :count="0" @change="handleIncrease"></counter>
    <counter :count="1" @change="handleIncrease"></counter>
    <div >{{total}}</div>
</div>
    <script>
        var counter ={
            props:['count'],
            data:function(){
                return{
                    number: this.count
                }
            },
            template:'<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick:function () {
                    this.number=this.number + 2;
                    this.$emit('change',2);
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components:{
                counter:counter
            },
            data: {
                total: 1
            },
            methods: {
                handleIncrease:function (step) {
                    this.total += step
                }
            }
        })
    </script>
</body>
</html>