Vue事件定义/执行方法获取/改变数据执行方法传值以及事件对象

小灰灰 2022-03-25 10:40 277阅读 0赞

##### 下面，我练习的这串代码中对理解Vue事件、定义/执行方法、获取/改变数据，和执行方法传值以及事件对象，有一定的帮助。 #####

<template>
    
    
      <div id="app">
        <h3>{
       {msg}}</h3> 
        <br>
    
        <button v-on:click="run1()">执行方法的第一种写法</button>
        <br>
        <br>
    
        <button @click="run2()">执行方法的第二种写法</button>
        <br>
        <br>
        
    
        <button @click="getMsg()">获取data里面的msg</button>
        <br>
        <br>
    
        <button @click="setMsg()">改变data里面的msg</button>
        <br>
        <br>
      
        <button @click="requestDate()">请求数据</button>  
        <br>
        <br>
        <ul>
          <li v-for="(item,key) in list">
            {
       {key}}---{
       {item}}          
          </li>
        </ul>
        <br>
        <br>
    
        <button @click="deleteDate('123')">执行方法传值123</button>
        <br>
        <br>
        <button @click="deleteDate('456')">执行方法传值456</button>
        <br>
        <br>
        <button @click="eventFn($event)">事件对象</button>
    
      </div>
    </template>
     
    <script> export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { msg: '这里是个vue', // msg: "这里是vue" 这里单引号和双引号是一样的结果 list:[], // list 中存放了push进来的值 } }, methods:{ //这里是放方法的地方 run1:function(){ alert('显示第一个方法');// run1 的方法 }, run2(){ alert('显示第二个方法');// run2 的方法 }, getMsg(){ alert (this.msg); }, setMsg(){ this.msg='这是改变后的数据'; }, requestDate(){ //编写requestDate的方法 for(var i=0;i<10;i++){ this.list.push('这是第'+i+'条数据'); //将数据push进list中 } }, deleteDate(a){ alert(a); }, eventFn(e){ console.log(e); } } } </script>
    
    <style> </style>

运行效果如下（部分效果没有完全显示）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
点击请求数据会一直往后添加数据，因为该方法是一直往list中push数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
右边的截图是点击事件对象所产生的对象。

若想查看完整的效果，可以复制上述代码。若有任何疑问或是不解，请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/1fea92b60b284f3793dd81722d94cf6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/49bf892c20864b9ca28f02df8a7f8e58.png