今天滴学习目标！！！
- Vue3事件处理
- v-on指令
- Vue3表单
- 复选框
- 路由
Vue3事件处理
v-on指令
v-on指令来监听 DOM 事件，从而执行 JavaScript 代码
<button @click="greet">点我</button>: 一个按钮，当点击时，会调用Vue实例中的greet方法。@click是Vue中用于监听点击事件的指令。
- const app = {…}: 定义了一个Vue应用实例的配置对象。
- data() {…}: 一个函数，返回一个对象，这个对象包含了应用的数据。在这个例子中，数据是一个名为name的属性，其值为’Runoob’。
- methods: {…}: 定义了应用的方法。在这个例子中，有一个名为greet的方法。
- greet(event) {…}: 当按钮被点击时调用的方法。它使用this关键字访问Vue实例的数据（如this.name），并弹出一个警告框显示问候信息。此外，如果点击事件被传递给了这个方法（Vue会自动传递原生DOM事件对象），它还会弹出一个警告框显示触发事件的DOM元素（即按钮）的标签名（BUTTON）。
这段代码演示了Vue 3的基本用法，包括如何定义数据、方法，以及如何将Vue应用挂载到DOM元素上
Vue3表单
给大家介绍 Vue 表单上的应用
我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为属性并将 change 作为事件。\
<div id="app">: 定义了Vue应用的挂载点。Vue将会在这个元素内部进行渲染和管理。
<p>input 元素：</p>: 一个段落标签，用于说明下面的元素。
<input v-model="message" placeholder="编辑我……">: 一个输入框，v-model="message"表示这个输入框的值与Vue实例中的message数据属性双向绑定。这意味着，当用户在输入框中输入文本时，message属性的值会实时更新；反之，如果message属性的值在Vue实例内部被改变，输入框中显示的文本也会相应更新。
<p>input 表单消息是: {{ message }}</p>: 一个段落标签，用于显示message属性的值。{{ message }}是Vue的插值表达式，用于将数据绑定到DOM中。
<p>textarea 元素：</p>: 一个段落标签，用于说明下面的<textarea>元素。
<textarea v-model="message2" placeholder="多行文本输入……"> </textarea>: 一个多行文本输入框，v-model="message2"表示这个输入框的值与Vue实例中的message2数据属性双向绑定。
<p>textarea 表单消息是:</p>: 一个段落标签，用于分隔内容，但并未直接显示数据。
<p style="white-space: pre">{{ message2 }}</p>: 一个段落标签，用于显示message2属性的值。style="white-space: pre"样式用于保留文本中的空白和换行符，这样多行文本就能以用户输入的方式正确显示。
复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组
第一个<p>标签和<input type="checkbox" id="checkbox" v-model="checked">：这是一个单个复选框的示例。它使用v-model指令与Vue实例的checked数据属性进行双向绑定。当复选框被选中或取消选中时，checked属性的值会相应地变为true或false。
<label for="checkbox">{{ checked }}</label>：这里使用{{ checked }}来显示checked属性的当前值。
第二个<p>标签和接下来的三个复选框：这些复选框用于选择多个值。它们通过v-model指令与Vue实例的checkedNames数组进行绑定。每个复选框的value属性定义了当该复选框被选中时，应该添加到checkedNames数组中的值。
<span>选择的值为: {{ checkedNames }}</span>：这里使用{{ checkedNames }}来显示当前被选中的复选框的值（即checkedNames数组的内容）。
定义了一个名为app的Vue实例，其中包含一个data函数。这个函数返回一个对象，该对象包含两个属性：checked（一个布尔值，用于单个复选框的选中状态）和checkedNames（一个数组，用于存储多个复选框的选中值）。
使用Vue.createApp(app).mount(‘#app’)来创建Vue应用并将其挂载到id为app的DOM元素上
路由
路由的基本概念
- 定义：路由，其实就是指向的意思，它根据不同的URL地址指向不同的内容或页面。在Vue中，页面内容都是以组件化的形式存在的，因此路由就是实现URL与组件之间对应关系的机制。
- 作用：Vue中的路由允许开发者在前端直接控制页面的跳转，而无需每次请求都返回一个新的页面。这不仅可以提升用户体验，还能减少后端服务器的压力。
<router-link to="/">Go to Home</router-link>和<router-link to="/about">Go to About</router-link>：这两个是Vue Router提供的<router-link>组件，用于创建导航链接。它们的行为类似于普通的<a>标签，但会在Vue应用中处理导航，而不是重新加载页面。to属性指定了链接的目标地址。
<router-view> </router-view>：这是路由出口，用于渲染与当前URL匹配的组件。当用户在应用中导航时，<router-view>中的内容会根据当前路由动态变化
定义了两个路由组件Home和About，它们分别有一个简单的模板，用于展示不同的内容。
定义了一个路由配置数组routes，其中包含了两个路由对象。每个路由对象都有一个path属性（指定路由的路径）和一个component属性（指定与该路由匹配的组件）。
使用VueRouter.createRouter方法创建了一个路由实例，并传递了路由配置数组routes和一个history选项（这里使用了VueRouter.createWebHashHistory()来创建基于hash模式的历史记录）。
注意：Vue Router 4.x及以上版本使用createRouter和createWebHistory/createWebHashHistory，而Vue Router 3.x版本使用不同的API。
创建了一个Vue应用实例，并使用app.use(router)方法将路由实例安装到Vue应用中。这使得整个应用支持路由功能。
使用app.mount(‘#app’)方法将Vue应用挂载到id为app的DOM元素上
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title><script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script><script src="https://cdn.staticfile.net/vue-router/4.2.4/vue-router.global.min.js"></script>
<!-- <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script> --></head><body><div id="app"><h1>Hello App!</h1><p><!--使用 router-link 组件进行导航 --><!--通过传递 `to` 来指定链接 --><!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签--><router-link to="/">Go to Home</router-link><router-link to="/about">Go to About</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div><script>
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
]// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。history: VueRouter.createWebHashHistory(),routes, // `routes: routes` 的缩写
})// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)app.mount('#app')// 现在，应用已经启动了！</script><!-- <script type="module" src="/src/main.js"></script> --></body>
</html>)
