v-on事件绑定

• 作用：给dom标签绑定事件

• 语法

  1. v-on:事件名="要执行的少量代码"

  2. v-on:事件名="methods中的函数"

  3. v-on:事件名="methods中的函数(实参)"

• 简写: @事件名="methods中的函数"。

• 给事件传值：@事件名="methods里的函数名(实参)"

<template>
  <div id="yyds">
    <p>初始值：{{ count }}</p>
    <button v-on:click="count++">点我加1</button>
    <button v-on:click="count--">点我减1</button>
    <button v-on:click="addfn()">点我执行函数addfn()+1</button>
    <button v-on:click="add5fn(5)">点我执行函数addfn()+5</button>
    <button @click="add5fn(6)">简写add5fn()+6</button>
  </div>
</template>

<script>
export default {
  // data中声明的是需要在模板中用到的变量
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addfn() {
      // this指向导出的默认对象，并且data中的变量和methods中声明的函数，
      //今后都会直接挂载到这个对象下，因此我们可以通过this直接访问变量和方法
      // console.log(this);
      this.count++;
    },
    add5fn(num) {
      this.count += num;
    },
  },
};
</script>

<style scoped>
</style>

 

---

v-on修饰符

语法:

• @事件名.修饰符="methods里函数"

• stop - 阻止事件冒泡

• prevent - 阻止默认行为

<template>
  <div id="app" >
    <a href="http://www.taobao.com/" @click.prevent.stop="goto1">淘宝</a><br />
    <a href="http://www.tmall.com/" @click.prevent.stop="goto2">天猫</a>
  </div>
</template>

<script>
export default {
  methods: {
    goto1() {
      console.log("taobao");
    },
    // 阻止冒泡，阻止跳转
    goto2() {
      console.log("tmall");
    },
  },
};
</script>

<style>
</style>

---

v-on按键修饰符

作用：给键盘事件, 添加修饰符, 增强能力

语法:

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

<template>
  <div id="app">
    <input type="text" @keydown.enter="fn" />
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log("你好棒");
    },
  },
};
</script>

<style>
</style>

 

---

<template>
  <div>
    <!--h1这里需要插值 -->
    <h1>{{ msg }}</h1>
    <button @click="reverseMsg">逆转</button>
  </div>
</template>

<script>
export default {
  // 设置插值
  data() {
    return {
      msg: "ABC1234567XYZ",
    };
  },
  // 设置按钮事件
  methods: {
    reverseMsg() {
      //不能直接用reverse，字符串没有该方法，只能转为数组；
      // 1、切割字符串-->转数组-->使用split将字符串转化为数组
      const array = this.msg.split("");
      // 2、顺序翻转---reverse
      const str = array.reverse();
      //3、输出的时候还是字符串，所以还得拼接，使用join
      // 数组拼接-->转字符串--->赋值回去
      this.msg = str.join("");

      // 以上三行可以简写为this.msg = this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>