Vue-事件处理

最新推荐文章于 2024-05-17 14:32:46 发布

终会为一

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量366

点赞数 10

分类专栏： vue.0+vue3.0全套学习目录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_73992463/article/details/134946695

版权

vue.0+vue3.0全套学习目录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

这段代码的含义是点击这个名字为：showInfo的按钮去调用

<button v-on:click="showInfo">点我提示信息</button>

在Vue中的外部定义函数的时候需要添加funtion这个定义函数名

function showInfo() {
    alert('同学你好')
  }

事件绑定

而在methods中则不需要在进行函数的定义了

 methods: {
      showInfo() {
        alert('你好')
      }
    }

一般的书写方法

<!-- <button v-on:click="showInfo">点我提示信息</button> -->

简写：

<button @click="showInfo">点我提示信息</button>

想要使用buttun进行传参的话要在click中加上（）

<button @click="showInfo2(666)">点我提示信息2</button>

完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue中的数据代理</title>
  <!-- 引入vue -->
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>
  <!-- 准备好一个盒子 -->
  <div id="root">
    <h2>欢迎回来，{{name}}</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1(不传参数)</button>
    <button @click="showInfo2(666,$event)">点我提示信息2(传输参数)</button>
    <!-- 
      事件的基本使用：
        1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
        2.事件的回调需要配置在mathods对象中，最终会在vm上：
        3.methods中配置的函数，不要用箭头函数！否则this就不是vm了：
        4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
        5.@click="demo"和@click="@click=($event)" 效果是一样的 ，但是后者是可以传参的
     -->
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = true
  const vm = new Vue({
    el: '#root',
    data: {
      name: '张掖'
    },
    methods: {
      showInfo1(event) {
        // alert('你好')
        //console.log(a,b,c,d);
        alert('同学你好!')
      },
      showInfo2(number) {
        console.log(number,event);
        // alert('你好')
        //console.log(a,b,c,d);
        //alert('同学你好!!')
      }
    }
  })
</script>

</html>