vue入门讲解 day02

最新推荐文章于 2024-05-28 16:27:21 发布

进阶的前端工作者

最新推荐文章于 2024-05-28 16:27:21 发布

阅读量103

点赞数 1

分类专栏： vue入门文章标签： vue js html es6 css

本文链接：https://blog.csdn.net/weixin_45846177/article/details/103662424

版权

vue入门专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件绑定指令

一、书写

<标签 v-on:事件=“事件名”></标签>
<标签 @事件=“事件名”></标签>//@可以代替v-on:

二、说到事件绑定，就不得不说一下vue中的方法仓库methods,如下，在vue实例中：

methods:{ // 定义方法，方法仓库
            show:function(){
                console.log('show方法');//例子
            }
 }

三、费话不多说了，如果还有不明白的，可以留言，下面正式讲解

 <button v-on:click="show()">按钮1</button>

在这里插入图片描述
上述button按钮绑定的是clik事件，点击后的效果

一个标签也可以绑定多个事件：如：

在这里插入图片描述
上述我书写方法的书写格式，细心的小伙伴可能已经发现了，就是方法后面有的加了（）有的没加。在这边解释一下，效果是一样的
同时绑定多个事件，还有下面书写方法

<button v-on="{mouserover:show2,mouserout:show3}">多个事件绑定书写1</button>

一个事件绑定多个方法

<button v-on:click="show2(),show3()">多个事件绑定书写1</button>
<button @click="[show2(),show3()]">多个事件绑定书写2</button>

行内表达式

<body>
    <div id="app">
            <button v-on:click="show1">show1</button>
            <button @mouseover="show2()" v-on:mouseout="show3()">多个事件的绑定</button>
            <p>{{ msg }}</p>
            <button @click="msg='change'">改变P标签的msg值</button>
    </div>
</body>
<script>
    let vm =new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods: {
            show1(){
                alert("我是show1方法")
            },
            show2(){
                console.log('我是show2')
            },
            show3(){
                console.log('我是show3')
            }
        },
    });
    console.log(vm);
</script>

在这里插入图片描述
点击之后

事件绑定的参数

<!-- 
            事件绑定时方法的参数
         -->
         <!-- 将普通值作为实参 -->
        <button @click="write('aaa')">传参1</button>
        <!-- 将数据仓库中的变量作为实参 -->
        <button @click="write(msg)">传参2</button>
        <!-- 将this作为实参，此时的this指向window对象，与原生js有所不同 -->
        <button @click="write(this)">传参3</button>
        <!-- 将$event作为实参，表示事件对象，包含事件相关的信息，等同于原生js中的event -->
        <button @click="write($event)">传参4</button>
        <input type="text" @input="write($event.target.value)">

动态绑定事件

<!--  动态事件缩写 (2.6.0+)：使用[]表示变量 -->
        <button @[event]="show">动态事件绑定</button> 
        <button @click="event='mouseout'">改变事件</button>

事件绑定就写到这，大家可以自己试一下，很简单

进阶的前端工作者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门讲解 day02

事件绑定指令一、书写<标签 v-on:事件=“事件名”></标签><标签 @事件=“事件名”></标签>//@可以代替v-on:二、说到事件绑定，就不得不说一下vue中的方法仓库methods,如下，在vue实例中：methods:{ // 定义方法，方法仓库 show:function(){ ...
复制链接

扫一扫