Todos - Vite 项目案例
2022年10月5日约 602 字大约 2 分钟...
初始化项目
npm init vite-app todos
npm install
npm i less -D
梳理项目结构
- 重置
index.css中的全局样式：
:root {
font-size: 12px;
}
body {
padding: 8px;
}
- 重置
App.vue组件的代码结构为：
<template>
<div>
<h1>Hello, world</h1>
</div>
</template>
<script>
export default {
name: "TodoApp",
data() {
return {
todolist: [
{ id: 1, text: "Learn Vue", done: true },
{ id: 2, text: "Learn Vue Router", done: false },
{ id: 3, text: "Learn Vuex", done: false },
],
};
},
};
</script>
<style lang="less" scoped></style>
- 删除
compenents目录下的HelloWorld.vue组件。 - 在终端运行：
npm run dev
封装 todo-list 组件
创建并注册组件
- 创建
src/components/todo-list/TodoList.vue文件。 - 在 App.vue 中注册该文件。
<template>
<div>
<TodoListVue></TodoListVue>
</div>
</template>
<script>
import TodoListVue from "./components/todo-list/TodoList.vue";
export default {
name: "TodoApp",
components: {
TodoListVue,
},
data() {
return {
todolist: [
{ id: 1, text: "Learn Vue", done: true },
{ id: 2, text: "Learn Vue Router", done: false },
{ id: 3, text: "Learn Vuex", done: false },
],
};
},
};
</script>
<style lang="less" scoped></style>
基于 bootstrap 渲染组件
- 安装 bootstrap
npm i bootstrap@4.6.1
- 在
main.js中导入 bootstrap 样式表：
import { createApp } from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css"; // 这里没导入 .js
import "./index.css";
createApp(App).mount("#app");
- 根据 bootstrap 提供的列表组与复选框渲染列表组件基本效果
<template>
<div>
<ul class="list-group">
<!-- 列表组 -->
<li class="list-group-item d-flex justify-content-between align-items-center">
<!-- 复选框 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" />
<label class="form-check-label" for="defaultCheck1"> Default checkbox </label>
</div>
<!-- 徽标 -->
<span class="badge badge-success badge-pill">完成</span>
<span class="badge badge-warning badge-pill">未完成</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "TodoList",
};
</script>
<style lang="less" scoped></style>
为 TodoList 声明 props 属性
- 在
todolist.vue中声明 props 属性
export default {
name: "TodoList",
props: {
list: {
type: Array,
required: true,
default: [],
},
},
};
- 在
App.vue中通过list属性，将数据传递给TodoList组件之中：
<TodoList :list="todolist"></TodoList>
渲染列表的 DOM 结构
在 todolist.vue 中使用 vue 指令进行渲染列表
<template>
<div>
<ul class="list-group">
<!-- 列表组 -->
<li v-for="item in list" key="item.id" class="list-group-item d-flex justify-content-between align-items-center">
<!-- 复选框 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" v-model="item.done":id="'defaultCheck' + item.id" />
<label class="form-check-label" :for="'defaultCheck' + item.id"> {{ item.text }} </label>
</div>
<!-- 徽标 -->
<span v-if="item.done" class="badge badge-success badge-pill">完成</span>
<span v-else class="badge badge-warning badge-pill">未完成</span>
</li>
</ul>
</div>
</template>
注意
坑：v-for 对应的是 key 属性，而不是 v-key！！！！！报错信息根本看不出来。。