(4) vue methods

最新推荐文章于 2025-05-15 00:48:03 发布

一蓑烟雨..

最新推荐文章于 2025-05-15 00:48:03 发布

阅读量333

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_44713688/article/details/118189563

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在Vue.js中如何定义和使用方法，强调了methods内不使用箭头函数的原因，并通过示例展示了事件监听、传递参数、事件修饰符（如.stop）的用法。同时，讲解了事件冒泡的概念，并给出了防止冒泡的例子。此外，还提到了键盘事件的监听，特别是回车键的检测。最后，展示了如何确保点击事件只触发一次的语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 如何定义一个方法：

methods: {
	fun: function () {}
	
	fun () {}
}


在methods中不能使用箭头函数，因为箭头函数的this指向的是父级，不能取到Vue实例对象

例子：

<div id="box">
        
 </div>


var Page = {
        template:`
        <div @click="fun()">
            1212
        </div>
        `,
        methods: {
            fun(){
                console.log(111)
            }
        },
    }
//新的绑定方法
    var box = new Vue({
        render:function(h){
            return h(Page)
        }
    }).$mount('#box')

Onclick 点击事件

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>



<!-- 方法传参 -->
<button v-on:click="doThis('hello')"></button>



<!-- 缩写 -->
<button @click="doThis"></button>



<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

冒泡例子：

<!-- 跳过冒泡事件和捕获事件，直接作用在该元素上的事件 -->
看下面这样一个例子 4层div嵌套
<div id="content">
   <div id="obj1" @click="fun1">obj1
      <div id="obj2" @click.self="fun2">obj2
         <div id="obj3" @click="fun3">obj3
            <div id="obj4" @click="fun4">obj4</div>
         </div>
      </div>
   </div>
</div>

// 没有阻止冒泡的情况下，
// 点击obj4依次 执行了fun4-->fun3-->fun1，跳过了fun2
// 也就是 @click.self 绑定的事件 只有直接点击了该元素时才生效，如果冒泡到了这一层会忽略并跳过冒泡

回车键

/*
 *键盘上每个按键都有对应的code码，回车键是比较常用的键位，code码为13
 * 在键盘上点击任何一个按键，都可以被检测到，也可以用code吗区分点击是哪一个键位
*/
<input @keyup.enter="onEnter">
<input @keyup.13="onEnter">

点击只会触发一次

<button @click.once="doThis">8</button>