Vue:v-on解析

2021/11/8 6:12:28

编程Tag： vue 参数解析 console methods log 不传

本文主要是介绍Vue:v-on解析，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

当使用Vue想调用函数时候使用V-ON

不传参数

不穿参数会默认传入一个event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
    <div id="firstVue">
      <h1>欢迎来到V-on</h1>
      //意思是当你点击button时候调用showInfo
      <button v-on:click="showInfo" >点击我（不传参数）</button>
      //可以使用小老鼠
      <button @click="showInfo" >点击我（不传参数）</button>

    </div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data() {
      return {
        main:"VUE"
      }
    },
    methods:{
        //在methods里面不需要在写function了
        showInfo(a){
          alert("同学你好");
          console.log(this);//这里的this是Vue实例
          console.log(a.target.valueOf());//我明显没有传值进了来却默认给我塞了一个event 这个东西有用可以获取事件目标
        }

    }
  })
  console.log(v)
</script >
</html>

传递参数

传递参数event会消失,但是还能拿回来直接加括号就好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
    <div id="firstVue">
      <h1>欢迎来到V-on</h1>
      //意思是当你点击button时候调用showInfo
      <button v-on:click="showInfo(66)" >点击我（不传参数）</button>
      //可以使用小老鼠
      <button @click="showInfo($event,88)" >点击我（不传参数）</button>

    </div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data() {
      return {
        main:"VUE"
      }
    },
    methods:{
        //在methods里面不需要在写function了
        showInfo(a,b){
          alert(a+""+b);
          console.log(this);//这里的this是Vue实例

        }

    }
  })
  console.log(v)
</script >
</html>

补充：methods:这个属性出来是因为如果你把函数放在data里面会做一次数据代理
直接影响性能。（把方法放在data也能有效果但是却做了不必要的代理）

这篇关于Vue:v-on解析的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue:v-on解析

不传参数

传递参数

相关编程文章