当前位置：首页 > article >正文

Vue事件处理

article 2024/10/23 0:17:50

今天滴学习目标！！！

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>