Vue入门（十三）

todolist之基本结构——介绍ref定义单个数据

ref

官网说明：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。

开始编写代码

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

模板中访问

ref 定义数据

<template>
	<!-- 编写 HTML 内容-->
	<div>
		{{num}}
	</div>
	<div>
		{{name}}
	</div>
</template>

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 接收父组件的数据
		props: {

		},
		// 定义子组件
		components: {

		},
		setup(props, ctx) {
			let num = ref(10)
			let name = ref('jack')
			return {
				num,
				name
			}
		}
	})
</script>

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

效果

 

ref 定义数组

<template>
	<!-- 编写 HTML 内容-->
	<div>
		{{num}}
	</div>
	<div>
		{{name}}
	</div>
	<div>
		{{arr}}
	</div>
</template>

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 接收父组件的数据
		props: {

		},
		// 定义子组件
		components: {

		},
		setup(props, ctx) {
			let num = ref(10)
			let name = ref('jack')
			let arr = ref(['a', 'b', 'c', 'd'])
			return {
				num,
				name,
				arr
			}
		}
	})
</script>

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

效果 

 对数组进行操作

<template>
	<div>
		{{num}}
	</div>
	<div>
		{{name}}
	</div>
	<div>
		{{arr[0]}}
	</div>
</template>

效果

<template>
	<div>
		{{num}}
	</div>
	<div>
		{{name}}
	</div>
	<div>
		{{arr.slice(0,2)}}
	</div>
</template>

效果

ref 定义对象

<template>
	<div>
		{{num}}
	</div>
	<div>
		{{name}}
	</div>
	<div>
		{{arr}}
	</div>
	<div>
		{{obj}}
	</div>
	<div>
		{{obj.age}}
	</div>
</template>

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 接收父组件的数据
		props: {

		},
		// 定义子组件
		components: {

		},
		setup(props, ctx) {
			let num = ref(10)
			let name = ref('jack')
			let arr = ref(['a', 'b', 'c', 'd'])
			let obj = ref({
				age: 20
			})
			return {
				num,
				name,
				arr,
				obj
			}
		}
	})
</script>

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

 效果

---

 视频学习地址：

课程导学，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的数据