vue的点击事件；如何添加vue的click / 木子杰软件教程

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

操作方法

01

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

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

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

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

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

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

操作方法

相关推荐