Vue(5) —— Vue绑定事件

最新推荐文章于 2023-06-13 20:50:46 发布

原来是小别扇

最新推荐文章于 2023-06-13 20:50:46 发布

阅读量383

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Jzandth/article/details/108767870

版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

绑定事件
其实Vue里面的绑定事件就和js里面原理一样，只是Vue使用形式不同
js里面要绑定触发事件，我们直接在标签里面写上触发事件和执行的js方法即可；在Vue中，我们首先需要在Vue对象的构造函数传入的对象中新增一个属性methods，然后在这个对象里面定义一个个要执行的方法，最后在要绑定的元素上面写上v-on:触发事件=“methods中的函数名称”(这里的触发事件就是js里面的触发事件，其实我们只需要记住经常用的就行，甚至不用记，直接百度jQuery 事件.)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <input type="button" value="click me" v-on:click="sayHi">
    </div>

    <script>

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                sayHi:function (){
                    alert("Hi , Vue");
                }
            }
        });
    </script>
</body>
</html>