9、事件处理
事件的基本使用:
1.使用v-on : xxx或@xxx绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm 上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><script type="text/javascript" src="/js/vue.js">script>head>
<body><div id="root"><h1>欢迎来到{{name}}学习h1><button @click="showInfo1">点我提示信息1(不传参)button><button @click="showInfo2($event,66)">点我提示信息2(传参)button>div><script type="text/javascript">const vm=new Vue({el:'#root', data:{ name:'尚硅谷' },methods: {showInfo1(event) {// console.log(event.target.innerText)// console.log(this)//此处的this是vmalert("同学你好!")},showInfo2(event,number) {console.log(event,number)// console.log(event.target.innerText)// console.log(this)//此处的this是vmalert("同学你好!!")},},})script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！