08.Vue.js : v-on 事件绑定

最新推荐文章于 2023-06-13 16:02:56 发布

_人间清醒

最新推荐文章于 2023-06-13 16:02:56 发布

阅读量140

点赞数

分类专栏： Vue.js 文章标签： vue.js v-on

本文链接：https://blog.csdn.net/vivian_1122/article/details/88709067

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>v-on</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <!-- v-on 指令用来监听dom 事件
                使用方法：
                1.在标签的属性位置上写上v-on: 任意的事件类型='执行的函数';
                2.简写:@任意的事件类型='执行的函数';(推荐使用)
                3.通过执行函数添加参数
                4.通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号
                5.事件修饰符：可以给事件添加特殊功能.stop .prevent
                6.按键修饰符：可以给和按键相关的事件添加按键修饰符 常用的有 .enter
             -->
        <!-- 只有在 'keyCode' 是13 时调用 'vm.submit()'-->
        <input type="text" @keyup.13='submit'>
        <!-- 阻止单击事件继续传播 -->
        <a href='http://www.baidu.com' @click.stop='doThis'></a>
        <!-- 提交事件不再重载页面 -->
        <a href='http://www.baidu.com' @click.prevent='changeMsg'>跳转</a>
        <a @submit.prevent='onSubmit'></a>
        <button v-on:click='changeMsg'>点击改变</button>
        <button @click='changeMsg'>简写</button>
        <button @click="changeMsgArg('vivian')">传参</button>
        <button @click="getEvent($event)">事件对象</button>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'vivi'
            },
            //在methods属性中定义函数
            methods: {
                changeMsg() {
                    //注意在methods中想要去获取data中的属性的话，需要加上this,this表示vue实例
                    this.name = 'vivian'
                },
                changeMsgArg(arg) {
                    this.name = arg
                },
                getEvent(e) {
                    console.log(e)
                },
                submit() {
                    console.log('submit')
                }

            },
        })
    </script>
</body>

</html>

_人间清醒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
08.Vue.js : v-on 事件绑定

<!DOCTYPE html><html lang="en"><head> <title>v-on</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫