事件绑定

绑定事件执行多个函数

  const app = Vue.createApp({
    data() {
      return {
        counter:0
      }
    },
    methods: {
      handleBtnClick(){
        this.counter+=1;
      },
      handleBtnClick1(){
        alert(2)
      }
      },
    template: `
      <div>
       {{counter}}
      <button @click="handleBtnClick(),handleBtnClick1()">新增</button>
      </div>
    `
  });
  const vm = app.mount('#root');

// 事件修饰符：stop, prevent, capture, self, once, passive

  const app = Vue.createApp({
    data() {
      return {
        counter:0
      }
    },
    methods: {
      handleBtnClick(){
        this.counter+=1;
      },
      handleDivClick(){
        alert(1)
      }
      },
    template: `
      <div>
       <div @click.once="handleDivClick">
        {{counter}}
      <button @click="handleBtnClick">新增</button>
    </div>
      </div>
    `
  });
  const vm = app.mount('#root');

  // 按键修饰符：enter, tab, delete, esc, up, down, left, right
  // 鼠标修饰符：left, right, middle
  // 精确修饰符：exact
  const app = Vue.createApp({
    methods: {
      handleClick() {
        console.log('click')
      },
    },
    template: `
      <div>
        <div @click.ctrl.exact="handleClick">123</div>
      </div>
    `
  });
  const vm = app.mount('#root');