Vue选项之methods方法的四个注意点

最新推荐文章于 2024-06-12 12:41:38 发布
最新推荐文章于 2024-06-12 12:41:38 发布
阅读量1.5w 收藏 18
点赞数 4
分类专栏： 十二.vue 文章标签： Vue选项之methods方法的四个注意点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaodi520520/article/details/88808898
版权

methods方法中有四个注意点:

一.在methods方法里传入参数;

1.在html里写要传入的值;

<button @click="add(2)">ADD</button>

2.在方法里接收;
在这里插入图片描述

二.methods方法里的第二个参数$event:它传递的是关于鼠标的一些属性和方法

在这里插入图片描述

三.使用native修饰符给组件绑定vue构造器里的原生事件.

默认在别的组件里使用vue构造器里的方法是不管用的,怎么解决呢?
使用native(意思原生)修饰符来绑定构造器里的原生方法,操作如下:
在这里插入图片描述

四.在html作用域外部调用构造器里的方法(很少用).

使用原生的行内事件绑定构造器的方法即可,操作如下:
在这里插入图片描述
最终实现效果:
在这里插入图片描述

庚中
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅析Vue中method与computed的区别
08-27
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
方法（method）
XYZ1110i的博客
03-13 1423
方法（method）：就是完成特定功能的模块 1.定义了方法，不代表方法就执行了，而是需要去调用方法， 2.在一个类中，可以定义一个无数的方法，方法可以定义在类中任何位置（Java是通过方法名在整个类中查找并执行的） 1.2带参数方法的定义和调用 定义 调用格式 注意事项： 带参方法调用时，参数的数量与类型必须与方法定义中的设置相匹配，否则程序将报错 1.3形参和实参 形参：方法顶i一中的参数 等同与变量定义的格式，例如：int number 实参：方法调用中的参数 .
Vue配置项之methods
最新发布
weixin_45134711的博客
06-12 872
首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。
Vue methods中的参数的传递、$event参数以及.native使组件调用构造器里面的方法，而不是组件中的方法
u010234868的专栏
09-22 596
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
html5 setdata函数,Vue中data、methods、computed等使用注意点
weixin_27012987的博客
07-01 833
1.data1.1 当将Vue 实例外声明的属性赋值给data 中的属性，两者变量名相同时，data 中的属性可以简写，如:var items = [1, 2, 3]; 赋值data 中的items 时可以这样写:data(){return{items, //此处的简写为es6 中的语法msg:"外界如何获取data 中的数据"}}1.2 Vue 实例外获取data 属性时有两种方法，方法一: ...
Vue的方法的调用以及传参
热门推荐
江夏、的博客
07-30 1万+
前面讲到了如何用CDN的方式引入vue.js。在Vue中方法(methods)和data属于同一量级的属性，所以在Vue中有methods模块，对于方法的定义都定义在这个区域内。如下，在methos内定义一个say的方法，返回，他说要好好学习 同样在html的根容器的标签下，引入say方法，同data中name的调用，因为say是个方法，方法后面应该加(),如下： 用浏览器打开inde...
vue this.reload 方法 配置
10-18
Vue的`provide`和`inject`选项提供了一种祖先组件向子孙组件传递数据的方法，即使层级很深，也可以实现数据共享。在这种情况下，我们可以利用它来实现局部刷新。 **1. 配置父组件（如`Home.vue`）** ```javascript ...
vue-四则两数计算器
06-18
在这个项目中，JavaScript主要包含在Vue实例的`methods`选项里，这些方法对应于不同的按钮点击事件。当用户点击数字或运算符按钮时，对应的JavaScript方法会被调用，从而更新Vue实例的数据。例如，`add()`方法会处理...
vue项目tween方法实现返回顶部的示例代码
08-27
这段代码中，`backTop`方法内部使用了`tween.js`的线性插值函数（Linear），它接受四个参数：`t`（当前时间）、`b`（初始值）、`c`（变化量）和`d`（持续时间）。在这个例子中，`b`是初始滚动位置，`c`是期望的滚动...
vue select二级联动第二级默认选中第一个option值的实例
08-28
Vue Select 二级联动第二级默认选中第一个 Option 值的实例详解 在本篇文章中，我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值，希望对大家有所帮助。 知识...
分别使用VUE的表达式、方法、计算属性、监听器实现计算器功能
04-02
Vue的方法定义在Vue实例的`methods`选项中，可以包含任何JavaScript代码。例如，我们可以定义一个名为`add`的方法来执行加法操作： ```javascript methods: { add(a, b) { return a + b; } } ``` 然后在模板中...
vue中method调用另一个method获取不到参数的问题
CaseyWei
11-02 3962
最下边完整代码25行如果是下边代码的话，  this.$options.methods.fun2(); fun2（）会获取不到fun1（）传递给fun2（）的test参数，为underfind，改为如下即可。  this.fun2() 以下为完整代码：  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN...
vue函数参数写法_请问，vue中methods传参，改成 computed计算属性 然后返回一个函数的写法有什么区别吗，那种更好或者都一样？...
weixin_39979215的博客
01-12 1273
先上代码：html:v-for="item in 20":class="computedClass(item)"@click="clickIndex = item">{{item}}js:data:{clickIndex:-1},methods:{methodsClass(index){console.log('methodsClass')return this.clickIndex ===...
Vue数据（data）方法（methods）、计算（computed）的介绍使用
y17757773039的博客
09-08 6250
今天学习的vue的一些基本方法属性（data，methods，computed）
vue中的带参数的方法如何传递其他参数
忆璇的博客
10-13 1374
在vue开发中我们经常用到控件提供的事件方法，比如el-select的@change方法，比如el-upload的on-success方法，这些方法是有默认回调参数的，这时候如果想自己再传递别的参数，该如何处理呢？
vue的methods方法和computed计算属性和filter过滤器 附.购物车代码
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
08-15 2026
数据加载完成自动更新一次并且存储数据 在数据发生改变的时候自动进行刷新。默认参数就是 | 左边的值 第二个值开始就是传递的参数。必须使用return 返回数据。必须使用return返回数据。可以使用多个过滤器 注意顺序。...
Vue2学习计划二：mustache与methods和computed等Vue实例参数
ynztwlz的博客
07-28 216
上一节写了Vue实例的生命周期，我们心里有了个Vue里的数据绑定至DOM，那么具体怎么实现的呢？ 要实现只需要在Vue绑定的DOM元素中使用mustache语法即可，简单例子如下 <div id="app"> <h2>{{message}}</h2> <hr> <h3>全名：{{fullName}}</h3> <h3>lastName：{{lastName}}</h3> <h3>f
Vue Methods 方法的使用（VUE学习5）
b312738566的博客
12-29 1465
data() {return {xPos: 0,yPos: 0},methods: {// 将鼠标在div内的X和Y坐标保存到数据属性xPos和yPos中data() {return {text: ''},methods:{data(){return{count:0},methods:{data(){return{},methods:{
Vue中的methods方法使用技巧,三分钟迅速读懂
qq_42176665的博客
11-09 1万+
关于vue中methods的使用技巧
Vue面试深度解析：核心概念与实战技巧
"VUE相关面试题，涵盖了Vue.js的基础知识、核心概念、与React的对比、Vuex、axios、vue-router等多个方面。" 一、基础知识 1. MVC和MVVM的概念 MVC（Model-View-Controller）是一种软件设计模式，其中Model处理数据...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值