一、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. MRCA|Wright–Fisher population genetic model|SNP rate

    (Panda has a high heterozygosity rate) 通过对mtDNA(为了预测SNP的密度)的分析,可知panda的多样性,当前全基因组数据才能完全建立模型. mitocho ...

  2. 多线程中使用HttpContext.Current为null的解决办法

    HttpContext.Current.Server.MapPath(logFile)   这个是得到具体路径的方法  正常情况下是可以的 多线程情况下就为null 下边的代码原本的作用是把网站的异常 ...

  3. python换行

    python中如果一行代码太长,看着不方便时,怎么办? 只需要在需要换行的地方添加上符号 \ 就行了.

  4. java基础面试题：说说&和&&的区别

    &与&&都是逻辑与 不同的是&左右两边的判断都要进行,而&&是短路与,当&&左边条件为假则不用再判断右边条件,所以效率更高 例如,对于i ...

  5. 洛谷P2908 [USACO08OPEN]文字的力量Word Power

    题目描述 Farmer John wants to evaluate the quality of the names of his N (1 <= N <= 1000) cows. Ea ...

  6. iftop工具指令选项记录

    iftop是实时监控网卡流量的工具,功能十分强大,指令选项非常多,用法比较复杂,下面记录一下命令的选择作用 相关参数及说明 1.iftop界面相关说明 界面上面显示的是类似刻度尺的刻度范围,为显示流量 ...

  7. IE console报错

    需要注意的是,使用console对象查看对象信息,在IE8浏览器下未打开开发人员工具(F12)的情况下 会报'console'未定义错误. 解决办法:1.打开开发人员调试工具(F12)        ...

  8. 关于欧几里德算法（gcd）的证明

    求a,b的最大公约数我们经常用欧几里得算法解决,也称辗转相除法, 代码很简短, int gcd(int a,int b){ return (b==0)?a:gcd(b,a%b); } 但其中的道理却很 ...

  9. spring-data-mongodb

    [引入maven依赖] <!-- mongodb spring --> <dependency>     <groupId>org.springframework. ...

  10. JQ剪辑图片插件，适用于移动端和PC端

    主要用到以下JS文件: <script src="js/photo/iscroll-zoom.js"></script> <script src=&q ...