14-常用指令-v-on

最新推荐文章于 2024-01-23 11:29:39 发布

奔波波灞

最新推荐文章于 2024-01-23 11:29:39 发布

阅读量103

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/m0_57783938/article/details/119838282

版权

vue.js 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-常用指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-on指令?
v-on指令专门用于给元素绑定监听事件

2.v-on指令格式
v-on:事件名称="回调函数名称"
@事件名称="回调函数名称"

3.v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
-->

<!--这里就是MVVM中的View-->
<div id="app">
<!--    <button onclick="alert('lnj')">我是按钮</button>-->
    <!--
    注意点:
    1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on
    2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称
    -->
<!--    <button v-on:click="alert('lnj')">我是按钮</button>-->
    <!--
    注意点:
    当绑定的事件被触发后, 会调用Vue实例的methods对象中对应的回调函数
    -->
<!--    <button v-on:click="myFn">我是按钮</button>-->
    <button @click="myFn">我是按钮</button>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        methods: {
            myFn(){
                alert('lnj')
            }
        }
    });
</script>
</body>
</html>

奔波波灞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14-常用指令-v-on

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>14-常用指令-v-on</title> <script src="js/vue.js"></script></head><body><!--1.什么是v-on指令?v-on指令专门用于给元素绑定监听事件..
复制链接

扫一扫