Vue - methods 方法
一、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 方法的更多相关文章
- vue methods 方法中 方法 调用 另一个方法。
vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法. 可以在调用的时候 this.$options.methods.test(); this.$options.met ...
- vue的方法和计算属性的区别
首先看看 methods 方法 // html <div id="vue"> <button v-on:click = "a++">ad ...
- vue.nextTick()方法的使用详解
什么是Vue.nextTick()?? 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...
- Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法unshift&pop&shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue methods,watch,computed的区别
1. computed(计算属性) 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的. eg: < ...
随机推荐
- SC || 记不住的正则
+表示一个或多个 *表示零个或多个 ?表示零个或一个 {n} 表示n次 {n,m}表示[n, m]次 {,n}==[0,n] {m,}==[m,INT_MAX] \d 一个数字 \D 一个非数字 \ ...
- 【luogu P3608 [USACO17JAN]Balanced Photo平衡的照片】 题解
题目链接:https://www.luogu.org/problemnew/show/P3608 乍一看很容易想到O(N^2)的暴力. 对于每个H[i]从i~i-1找L[i]再从i+1~n找R[i], ...
- 魅族MX3 Flyme3.0找回手机功能支持远程拍照密码错两次自动拍照
进入Flyme页面(http://app.meizu.com/),选择“查找手机”即可进行查找自己登记的魅族系列手机. 如果您在一个账号下登记过N多魅族系列手机,那么都是可以进行查找的,参见下图 魅族 ...
- 基于supersocket、C#对JT808协议进行解析构建gps监控平台服务端
GPS监控平台.车联网.物联网系统中GPRS网络数据的并发通讯和处理解析,主要功能有socket的UDP和TCP链路建立和维持,网络数据协议包接收与解析,分发上传到其他业务规则服务器,在物联网以及位置 ...
- Node第二天
一.http模块: 步骤一:创建http服务器 const https = require('https'); 步骤二:const fs = require('fs'); 步骤三:创建请求=> ...
- GIT 团队协作快速入门使用
GIT使用: 1.本地新建一个文件夹 git init 2.克隆远程仓库 git clone git@xxxxx.git 3.本地创建一个dev分支 (前提是服务器端已经创建好有 DEV 分支) gi ...
- ElasticSearch High Level REST API【6】获取集群信息
ElasticSearch 可以通过info()方法检索群集信息: public void info(){ RestHighLevelClient client = elasticClient.get ...
- thinkphp 3.2.3 - Dispatcher.class.php 解析（转发器）
class Dispatcher { public static function dispatch() { $varPath = C('VAR_PATHINFO'); // 's' $varAddo ...
- 模型类序列化器ModelSerializer
定义 比如我们创建一个BookInfoSerializer class BookInfoSerializer(serializers.ModelSerializer): ""&qu ...
- B1023 组个最小数 （20分）
B1023 组个最小数 (20分) 给定数字 0-9各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 ...