写在前面
Vue 在之前的项目就已经接触过，这里希望可以进一步学习使用Vue。
作为前端新手，想从基础的概念和用法讲起，逐步理解和学习Vue。
组件
组件，作为 Vue项目的基础组成部分，允许我们将UI界面划分为独立的、可重用的部分，并且对于每个组件内部的模板，逻辑和进行封装 ，形成单文件组件（SFC）。
每个组件，都由 模板（template），逻辑（script） 和样式（style） 组成。
<template>，即模板，用于定义组件的 HTML结构，包含了组件的布局和展示逻辑。它可以包含任意合法的HTML，也可以使用 Vue 的模板语法和嵌套其他 Vue 组件。<script>，即逻辑，用于定义组件中的 JavaScript逻辑。它默认导出一个JS对象，该对象定义了当前组件的配置，比如：name，定义组件的名字props，接受父组件传递过来的数据data，初始化组件的状态，通常是相应式属性methods，方法的集合，可以被组件内的某些方法调用components，用于注册子组件
<style>，用于定义组件的 CSS样式，设置组件的视觉表现。可以通过添加scoped属性（形如<style scoped>），限制当前样式仅对该组件生效，避免样式污染。
Props 属性
Props，是一种类型特殊的属性，用于父组件向子组件传递数据，使得子组件可以根据这些数据动态地进行改变，影响子组件显示的初始状态。
props可以定义被传递数据的属性，确保子组件接收到符合预期的数据：
type，类型default，默认值required，是否必要
在使用props属性时，需要在子组件中显示地 声明 期望接受的props，例如在子组件ToDoItem.vue中：
<template>
<div>
<label for="todo-item">{{ label }}</label>
</div>
</template>
<script>
export default {
props:{
label: {
required: true,
type: String
}
},
};
</script>
同时，在父组件中，需要在子组件的标签上添加属性，来 传递 数据，例如在父组件App.vue中：
<template>
<to-do-item label="My ToDo List"></to-do-item>
</template>
<script>
import ToDoItem from "./components/ToDoItem.vue";
export default {
name: 'App',
components: {
ToDoItem
}
}
</script>
在使用props属性时，值得注意：
- 在子组件内部，不应该直接修改
props的值，否则将违反Vue的单项数据流原则 - 如果需要基于
props创建新的计算属性，应该使用computed属性，这样可以缓存计算结果，避免不必要的重复计算 - 当子组件的
props的某些属性需要为Boolean类型时，需要使用v-bind语法进行绑定，否则会将true或false当作字符串来传递
v-bind
v-bind，是一种Vue中的特殊语法，用于动态地将JavaScript表达式 绑定到HTML元素的属性（attribute） 上。它等价于JavaScript中的setAttribute方法，但更简洁且具有Vue的响应式特性。
v-bind可以对于class、style或任何自定义属性（attribute）和JavaScript变量进行动态绑定。在Vue中，v-bind不仅可以绑定变量或字符串，针对class 和 style属性，还可以绑定对象或数组。例如：
-
<input type="checkbox" id="todo-item" v-bind:checked="isDone" />
这里，使用v-bind把isDone数据变量绑定到<input>元素上的checked属性。 -
<div v-bind:class="{ active: isActive }"></div>
这里，通过传递一个对象来动态切换class，让active这个class属性是否存在取决于isActive数据变量的真假值
当然，v-bind还经常被用来绑定组件的props，例如在子组件ToDoItem.vue中新增一个·、Boolean类型的props属性done，那么在父组件App.vue中，可以用v-bind把done属性和Boolean值进行绑定：
<template>
<to-do-item label="My ToDo Item" v-bind:done="true"></to-do-item>
</template>
在实际使用中，v-bind:经常被简写成:，两者的工作方式是相同的：
<template>
<to-do-item label="My ToDo Item" :done="true"></to-do-item>
</template>
v-for
v-for用于循环遍历数组或对象，并渲染列表。它允许我们基于数组或对象的键值对来动态生成一组DOM元素或组件。
v-for语法可以用来渲染列表或集合中的每一项，创建基于数据动态生成的DOM结构。例如已经有ToDoItem列表时，可以用v-for进行生成渲染：
<template>
<div id="app">
<h1>To-Do List</h1>
<ul>
<li v-for="item in ToDoItems" :key="item.id">
<to-do-item
:label="item.label"
:done="item.done"
:id="item.id"></to-do-item>
</li>
</ul>
</div>
</template>
在使用 v-for 时，建议为每个元素提供一个唯一的 key 属性，这有助于 Vue 更高效地更新 DOM。
