Vue入门（二十一）

todolist之基本结构——介绍计算属性

开始编写代码

        准备好上一讲的代码（视频顺序有问题，文章结尾有正确的观看顺序）

        开始前可以看看这篇文章

打开 HomeView.vue 文件

注释代码

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

引入 computed、ref

<script>

	import {
		defineComponent,
		computed,
        ref
	} from 'vue'

</script>

两数之和案例

<template>
	<!-- 	<div>
		<nav-header></nav-header>
		<nav-main></nav-main>
		<nav-footer></nav-footer>
	</div> -->
	<div>
		{{num1}} ----- {{num2}}
		两数之和：{{addNum}}
	</div>
</template>

<script>
	// @ is an alias to /src
	import NavHeader from '@/components/navHeader/NavHeader'
	import NavMain from '@/components/navMain/NavMain'
	import NavFooter from '@/components/navFooter/NavFooter'
	import {
		defineComponent,
		computed,
		ref
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
		setup() {
			let num1 = ref(10)
			let num2 = ref(20)
			let addNum = computed(() => {
				// 必须返回一个值
				// 逻辑代码
				return num1.value + num2.value
			})
			return {
				num1,
				num2,
				addNum
			}
		}
	})
</script>

<style scoped lang="scss">
	// 编写样式内容
</style>

computed(() => {})

官网上关于 computed 函数的说明可以看看

效果

 

修改num值

<template>
	<div>
		{{num1}} ----- {{num2}}
		两数之和：{{addNum}}
	</div>
	<div>
		<button @click="add">add</button>
	</div>
</template>

<script>
	export default defineComponent({
		setup() {
			let num1 = ref(10)
			let num2 = ref(20)
			let addNum = computed(() => {
				// 必须返回一个值
				// 逻辑代码
				return num1.value + num2.value
			})
            // 改变 num 值
			let add = () => {
				num1.value++
				num2.value++
			}
			return {
				num1,
				num2,
				addNum,
				add
			}
		}
	})
</script>

效果

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)

视频的顺序有问题，正确的顺序如下：
第3章 todolist 之基本结构
视频：3-1 介绍定义组件
视频：3-3 介绍ref定义单个数据
视频：3-4 介绍reactive定义对象类型的数据
视频：3-6 介绍方法的定义和使用
视频：3-2 实现todolist需要的4个组件
视频：3-5 实现todolist每个组件需要的数据
视频：3-7 实现todolist每个组件需要的方法
视频：3-8 介绍定义状态管理
视频：3-9 实现todolist之使用状态管理的api
视频：3-10 介绍计算属性
视频：3-11 实现通过计算属性获取vuex中定义的todolist的数据