一文告诉你 Vue 的事件处理

2024-03-08
北京
本文字数：1602 字
阅读完需：约 5 分钟

Vue 事件处理

使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。
methods 承载多是事件函数
v-on 可以用 @替换

获取更多技术资料，请点击！

用法

v-on:click="methodName"

复制代码

或

@click="methodName"

复制代码

事件处理器的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

按钮点击操作

场景一

按钮点击对应前端控制台输出文本：

<script>export default{  name: 'app',  data(){  },  methods:{    clickHandle(){      console.log("Hello 点击事件");    }  }
}</script><template>  <main>    <div>      <h1>事件处理</h1>       <button v-on:click="clickHandle">按钮</button>      <button  @click="clickHandle">按钮</button>    </div>
  </main></template>

复制代码

点击三次，前端页面控制台输出打印三次：Hello 点击事件

场景二

按钮点击，文本交替显示或消失

<script>export default{  name: 'app',  data(){  },  methods:{    clickHandle(){      console.log("Hello 点击事件");    },    clickText(){      this.flag = !this.flag;    }  }
}</script><template>  <main>    <div>      <h1>事件处理</h1>       <button v-on:click="clickHandle">按钮</button>      <p v-if="flag">文本按钮显示</p>      <button @click="clickText">文本按钮</button>    </div>  </main></template>

复制代码

再次点击一次，按钮上文本消失。

在事件中改变文本是否显示的属性值，methods 编写对应方法，索引到 data 属性内定义的值。

注意：所有 data 里面的属性都是通过 this 来索引修改

列表文本事件处理

场景一

<script>export default{  name: 'app',  data(){  },  methods:{    listHandle(e){      console.log(e);    }  }}</script><template>  <main>    <div>      <h1>事件处理</h1>       <button v-on:click="clickHandle">按钮</button>      <p v-if="flag">文本按钮显示</p>      <button v-on:click="clickText">文本按钮</button>      <ul>        <li @click="listHandle"            v-for="(value, key, index) in bookObj" :key="index" >          {{index+1}}. {{key}} : {{value}}        </li>      </ul>    </div>  </main></template>

复制代码

传入参数 e，对应前端页面控制台输出元素点击操作属性内容

场景二

对应文本传入事件进行处理

<script>export default{  name: 'app',  data(){  },  methods:{    clickHandle(){      console.log("Hello 点击事件");    },    clickText(){      this.flag = !this.flag;    },    listHandle(value){      console.log(value);    }  }
}</script><template><main>    <div>      <h1>事件处理</h1>       <ul>        <li @click="listHandle(value)"            v-for="(value, key, index) in bookObj" :key="index" >          {{index+1}}. {{key}} : {{value}}        </li>      </ul>    </div>  </main></template>

复制代码

value 代表方法传入的文本信息，不代表 envent 对象

即想传递参数又想传递 envent 对象

    listHandle(value,e){      console.log(value,e);    }

复制代码

事件修饰符

修饰符是用 . 表示的指令后缀，包含以下这些：

.stop
.prevent：事件将不再重新加载页面
.self
.capture
.once
.passive：

页面不跳转

点击 a 标签，对应页面跳转失效

<script>export default{  name: 'app',  data(){  },  methods:{    clickHandle(){      console.log("Hello 点击事件");    }  }
}</script><template>  <main>    <div>      <h1>事件处理</h1>       <a @click.prevent="clickHandle" href="https://www.baidu.com/">跳转页面</a>    </div>
  </main></template>

复制代码

发布于: 刚刚阅读数: 4

霍格沃兹测试开发学社

关注

社区：ceshiren.com 微信：ceshiren2021 2019-10-23 加入

微信公众号：霍格沃兹测试开发提供性能测试、自动化测试、测试开发等资料，实时更新一线互联网大厂测试岗位内推需求，共享测试行业动态及资讯，更可零距离接触众多业内大佬。

发布

暂无评论

创作场景

一文告诉你 Vue 的事件处理

Vue 事件处理

获取更多技术资料，请点击！

用法

按钮点击操作

场景一

场景二

列表文本事件处理

场景一

场景二

事件修饰符

页面不跳转

霍格沃兹测试开发学社

评论