var btn = {
template:`<button>组件add</button>`
} var any = new Vue({
el: '#app',
data:{
a:1
}, components: {
btn
},
methods:{
add:function(num){
if(num != ''){
this.a+=num
}else{
this.a++;
}
}
} })
  1. 第一种最简单的--在vue实例中调用
    <div id="app">
{{ a }}
<p><button @click="add(2)">add</button></p> //第一种方式
<p><btn @click.native="add(2)"></btn></p> //第二种方式
</div>
<button onclick="any.add(2)">add++</button> //第三种方式

在Vue当前组件中直接调用add @click="add(2)"直接绑定就可以了

在子组件中调用父组件的方法 @click.native="add(2)" 需要调用加上事件修饰符

在vue实例外面,直接以原生的方式调用组件中的方法

onclick="any.add(2)" 需要通过组件. 方法名的形势调用

vue-methods三种调用的形势的更多相关文章

  1. Vue组件的三种调用方式

    最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...

  2. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  3. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  4. 【转】SVG与HTML、JavaScript的三种调用方式

    原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...

  5. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

  6. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  7. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  8. Vue 常用三种传值方式

    Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...

  9. unity中三种调用其他脚本函数的方法

    第一种,被调用脚本函数为static类型,调用时直接用  脚本名.函数名()第二种,GameObject.Find("脚本所在的物体的名字").SendMessage(" ...

随机推荐

  1. vipkid 面试经历

    今天下午去了位于钟鼓楼旁边的 vipkid 研发部进行了面试,面试过程中的回答只能说一般,面试官问的问题大概分为: 实际项目的设计问题 mysql的使用优化问题 多线程与锁的问题 JVM底层原理的问题 ...

  2. git 如何解决 (master|MERGING)

    git 如何解决 (master|MERGING) git reset --hard head //回退版本信息 git pull origin master

  3. java-IO流(commons-io-2.6)使用教程

    工具库下载: https://pan.baidu.com/s/1tXXF4zjIfJ9ouObsU5RTpA  提取码:214v 1.打开IDEA 2.在模块下新建个lib文件夹将框架复制进去 3.点 ...

  4. 实现MFC扩展DLL中导出类和对话框

    如果要编写模块化的软件,就要对对动态链接库(DLL)有一定的了解,本人这段时间在修改以前的软件时,决定把重复用的类和对话框做到DLL中,下面就从一个简单的例子讲起,如何实现MFC扩展DLL中导出类和对 ...

  5. 猿灯塔-Phaser 使用介绍

    原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 本文将介绍 java.util.concurrent.Phaser,一个常常被大家忽略的并发工具.它和 CyclicBarrier 以及 Co ...

  6. 关于gulp复制文件时把整个目录结构都复制的问题解决

    有这么个场景,在开发时分模块开发,但是发布时不一定将按模块分布,比如,为了便于开发,图片是按照模块存放的,但是发布时只是放在images文件夹下,此时就需要用到本文中提到的插件gulp-flatten ...

  7. P2034 选择数字——线性dp(单调队列优化)

    选择数字 题目描述 给定一行 \(n\) 个非负整数 \(a[1]...a[n]\) .现在你可以选择其中若干个数,但不能有超过 \(k\) 个连续的数字被选择.你的任务是使得选出的数字的和最大. 输 ...

  8. PE文件格式详解(五)

    0x00 前言 前一篇了解了区块虚拟地址和文件地址转换的相关知识,这一篇该把我们所学拿出来用用了.这篇我们将了解更为重要的一个知识点——输入表和输出表的知识. 0x01 输入表 首先我们有疑问.这个输 ...

  9. 阿里云服务器ecs配置之安装jdk(转)

    一.安装环境 操作系统:Centos 7.4 JDK版本:1.8 工具:Xshell5.Xftp5 二.安装步骤 第一步:下载安装包 (官网)链接: 下载适合自己系统的jdk版本,如图:我下载的是64 ...

  10. 真懂Spring的@Configuration配置类?你可能自我感觉太良好

    当大潮退去,才知道谁在裸泳.关注公众号[BAT的乌托邦]开启专栏式学习,拒绝浅尝辄止.本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈.MyBatis.中 ...