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点击事件已成功执行。

1.jpg-600

全部代码:

<!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里怎么实现的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 答疑