1. var btn = {
  2. template:`<button>组件add</button>`
  3. }
  4. var any = new Vue({
  5. el: '#app',
  6. data:{
  7. a:1
  8. },
  9. components: {
  10. btn
  11. },
  12. methods:{
  13. add:function(num){
  14. if(num != ''){
  15. this.a+=num
  16. }else{
  17. this.a++;
  18. }
  19. }
  20. }
  21. })
  1. 第一种最简单的--在vue实例中调用
  1. <div id="app">
  2. {{ a }}
  3. <p><button @click="add(2)">add</button></p> //第一种方式
  4. <p><btn @click.native="add(2)"></btn></p> //第二种方式
  5. </div>
  6. <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. css样式学习笔记

    视频参见php中文网玉女心经视频教程 讲解的相当的清楚和明白 第1章     :css快速入门 1.1     什么是css 改变html框架的样式. 1.2     css的三种引入形式 第一种形式 ...

  2. 底层剖析Python深浅拷贝

    底层剖析Python深浅拷贝 拷贝的用途 拷贝就是copy,目的在于复制出一份一模一样的数据.使用相同的算法对于产生的数据有多种截然不同的用途时就可以使用copy技术,将copy出的各种副本去做各种不 ...

  3. bug和测试报告思维导图

    Bug定义: 1.不符合需求的 2.程序本身的报错 3.不符合用户使用习惯的 Bug生命周期: 当我们测试人员提交一个bug的时候,自始bug就有它的生命周期,从开始到结束, 把测试的过程和结果写成文 ...

  4. 懂了!VMware/KVM/Docker原来是这么回事儿

    云计算时代,计算资源如同小马哥当年所言,已经成为了互联网上的水和电. 虚拟主机.web服务器.数据库.对象存储等等各种服务我们都可以通过各种各样的云平台来完成. 而在云计算欣欣向荣的背后,有一个重要的 ...

  5. Maven中央仓库正式成为Oracle官方JDBC驱动程序组件分发中心

    1. 前言 相信参与使用Oracle数据库进行项目开发.运维的同学常常被Oracle JDBC驱动的Maven依赖折磨.现在这一情况在今年二月份得到了改变,甲骨文这个老顽固终于开窍了. 一位甲骨文的工 ...

  6. 病毒Virus

    病毒Virus 一本通P1396 病毒Virus 题目简述 给定\(k\)个被病毒感染了的字符串,知道这\(k\)个字符串原本是按字典序从小到大排列,最后给出一个待复原的字符串\(s\),要求根据上面 ...

  7. Windows7 PowerShell 2.0升级到 PowerShell 5.1

    Windows7 sp1内置的PowerShell的版本是v2.0,现需要将其升级到v5.1,过程中有一个环节需要引起注意,为了以后查阅的方便,现将其记录下来. 1 查看PowerShell版本 Wi ...

  8. gitlab、github账户密码修改后,记得修改本地账户的git凭据

    忘记了修改本地git账户的凭据,导致推送失败,后来才发现是本地的凭据没修改.

  9. 面向切面对象AOP

    前言 面向切面编程(思想)AOP Aspect Oriented  Programming,是面向对象基础上 更关注最终目标 而不关注中间的小目标,简而言之,就是我们的目标(例如constroller ...

  10. 【线型DP】【LCS】UVA_10635 Prince and Princess

    嘤嘤嘤,我又来了,刚A完就写,这个沙雕题有丶恶心.                  ???时间4.11发现所有表情包都莫得了 题目: In an n×n chessboard, Prince and ...