vue的点击事件；如何添加vue的click

Question

如题所述

Answer 1

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

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

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

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

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

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

所有代码。可以直接复制所有代码到新建html代码页面，然后修改引入vue.js的文件路径，最后保存html代码后使用浏览器打开即可看到效果。 所有代码： !DOCTYPE html html head meta charset="UTF-8" titlevue点击事件/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