一、methods中参数的传递

使用方法和正常的javascript传递参数的方法一样，分为两部：

1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.

2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.

现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>methods Option</title>
</head>
<body>
    <h1>methods Option</h1>
    <hr>
    <div id="app">
        {{ a }}
        <p><button @click="add(2)">add</button></p>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                a:1
            },
            methods:{
                add:function(num){
                    if(num!=''){this.a+=num}
                    else{this.a++}
                }
            }
        })
    </script>
</body>
</html>

这时，再点击按钮是每次加2个数字。

二、methods中的$event参数

传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。

传递：<button @click=”add(2,$event)”>add</button> 。

我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。

三、native  给组件绑定构造器里的原生事件。

在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

现在我们把我们的add按钮封装成组件：

声明btn对象：

 
var btn={
    template:`<button>组件Add</button>`    
}

在构造器里声明：

 
components:{
    "btn":btn
}

用.native修饰器来调用构造器里的add方法

 
<p><btn @click.native="add(3)"></btn></p>

四、作用域外部调用构造器里的方法

这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

 
<button onclick="app.add(4)" >外部调用构造器里的方法</button>

Vue - methods 方法的更多相关文章

  1. vue methods 方法中 方法 调用 另一个方法。

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法. 可以在调用的时候 this.$options.methods.test(); this.$options.met ...

  2. vue的方法和计算属性的区别

    首先看看 methods 方法 // html <div id="vue"> <button v-on:click = "a++">ad ...

  3. vue.nextTick()方法的使用详解

    什么是Vue.nextTick()??   定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...

  4. Vue 变异方法filter和正则RegExp对评论进行搜索

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue 变异方法sort&reverse对评论进行排序

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue 变异方法unshift&pop&shift

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue 变异方法Push的留言板实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue methods,watch,computed的区别

    1. computed(计算属性) 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的. eg: < ...

随机推荐

  1. Android（java）学习笔记82：利用SpannableString设置复合文本

    1. SpannableString设置复合文本: TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来 ...

  2. [论文理解]Focal Loss for Dense Object Detection（Retina Net）

    Focal Loss for Dense Object Detection Intro 这又是一篇与何凯明大神有关的作品,文章主要解决了one-stage网络识别率普遍低于two-stage网络的问题 ...

  3. 2018.6.13 Java语言基础复习总结

    Java语言基础与面向对象编程实践 第一章 初识Java 1.1机器语言 机器语言是指一台计算机全部的指令集合.机器语言室友0和1组成的二进制数,是一串串由0和1组成的指令序列,可将这些指令序列交给计 ...

  4. python_12_continue

    for i in range(9): if i<3: print("loop",i) else: continue#跳出本次循环,继续到下一循环 print('hehe... ...

  5. Luogu [P1958] 上学路线_NOI导刊2009普及（6）

    上学路线_NOI导刊2009普及(6) 题目详见:上学路线_NOI导刊2009普及(6) 这是一道基础的DFS(深搜)题,堪称模板,是新手练习搜索与回溯的好题选. 大致思路:从(1,1)开始搜索,每次 ...

  6. java实现微信扫一扫详解

    java实现微信扫一扫详解 一.微信JS-SDK参数配置及查找 JS安全域名配置(查找:微信公众号里-公众号设置-功能设置页) 注:1.安全域名外网必须可以访问的到  2.域名不能有下划线  3.要将 ...

  7. Java poi 导出Excel并下载到客户端

    Maven配置,包含了其他文件格式的依赖,就全贴出来了 <dependency> <groupId>org.apache.poi</groupId> <art ...

  8. EventUtil处理js兼容性问题

    var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ elem ...

  9. [译]The Python Tutorial#11. Brief Tour of the Standard Library — Part II

    [译]The Python Tutorial#Brief Tour of the Standard Library - Part II 第二部分介绍更多满足专业编程需求的高级模块,这些模块在小型脚本中 ...

  10. js中正则表达式与Python中正则表达式的区别

    今天女票让我帮她写一个js中的正则,来提取电话号码,对于正则规则来说,js与python是基本没有区别的,重点的区别是在一些函数与方法中. python中的正则提取: import re str = ...