一、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. IOS 绘制基本图形（ 画圆、画线、画圆弧、绘制三角形、绘制四边形）

    // 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...

  2. noip模拟赛#42

    T1:给len=1e5的数字串,操作为将某个位置起始的后缀搬到最前面.求有多少个不重复的比原串大和多少个小. =>maya这铁定可以找出些什么规律来.然后就over 了. =>字符串has ...

  3. 2018.10.05 TOPOI提高组模拟赛 解题报告

    得分: \(100+5+100=205\)(真的是出乎意料) \(T1\):抵制克苏恩(点此看题面) 原题: [BZOJ4832][Lydsy1704月赛] 抵制克苏恩 应该还是一个比较简单的\(DP ...

  4. java 学习集锦

    java学习系列 http://www.cnblogs.com/skywang12345/category/455711.html

  5. 网络编程——网络模型和InetAddress类

    第1章 网络通信协议 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网络中,这些连接和 ...

  6. jeesite项目

    1,登录页面.最高权限管理员 用户名:thinkgem  密码:admin 2,登陆之后展示的首页 3,分为不同的模块,由不同的入负责,我负责日志管理 已完成功能:模糊查询,分页,导入,导出Excel ...

  7. 黑马基础阶段测试题：创建Phone（手机）类，Phone类中包含以下内容：

    package com.swift; public class Phone { private String pinpai; private int dianliang; public String ...

  8. java中equals和==的区别详解

    java中的数据类型,可分为两类: 1.基本数据类型. byte,short,char,int,long,float,double,boolean这八大原始数据类型他们之间的比较,使用“==”,比较的 ...

  9. 5-3 time模块

    1.取当前时间戳和当前格式化时间 import time1 # 以时间戳的形式打印当前时间 1543849862 print(int(time.time()))#时间戳 # 取当前格式化好的时间 20 ...

  10. mysql零散操作

    添加对外用户 CREATE USER 'admin'@'%' IDENTIFIED BY '!QAZ2wsx'; GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%'; ...