compositionAPI开发简单todoList(内容添加和展示):
- 定义一个输入内容值获取和记录的方法
- 定义一个记录列表、添加内容到列表的方法
- 利用setup()函数处理业务逻辑,进行流程调度
- 标签元素添加相应方法,执行获取和添加内容的方法,以及内容列表的展示
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// input 相关操作- - -获取表单值、记录表单值
const inputEvent = () => {
// 从 Vue 中解构赋值,得到 ref
const { ref } = Vue
// 定义同步数据 input输入框的值
const inputValue = ref('')
// 获取输入框的值
const getInputValue = (e) => {
inputValue.value = e.target.value
}
// 返回表单的值、获取表单值的方法
return { inputValue, getInputValue }
}
// list 相关操作- - -创建展示列表、添加更新展示列表
const listEvent = () => {
// 从 Vue 中解构赋值,得到 reactive
const { reactive } = Vue
// 定义同步数据 添加的元素列表list
const list = reactive([])
// 将输入框的值添加到list展示列表
const addListItem = (item) => {
list.push(item)
}
// 返回list展示列表、list新增元素的方法
return { list, addListItem }
}
const app = Vue.createApp({
// 流程调度
setup() {
// 获取表单值、记录表单值
const { inputValue, getInputValue } = inputEvent()
// 创建展示列表、添加更新展示列表
const { list, addListItem } = listEvent()
return {
inputValue, getInputValue,
list, addListItem
}
},
template: `
<div>
<input :value="inputValue" @input="getInputValue" />
<button @click="addListItem(inputValue)">添加</button>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>
`
})
const vm = app.mount('#root')
</script>
</html>
在输入框输入内容,点击添加按钮后,会将输入的内容展示在下方列表: