Vue3.0实现todolist-实现todolist每个组件需要的数据
Vue3.0实现todolist-实现todolist每个组件需要的数据
王小婷
发布于 2022-09-28 09:24:26
发布于 2022-09-28 09:24:26
参考文档
参考文档：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)
}运行结果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录