Vue3.0实现todolist-实现todolist每个组件需要的数据

Posted 2022-10-08

参考文档

参考视频：​​https://www.imooc.com/learn/1300​​

官方文档查看文档：​​https://v3.cn.vuejs.org/​​

Home

​

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import NavHeader from "@/components/navHeader/NavHeader.vue";
import NavMain from "@/components/navMain/NavMain.vue";
import NavFooter from "@/components/navFooter/NavFooter.vue";

//reactive定义对象类型的数据
import  defineComponent, reactive, toRefs  from "vue";

export default defineComponent(
  name: "Home",
  props: ,
  components: 
    NavHeader,
    NavMain,
    NavFooter,
  ,
  setup() 
    return 
    ;
  ,
);
</script>

<style>
</style>

NavHeader

​

<template>
  <div>
    <input placeholder="请输入任务名称" v-model="value" />
  </div>
</template>

<script>
import  defineComponent, ref  from "vue";
export default defineComponent(
  name: "navHeader",
  setup() 
    let value = ref("");

    return 
      value,
    ;
  ,
);
</script>

<style scoped>
</style>

NavMain

​

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div>
        <input type="checkbox" v-model="item.complete" />
         item.title 
        <button>删除</button>
      </div>
    </div>
  </div>
</template>

<script>
import  defineComponent, ref  from "vue";
export default defineComponent(
  name: "navMain",
  setup() 
    let list = ref([
      
        title: "吃饭",
        complete: false,
      ,
      
        title: "睡觉",
        complete: false,
      ,
      
        title: "打豆豆",
        complete: false,
      ,
    ]);

    return 
      list,
    ;
  ,
);
</script>

<style scoped>
</style>

NavFooter

​

<template>
  <div>
    <div>已完成 isComplete /全部 all </div>

    <div v-if="isComplete > 0">
      <button>清除已完成</button>
    </div>
  </div>
</template>

<script>
import  defineComponent, ref  from "vue";
export default defineComponent(
  name: "navFooter",
  setup() 
    let isComplete = ref(1);
    let all = ref(3);
    return 
      isComplete,
      all,
    ;
  ,
);
</script>

<style scoped>
</style>

在Home.vue里面，方法的定义和使用，这里上面是reactive定义的，下边是ref定义的

​

<div >num</div>
<div>num1</div>

​

setup() 
    let num1=ref(20)
    let data=reactive(
      num:22,
      name:wangting,
      age:28,
      obj:
        price:20
      ,
      att:[a,b,c,d]
    )
    return 
      ...toRefs(data),
      num1
    ;
  ,

效果

分别绑定两个点击事件，通过@

​

<div  @click="clickNum" >num</div>
<div  @click="clickNum1">num1</div>

定义了两个方法，let方法名

​

let clickNum = () =>
      console.log("点击了num")
    

    let clickNum1 = () =>
      console.log("点击了num1")
    

 return 
      ...toRefs(data),
      num1,

      clickNum,
      clickNum1
    ;

运行结果

访问数据
访问ref定义的数据 要写数据名.value

​

let clickNum1 = () =>
      console.log(num1.value)
    

打印结果

访问reactive定义的数据，写返回的名字.属性
console.log(data.num)

​

let clickNum = () =>
      console.log(data.num)
    

打印结果

关于点击事件clickNum的传参 传一个参数100

​

<div  @click="clickNum(100)" >num</div>

下面的a是形参，上边调用方法时传入的是实参

​

let clickNum = (a) =>
      console.log(a)

运行结果