Vue学习--绑定事件

最新推荐文章于 2023-12-14 10:11:39 发布

theLuckyLong

最新推荐文章于 2023-12-14 10:11:39 发布

阅读量98

点赞数

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

本文链接：https://blog.csdn.net/theLuckyLong/article/details/115334985

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-on:xxx

可以使用v-on指令监听DOM事件，并在触发时，运行一些JavaScript代码。
这里xxx可以指任何的事件名，包括自定义，具体用法如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="vueScope">
          <button v-on:click="sayHi">Say Hi</button>
    </div>


<script>

    //实例化Vue对象
    let vueApp = new Vue({
        el: "#vueScope", //定义vue作用的前端标签处
        data: {//里面存放前端所需要的数据
			helloMsg: "hello"
        }，
        methods: {//所有的方法函数都写在该对象中
			sayHi: function(){
				alert(this.helloMsg);
            }
        }
    });

</script>
</body>
</html>