一、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. 解决 Unable to convert MySQL date/time value to System.DateTime

    C#读取MySql时,如果存在字段类型为date/datetime时的可能会出现以下问题“Unable to convert MySQL date/time value to System.DateT ...

  2. iOS 集成支付宝过程中 我遇到的一些坑，请大家注意啦（ALI69错误，ALI64错误）

    支付宝很早一段时间就集成了,之前由于一直忙于开发就没有总结,今天整理桌面的时候看到,当时做支付时候的一些散落的笔记,就稍微整理一下,给大家分享一下. 第一:当时调用支付宝的时候,总是调不起来,进过断点 ...

  3. CSS之常见文字样式整理

    常见文字样式 行高:line-height,当我i们将行高的大小设置成当前元素的高度时,可以实现当行文本在当前元素中垂直方向居中显示的效果 水平对齐方式:text-align:left|center| ...

  4. 在TreeView控件节点中显示图片

    实现效果: 知识运用: TreeView控件中Nodes集合的Add方法 //创建节点并将节点放入集合中 public virtual TreeNode Add (string key,string ...

  5. 2018.6.2 AndroidStudio项目中的问题：===== oast.LENGTH_LONG和Toast.LENGTH_SHORT分别对应多长时间

    oast.LENGTH_LONG和Toast.LENGTH_SHORT分别对应多长时间 在Android源码中的NotificationManagerService.java这个类中定义了两个静态变量 ...

  6. python生成随机数

    import random rnd=rand.uniform(0,10)

  7. tomcat的启动和部署

    方法/步骤 1 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. ...

  8. session 关于localhost和本地IP地址 不共享问题

    打比方,  一个请求 localhost:8080/test/test  ,一个本地Ip(172.1.1.1:8080/test/test) 1.请求localhost方式 HttpSession s ...

  9. Apache 错误日志

    配置文件中:httpd.conf ErrorLog "/usr/local/var/log/apache2/error_log1" CustomLog "/usr/loc ...

  10. 02.VUE学习二之数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...