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

Question

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

Answer 1

最近也正在学习，希望能可以用我的理解给你描述清楚。&nbsp;选择id为demo的div作为vue的实例化区域，内部有todo-item组件，props是接收父类传入的参数，传入的是msg。于是需要在组件上绑定somemsg。v-bind可以省略，于是就可以写成:somemsg。<div&nbsp;id="demo"> &nbsp;&nbsp;&nbsp;&nbsp;<todo-item&nbsp;:somemsg="msg"></todo-item></div>先来看&nbsp;Vue.component&nbsp;创建了一个组件//&nbsp;创建一个todo-item组件Vue.component('todo-item'&nbsp;,{&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;['somemsg'],&nbsp;&nbsp;&nbsp;&nbsp; template:&nbsp;'<div>&nbsp;{{somemsg}}&nbsp;</div>'})//&nbsp;实例化Vuenew&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#demo',&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; todos:&nbsp;[{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;'内容一' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;'内容二' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:&nbsp;'message信息' &nbsp;&nbsp;&nbsp;&nbsp;} })有了上面的理解，就可以继续把v-for结合起来理解了。v-for相当于就是一个for…of…遍历，遍历组件多次，每次绑定一个遍历出的todo给sometodo，sometodo就可以在子组件内部的props接收使用了。<div&nbsp;id="demo"> &nbsp;&nbsp;&nbsp;&nbsp;<todo-item&nbsp;:somemsg="msg"></todo-item> &nbsp;&nbsp;&nbsp;&nbsp;<todo-item&nbsp;v-for="todo&nbsp;in&nbsp;todos"&nbsp;:sometodo="todo"></todo-item></div>//&nbsp;创建一个todo-item组件Vue.component('todo-item'&nbsp;,{&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;['somemsg',&nbsp;'sometodo'],&nbsp;&nbsp;&nbsp;&nbsp; template:&nbsp;'<div>&nbsp;{{&nbsp;somemsg&nbsp;||&nbsp;sometodo.text&nbsp;}}&nbsp;</div>'})//&nbsp;实例化Vuenew&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#demo',&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; todos:&nbsp;[{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;'内容一' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;'内容二' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:&nbsp;'message信息' &nbsp;&nbsp;&nbsp;&nbsp;} })以上是最近学习的自己的理解，希望可以帮助到你。