vue2 基础学习03 （Vue组件的进一步理解）

时间 2019-11-21

标签 vue2 vue 基础学习组件进一步理解繁體版

原文原文链接

今天看了慕课网的一个教学视频 Vue入门感受清晰了不少

首先引入一个简单的todolist案例

初始化项目（引入vue.js部分省略）vue-cli

<!-- 挂载点 -->
    <div id="app"> 
        
    </div>

    <script>
        var app = new Vue({
            el: '#app', //经过id选择器挂载上去 
        })
    </script>

初始化数据，遍历输出数组

<!-- 挂载点 -->
    <div id="app"> 
        <!--  -->
        <div>
            <input type="text" >
            <button>添加任务</button>

            <ul >
                <li v-for="(item, index) in list" :key="index">{{item}}</li>
            </ul>
        </div>
       
    </div>

    <script>
        var app = new Vue({
            el: '#app', //经过id选择器挂载上去 
            data(){     //介意这样写data，由于在后面的vue-cli里面就是这样写的 自我理解
                return{
                    list:[1,2,3]   // 先把写死后面再更改
                }
            }
        })
    </script>

如下是效果：app

接下来就是动态添加数据了ide

<!-- 挂载点 -->
    <div id="app"> 
        <!--  -->
        <div>
            <input type="text" v-model="listValue">
            <button v-on:click="addList">添加任务</button>

            <ul >
                <li v-for="(item, index) in list" :key="index">{{item}}</li>
            </ul>
        </div>
       
    </div>

    <script>
        var app = new Vue({
            el: '#app', //经过id选择器挂载上去 
            data(){     //介意这样写data，由于在后面的vue-cli里面就是这样写的 自我理解
                return{
                    list:[],   // 先把写死后面再更改，
                    listValue:'' // 把这个值双向绑定在 input中
                }
            },
            methods: {
                addList:function(){
                    this.list.push(this.listValue)   //往数组中push数据，数据来源是input中的值
                    this.listValue = ''             //添加完以后记得将input中间数据清空
                }
            }
        })
    </script>

以上涉及数据的双向绑定

如下是将todolist应用进行了组件化

对todolist组件进行拆分。组件化

<div id="app">
        <div>
            <input v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
     
            <todo-item 
            v-for="(item, index) in list" 
            :key="index" 
            :content="item" 
            :index="index"
            @delete='handleDelete'
            >
            </todo-item>
        </ul>
    </div>

    <script>
        //全局组件 
        Vue.component('todo-item', {
            props:['content','index'],//至关于接收父节点的属性
            template: ` <li v-on:click="handleClick">{{content}}{{index}}</li>`
            ,
            methods:{
                handleClick:function(){
                    this.$emit('delete',this.index)//至关于传递给父类
                }
            }
        })


        // //局部组件
        // var toDoItem = {
        //     template: `<li >item</li>`
        // }

        var app = new Vue({
            el: '#app',
           
            //局部组件的声明
            // components: {
            //     'todo-item': toDoItem
            // },
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ""
                },
                handleDelete: function(index){
                   this.list.splice(index,1)
                }
            }
        })

总结：学习

子组件向父组件传递参数：经过绑定属性的形式
父组件向子组件：发布订阅模式

这一块准备在后面的文章中将组件间通讯单独拎出来分析。加深本身的理解。