vue.js学习（二）

1、简单的todoList()
实现输入框输入值显示在下方，每添加一次，清空输入框。

    <div id="root">
         <input  v-model="inputValue"/>
         <button @click="handleClick">change</button>
         <Ul>
            <li v-for="(item,index) of list " :key="index">{{item}}</li>
         </ul>
    </div>

    <script>
    
    new Vue({
        el:"#root",
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            }
        }
    })
    </script>

2、组件
组件：页面上的某一部分，
把li标签作为一个组件，先定义一个组件

         <ul>
            <todo-item > </todo-item>
         </ul>

在js中，定义一个全局组件，

    //全局组件
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>item</li>'
    })

界面显示一个li标签内容

image.png

我们依旧想每次在input框中输入内容后点击按钮，添加一个li标签显示输入的内容，那么组件中也循环添加list；其中循环时我们调用这个模版时候，通过属性的方式传参，定义一个content属性，值为循环每一项的内容（item）

        <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            > 
            </todo-item>
         </ul>

此时，在模版中直接写{{content}}是不行的，组件必须接收这个属性，因此需要定义一个props的属性，值为数组，可以将content写在这里，就可以应用了，代码如下：

      //全局组件
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>item</li>'
    })

以上是全局组件，我们也可以定义局部组件，vue中需要定义components，就是应用局部组件了

    //局部组件
    var todoItem = {
        props:['content'],
        template:'<li>{{content]}}</li>'
    }

    new Vue({
        el:"#root",
        components:{
            'todo-item':todoItem
        },
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            }
        }
    })

全局组件和局部组件的完整代码如下，以供参考：

    <div id="root">
         <input  v-model="inputValue"/>
         <button @click="handleClick">change</button>
         <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            > 
            </todo-item>
         </ul>
    </div>      
    <script>
    //全局组件
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>item</li>'
    })
    
    //局部组件
    var todoItem = {
        props:['content'],
        template:'<li>{{content}}</li>'
    }

    new Vue({
        el:"#root",
        components:{
            'todo-item':todoItem
        },
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            }
        }
    })
    </script>

组件也是一个实例，在组件中也可以添加methods,data等

    //局部组件
    var todoItem = {
        props:['content'],
        template:'<li @click="clickhere">{{content}}</li>',
        methods:{
            clickhere:function(){
                alert()
            }

        }
    }

---

实现tudoList删除功能（父子组件相互传值）
功能实现:input添加的li标签，点击后删除该项。
在子组件模版中添加点击事件，子组件数据删除，是需要将父组件中list对应的一项删除，因此点击时候需要子组件与父组件通信：发布订阅模式，不要忘了子组件需要接受点击项的下表 （index），在props里记得添加上index，模版中也记得加上参数；

        <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete"
            > 
            </todo-item>
         </ul>

通知父组件把需要的项删掉：this.$emit方法，出发delete事件，并吧index传递出去，父组件中需监听并出发父组件的方法，添加@delete="handleDelete"
则需添加

//局部组件
    var todoItem = {
        props:['content','index'],
        template:'<li >{{content}}</li>',
        methods:{
            clickhere:function(){
                this.$emit('delete',this.index)
            }

        }
    }

之后在父组件中，添加上handleDelete方法，获取index参数值，并应用splice将对应项删除，完成
完整代码：

    <div id="root">
         <input  v-model="inputValue"/>
         <button @click="handleClick">change</button>
         <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete"
            > 
            </todo-item>
         </ul>
    </div>      
    <script>
    //局部组件
    var todoItem = {
        props:['content','index'],
        template:'<li @click="clickhere">{{content}}</li>',
        methods:{
            clickhere:function(){
                this.$emit('delete',this.index)
            }

        }
    }

    new Vue({
        el:"#root",
        components:{
            'todo-item':todoItem
        },
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            },
            handleDelete:function(index){
                this.list.splice(index,1)
            }
        }
    })
    </script>