vue学习笔记（9）——事件处理

weixin_54763080

已于 2023-02-01 11:04:31 修改

阅读量49

点赞数

分类专栏： vue学习笔记文章标签：学习 vue.js Powered by 金山文档

于 2023-01-28 19:08:35 首次发布

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128781101

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

事件的基本应用：

使用v-on：xxx或@xxx绑定事件，其中xxx是事件名

事件的回调需要配置在methods对象中，最终会在vm上

methods中配置的函数，不要用箭头函数，否则this的指向就不是vm了

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

@click=“demo”和@click=“demo（$event）”效果一致，但后者可以传参

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <button v-on:click="showInfo">点我提示信息1(不传参)</button>
    <button @click="showInfo1(66,$event)">点我提示信息2（传参）</button>
</div>

<script type="text/javascript">
Vue.config.productionTip=false

new Vue({
    el:'#root',
    data:{
        name:'尚硅谷'
    },
    methods:{
        showInfo(event){
            alert('同学你好')
        },
        showInfo1(number,a){
            alert('同学你好!')
            ,console.log(number,a)
        }
    }
})

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

weixin_54763080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记（9）——事件处理

click=“demo”和@click=“demo（$event）”效果一致，但后者可以传参。methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。methods中配置的函数，不要用箭头函数，否则this的指向就不是vm了。使用v-on：xxx或@xxx绑定事件，其中xxx是事件名。事件的回调需要配置在methods对象中，最终会在vm上。
复制链接

扫一扫