click事件在vue里怎么实现

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

click事件在vue里怎么实现

1、新建一个html代码页面,然后在这个代码页面上创建一个<div>标签,同时个这个<div>标签添加一个id为app,然后在这个<div>标签里创建一个点击按钮。(相关课程推荐:Vue.js教程

<div id="app">
    <input type="button" value="点击我" />
</div>

2、引入vue.js文件,创建一个<script>标签,在这个标签里面使用 new Vue({})进行vue的实例化。

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    var app = new Vue({
    el:"#app"
})
</script>

3、创建点击事件函数。在vue官网给定的methods里面创建vue点击事件触发的方法(案例中创建点击事件触发时弹出一个alert弹出)。

methods:{
    test:function(){ //vue的点击触发事件
        alert("完成vue的点击事件")
    }
}

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

<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>

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

全部代码:

<!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.js答疑栏目,欢迎学习!

以上就是click事件在vue里怎么实现的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    确定java按钮响应事件的代码

    确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。 是定义的容器。 容器(CP =得到内容面板); / /

    90后瓶门事件图片

    90后瓶门事件图片,,现在孩子们还太早,有些女孩子总是在门口等一会儿,最近发生了一次酒瓶门事件。 近日,山东一家寄宿学校的一名女生带着一瓶

    标签尺寸设置|标签的尺寸

    标签尺寸设置|标签的尺寸,,1. 标签的尺寸有很多款尺寸的保鲜盒,容量;350ml,规格尺寸:135x102x52mm, 容量;800ml;规格尺寸:205x134x52mm, 容量;1.0L;

    个性标签在哪里设置|添加个性标签

    个性标签在哪里设置|添加个性标签,,1. 添加个性标签微信标签类似于qq印象,可以给自己的微信好友贴上一些个性标签,方面查找类似特性的好友。

    Safari+Glims快速切换标签页

    Safari+Glims快速切换标签页,,对于键盘控制的玩家来说,Chrome的命令+数字键可以方便地打开打开的标签页,但是Safari使用这个快捷方式打开书

    设置模板名|标签模板设置

    设置模板名|标签模板设置,,1. 标签模板设置左上脚有一个齿轮,把鼠药放在齿轮上面,有显示回到久版本,点击回到久版本就可以了。9201 2. 样

    设置为主页|如何将标签页设置为主页

    设置为主页|如何将标签页设置为主页,,如何将标签页设置为主页手机设置互联网首页方法如下:1.互联网-右上角更多(或右上角三个小点图标)-设定-