新手上路,关于vue文档中不理解的内容

Question

刚开始学习vue 然后看文档 对于下面的这段话以及红圈中各个todo对应的关系并不是很能理解 希望有人能详尽指点下 万分感谢

Answer 1

最近也正在学习，希望能可以用我的理解给你描述清楚。 
选择id为demo的div作为vue的实例化区域，内部有todo-item组件，props是接收父类传入的参数，传入的是msg。于是需要在组件上绑定somemsg。v-bind可以省略，于是就可以写成:somemsg。

<div id="demo">
    <todo-item :somemsg="msg"></todo-item></div>

先来看 Vue.component 创建了一个组件

// 创建一个todo-item组件Vue.component('todo-item' ,{    props: ['somemsg'],    
template: '<div> {{somemsg}} </div>'})// 实例化Vuenew Vue({    el: '#demo',    data: {        
todos: [{            text: '内容一'
        }, {            text: '内容二'
        }],        msg: 'message信息'
    }
})

有了上面的理解，就可以继续把v-for结合起来理解了。v-for相当于就是一个for…of…遍历，遍历组件多次，每次绑定一个遍历出的todo给sometodo，sometodo就可以在子组件内部的props接收使用了。

<div id="demo">
    <todo-item :somemsg="msg"></todo-item>
    <todo-item v-for="todo in todos" :sometodo="todo"></todo-item></div>

// 创建一个todo-item组件Vue.component('todo-item' ,{    props: ['somemsg', 'sometodo'],    
template: '<div> {{ somemsg || sometodo.text }} </div>'})// 实例化Vuenew Vue({    el: '#demo',    data: {        
todos: [{            text: '内容一'
        }, {            text: '内容二'
        }],        msg: 'message信息'
    }
})

以上是最近学习的自己的理解，希望可以帮助到你。