参考文档
参考文档：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) }
运行结果
