vue里写jquery 点击事件 vue的点击事件

转载

mob6454cc6b8546 2024-01-08 15:49:24

文章标签 vue里写jquery 点击事件 vue html vue.js 修饰符 文章分类 jQuery 前端开发

根据上一章节的内容，我们该章节继续上次的代码，来展示监听事件的案例

一、监听事件的基本事件

1，v-on:click=@click 点击事件
（事件语法中所有的v-on:均可以简写为@）

Html部分

<div id="counter">
      {{counter}}
      <br />
      <div>一共点击了 {{clicknum}}次</div>
      <button @click="count">事件点击</button>
      <!-- <button v-on:click="count">事件点击</button> -->
    </div>

JS部分

new Vue({
      el: "#counter",
      data: {
        counter: "Hello World!",
        clicknum: 0,
      },
      methods: {
        count: function () {
          this.clicknum++;
        },
      }
    });

注意：html在绑定vue事件函数时候，不必加上（）括号，且函数所在区域已经被new vue声明绑定（注意id=counter的范围）

效果查看

vue里写jquery 点击事件 vue的点击事件_vue里写jquery 点击事件

2，更多事件修饰符

.stop 停止修饰符（中断冒泡）
.prevent 组织提交，在遇到form等表单提交后刷新页面时，阻止强制刷新页面
.capture 优先触发修饰符（出头鸟）
.self 自己才能出发，从子节点响应而来，遇到该函数不触发
.once 只响应一次，有且仅有一次

以上修饰符的用法如下：用@click为例
@click.stop
@click.prevent
@click.self
@click.once
在事件函数后直接加上.修饰符即可

二、修饰符实例

首先我们来实现一个冒泡功能
什么事元素冒泡呢，就是点击子元素，子元素与父元素绑定相同的事件函数，仅此，事件函数不仅仅可以总用于点击的那个元素，同时可以作用于该元素上级所有的上级元素，知道找不到上级元素位置，该种行为，向父级元素冒泡。通俗来讲就是往根节点遍历的意思。

Html

<div id="content">
      <div id="grandFather" v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
          father
          <div id="me" v-on:click="doc">
            me
            <div id="son" v-on:click="doc">son</div>
          </div>
        </div>
      </div>
      <p>从前到后依次为响应顺序：<br />{{NextInfo}}</p>
    </div>

new Vue({
      el: "#div1",
      data: {
        VueTest: "Hello World!",
      },
      methods: {},
    });
    var content = new Vue({
      el: "#content",
      data: {
        id: "",
        NextInfo: "",
      },
      methods: {
        doc: function () {
          this.id = event.currentTarget.id;
          this.NextInfo += this.id + "  ";
        },
      },
    });

效果查看：

点击son

vue里写jquery 点击事件 vue的点击事件_vue.js_02