《Web前端开发》课件-任务五 Vue的事件处理

Web前端开发项目八浅谈Vue任务五

Vue的事件处理学习目标：知识目标：掌握内联事件处理器和方法事件处理器的定义方法，熟记自定义传参和事件传参的方法。技能目标：使用内联事件处理器和方法事件处理器，运用方法处理器完成自定义参数传参和事件参数传参。素质目标：培养学生实践操作能力，激发学生学习兴趣。任务准备：

Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。其中，事件处理是Vue框架非常重要的一部分，接下来我们详细讲解Vue事件处理的相关内容。一、事件处理可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。格式如下。

v-on:click="methodName"或@click="handler"事件处理的特点如下。(1)一般使用button按钮绑定事件。(2)事件的回调要在ViewModel的methods里面。(3)methods配置的函数都被vue所管理，this的指向是ViewModel或者实例对象。(4)@click="demo"和@click="demo($evetn)"区别在于后者可以传参。任务准备：二、事件处理器的类型1.内联事件处理器内联事件处理器是指事件被触发时执行的内联JavaScript语句（与onclick类似）。通常用于简单场景，示例如下。

<script>

exportdefault{

data(){

return{

num:0

}

}

}

</script>

<template>

<button@click="num++">计数</button>

<div>数值：{{num}}</div>

</template>

在这个示例中，每单击一次按钮button，num数值加1。任务准备：2.方法事件处理器

方法事件处理器：一个指向组件上定义的方法的属性名或是路径，示例如下。<script>

exportdefault{

data(){

return{num:0}

},

methods:{

addNum(){this.num++;}

}

}</script><template>

<button@click="addNum">计数</button>

<div>数值：{{num}}</div></template>

在这个示例中，methods是Vue实例上定义方法的地方，这些方法可以在Vue实例中使用，并可以被绑定到Vue模板中的事件上，this指向的是data返回的对象。任务准备：三、事件传参1.自定义参数传参很多时候，我们需要传递自定义参数，示例如下。

<script>

exportdefault{

data(){

return{num:0}

},

methods:{

addNum(msg){this.num++;console.log(msg);}

}

}

</script>

<template>

<button@click="addNum('hello')">计数</button>

<div>数值：{{num}}</div>

</template>

在这个示例中，我们可以自定义参数内容，在@click="addNum('hello')"中自定义参数为“hello”，在methods中的addNum(msg)函数中，msg就可以取到这个参数。任务准备：2.事件参数传参很多时候，除了需要传递自定义参数，还需要访问原生DOM事件。这时，可以向该处理器传入一个特殊的“$event”变量。“$event”常见用法就是在事件处理函数中捕获事件对象，它只能在template中使用，不能在JavaScript中直接访问，示例如下。

<script>

exportdefault{

data(){

return{arrs:["集体","光荣","梦想","腾飞"]}

},

methods:{getHandler(arr,e){console.log(arr);console.log(e);}

}

}

</script>

<template>

<h3>事件参数和自定义参数</h3>

<div@click="getHandler(item,$event)":key="index"

v-for="(item,index)ofarrs">

{{item}}</div>

</template>

在这个示例中，@click="getHandler(item,$event)"中我们除了传递自定义参数item外，还传递了“$event”变量。任务实施：任务描述：（1）获取随机数在页面中定义一个button按钮和一个文本框，要求点击按钮，随机生成0~100（不包括100）范围内的整数。如图8.15所示。

（2）获取结构数据当data返回的数据结构为student:{name:"小红",age:20,class:"大一年级"}，利用参数传值，在页面标签的单击事件中获取student结构中的属性值。单击左侧信息项，在控制台输出对应的信息内容，如图8.16所示。任务实施：实施步骤：1.获取随机数（1）定义布局文件。

<script>

exportdefault{

data(){

return{…}

}

}

</script><template>

<h2>生成随机数</h2>

<p>随机数：…</p>

<button>生成随机数</button>

</template>

任务实施：（2）定义data中返回计数变量num。

return{num:0}

<p>随机数：{{num}}</p>（3）为button添加单击事件。

<button@click="num=Math.floor(Math.random()*100)">生成随机数</button>

其中，Math.random()函数取0~1范围内随机数（不包括1），Math.floor()函数表示向下取整数。任务实施：2.获取结构数据（1）布局页面。

<template>

<h3>读取数据信息</h3>

<div>…..</div></template><script>exportdefault{data(){return{student:{name:"小红",

age:20,class:"大一年级"}

}

},

methods:{…}

}</script>任务实施：（2）定义函数getMessage()获取信息。methods:{

getMessage(student){console.log(student);}}（3）为标签添加单击事件。<template>

<div@click="getHandler(value,$event)":key="index"

v-for="(value,key,index)ofstudent">{{value}}</div></template>

小结Vue的事件处理

一、事件处理

二、事件处理器的类型

1.内联事件处理器

2.方法事件处理器

三、事件传参

1.自定义参数传参

2.事件参数传参任务测试：一、选择题1、在Vue项目中，能够实现页面单击事件绑定的指令是（）。A、v-on:enterB、v-on:clickC、v-on:doublec