参考文档

参考文档：https://blog.csdn.net/ll666888999/article/details/123789098
参考视频：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)
}

运行结果