vue-methods三种调用的形势
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++;
}
}
}
})
- 第一种最简单的--在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三种调用的形势的更多相关文章
- Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- vue.js 三种方式安装
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
- unity中三种调用其他脚本函数的方法
第一种,被调用脚本函数为static类型,调用时直接用 脚本名.函数名()第二种,GameObject.Find("脚本所在的物体的名字").SendMessage(" ...
随机推荐
- Spring声明周期的学习心得
我们首先来看下面的一个案例: 这里是 HelloWorld.java 文件的内容: package com.yiibai; public class HelloWorld { private ...
- Programming Model
上级:https://www.cnblogs.com/hackerxiaoyon/p/12747387.html Dataflow Programming Model 数据流的开发模型 Levels ...
- Flask-install-python2.6
命令: # 安装virtualenv $ sudo yum install python-setuptools $ sudo easy_install virtualenv OR sudo pip i ...
- Scrapy框架简介及小项目应用
今天来总结一下Scrapy框架的用法.scrapy的架构如下: Engine :引擎,处理整个系统的数据流处理.触发事务,是整个框架的核心. Items :项目,它定义了爬取结果的数据结构,爬取的数 ...
- node-koa
什么是koa 基于node.js 平台的下一代web开发框架 async await npm install --save koa npm install --save koa-router ctx. ...
- Spring Boot中的事务是如何实现的
本文首发于微信公众号[猿灯塔],转载引用请说明出处 今天呢!灯塔君跟大家讲: Spring Boot中的事务是如何实现的 1. 概述 一直在用SpringBoot中的@Transactional来做事 ...
- Lost connection to MYSQL server at 'reading for initial communication packet'
这个异常,是我在对外开放了本地数据库端口后,测试能否连接上数据库时候出现的问题: 解决步骤: 1.services.msc打开服务窗口,重启mysql,进行重试,还不行: 2.对数据库进行操作 USE ...
- USTC信息安全期末重点
一.ARP协议问题1. ARP协议的作用是什么.地址解析协议,即IP地址和MAC地址之间的转换. 2. 引入ARP缓存的功能是什么.将这一映射关系保存在 ARP 缓存中,使得不必重复运行 ARP 协议 ...
- CSS学习之选择器优先级与属性继承
CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...
- web 部署专题(零):web相关概念以及原理
1.什么是 nginx Nginx 是高性能的 HTTP 和反向代理的服务器,处理高并发能力是十分强大的,能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数. 2.正向代理 (1)需 ...