最近准备快速复习一下Vue,做几个小DEMO来复习一下

写个todolist

使用v-model进行数据的双向绑定,当input里面的内容发生变化,vue实例里的inputValue也发生变化,同理当input.value发生变化时input的也会变化

使用Vue.js进行数据绑定以及父子组件传值

 

使用Vue.js进行数据绑定以及父子组件传值

 给按钮绑定的点击事件添加上把input的内容添加到列表数组中,基本的todolist就完成了

 使用Vue.js进行数据绑定以及父子组件传值

 

接下来把列表项组件化,使用Vue.component新建一个全局组件,使用组件循环列表

使用Vue.js进行数据绑定以及父子组件传值

接下父组件通过content变量向子组件传递内容,同时组件内部使用props去接收这个变量

 使用Vue.js进行数据绑定以及父子组件传值

使用vue.component定义的是一个全局组件,接下来把这个全局组件改写成局部组件

使用Vue.js进行数据绑定以及父子组件传值

接下来如果子组件需要向父组件传值,即点击每一项item需要在父组件接收到每一项的值和索引,通过获取到的索引把对应点击的哪一项删除

 首先给子组件的模板中绑定一个点击事件

 使用Vue.js进行数据绑定以及父子组件传值

和微信小程序相似, 删除子组件的时候需要把对应的内容传递到父组件,在小程序中使用triggerEvent,而在vue中使用$emit

使用Vue.js进行数据绑定以及父子组件传值

改一下代码在vue中v-on可以使用@代替,v-bind可以使用:代替,最终代码如下:

使用Vue.js进行数据绑定以及父子组件传值

 

相关文章:

  • 2021-11-11
  • 2022-12-23
  • 2021-11-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-06-25
  • 2021-10-15
  • 2022-12-23
  • 2022-12-24
  • 2021-05-25
  • 2022-12-23
相关资源
相似解决方案