宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

vue是当下最受欢迎的前端框架之一，它简单入门容易上手，深受大家的喜爱。由于vue是一个双向数据绑定的框架，它的点击事件与以前常用的还是有很大的差别的，那vue的点击事件是怎么样实现的呢？

vue的点击事件；如何添加vue的click-风君雪科技博客

操作方法

  • 01

    新建一个html代码页面，然后在这个代码页面上创建一个<div>标签，同时个这个<div>标签添加一个id为app，然后在这个<div>标签里创建一个点击按钮。 代码： <div id=”app”> <input type=”button” value=”点击我” /> </div>

    vue的点击事件；如何添加vue的click-风君雪科技博客

  • 02

    vue实例化。首先需要引入vue.js文件，然后创建一个<script>标签，在这个标签里面使用 new Vue({})进行vue的实例化。 代码： <script type=”text/javascript” src=”js/vue.js” ></script> <script> var app = new Vue({ el:”#app” })

    vue的点击事件；如何添加vue的click-风君雪科技博客

  • 03

    创建点击事件函数。在vue官网给定的methods里面创建vue点击事件触发的方法（案例中创建点击事件触发时弹出一个alert弹出）。 代码： methods:{ test:function(){ //vue的点击触发事件 alert(“完成vue的点击事件”) } }

    vue的点击事件；如何添加vue的click-风君雪科技博客

  • 04

    给点击按钮添加vue的点击事件。在点击按钮标签里面添加上@click=”test”即可。

    vue的点击事件；如何添加vue的click-风君雪科技博客

  • 05

    保存html代码，然后使用浏览器进行打开，在浏览器页面点击按钮事件，这个时候就可以看浏览器上弹出一个alert弹出框，表示vue点击事件已成功执行。

    vue的点击事件；如何添加vue的click-风君雪科技博客

  • 06

    所有代码。可以直接复制所有代码到新建html代码页面，然后修改引入vue.js的文件路径，最后保存html代码后使用浏览器打开即可看到效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>vue点击事件</title> </head> <body> <div id=”app”> <input type=”button” value=”点击我” @click=”test”/> </div> <script type=”text/javascript” src=”js/vue.js” ></script> <script> var app = new Vue({ el:”#app”, methods:{ test:function(){ //vue的点击触发事件 alert(“完成vue的点击事件”) } } }) </script> </body> </html>