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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
请求数据原理:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
执行方法,传入值:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
事件传值:
在这里插入图片描述
在这里插入图片描述
拖拽移动或点击触发事件;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
获取自定义属性的值:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
方法调用的2中方式:

<template>
  <div id="app">
   <button v-on:click="run1()">点击运行方法一</button>
   <button @click="run2()">点击运行方法二</button>
   </div>
</template>
<script>
export default {
  //name:"app",
  data(){
     return{
     }
  },methods:{
run1(){
            alert("方法一运行了");
      },
      run2:function(){
            alert("方法二运行了");
      }
   }
}
</script>
<style>

</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
   <hr>
   <button @click="getMsg1()">获取数据</button>
  </div>
</template>
<script>
export default {
  //name:"app",
  data(){
     return{
       msg:"abccc",
     }
     },methods:{
         getMsg1(){
           alert(this.msg);
           alert("方法三运行了");
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
   <button @click="setMsg1()">获取数据</button>
   </div>
</template>
<script>
export default {
  //name:"app",
  data(){
     return{
       msg:"abccc",
       }
     },methods:{
         setMsg1(){
           this.msg="重新赋值了!";
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
   <button @click="requestData()">请求数据</button>
   <hr>
   <ul>
     <li v-for="its in list" :key="its">
          {{its}}
     </li>
   </ul>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       list:[]
      }
     },
methods:{
         requestData(){
           for(var i=0;i<10;i++){
               this.list.push("第"+i+"条数据;");
           }
         }
     }
}
</script>
<style>

</style>

在这里插入图片描述

<template>
  <div id="app">
   <button @click="requestData()">请求数据</button>
   <hr>
   <ul>
     <li v-for="(its,key)  in list" :key="its">
          {{key}}-----{{its}}
     </li>
   </ul>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
        list:[]
       }
     },methods:{
         requestData(){
           for(var i=0;i<10;i++){
              this.list.push("第"+i+"条数据;");
           }
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
删除数据:

<template>
  <div id="app">
   <hr>
   <button @click="delData('1')">删除数据</button>
   <hr>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
        list:[]
       }
     },methods:{
         requestData(){
           for(var i=0;i<10;i++){
              this.list.push("第"+i+"条数据;");
           }
         },
         delData(i){
              this.list.pop("第"+i+"条数据;");
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
在这里插入图片描述
从栈顶开始删除数据;

<template>
  <div id="app">
      <button @click="eventFn($event)">点击事件</button>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
           msg:"abccc"
        }
     },methods:{
         eventFn(e){
              console.log(e);
              alert(e.value);
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
   <button @click="eventFn($event)">点击事件</button>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       msg:"abccc"
       }
     },methods:{
         eventFn(e){
              console.log(e);
              e.srcElement.style.background="red";
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
    <button id="123456"  @click="eventFn($event)">点击事件</button>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       msg:"abccc"
      }
   },methods:{
         eventFn(e){
              console.log(e);
              e.srcElement.style.background="red";
              console.log(e.srcElement.dataset.id);
         }
     }
}
</script>
<style>
</style>

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值