首页 > 其他分享 >Vue学习-基础-尚硅谷vue-todolist学习-组件开发入门

Vue学习-基础-尚硅谷vue-todolist学习-组件开发入门

时间:2023-01-04 17:46:18浏览次数:46  
标签:Vue 里面 todolist 数据 item vue 组件 todo

1,编写静态组件  :抽取组件,使用组件实现静态页面效果     

这里组件中的 component     style    部分 使用的静态页面粘贴过来的   , 

这里的MyItem 是 MyList的子组件 。

 

 这是在组件确定后,将组件导入到App.vue 里面的代码,导入的组件都是App.vue的子组件,所以,item组件在List那个组件中导入

 

2,展示动态数据     有一堆数据,就用数组存,数据属性多就存入对象

        2.1 ,数据的类型,名称

   2.2 数据保存在哪个组件

我们在List组件里面的data 加入数据

 

 

 然后要将数据遍历,并传到item,然后进行显示

  

 

 

 在list的item标签里面,使用的是v-for进行循环遍历,将遍历的数据对象存作todoObj,将todoObj里面的id作为key值,

:todo="todoObj",将数据传到item里面,并将变量命名todo,

 

 这里就是item组件里面使用props接收

 

 然后在这里用插值语法进行显示,,然后显示前面的复选框里面是否选中,

  在vue里面如何让一个标签动态拥有某个属性,v-bind,引号后面的是表达式了    3,实现添加todo栏  

 

 以上就是将input中输入获取到了后包装生成一个todo对象,然后需要给他加入到 list  的数组里面,这里就是涉及到

    兄弟组件之间的数据传递: 有很多方法,这里用最基础的,以后学习了在补充

 

子组件header传递数据到app组件,

 

标签:Vue,里面,todolist,数据,item,vue,组件,todo
From: https://www.cnblogs.com/hongming-gonghan/p/17024807.html

相关文章