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(" ...
随机推荐
- 3、尚硅谷_SSM高级整合_创建Maven项目.avi
Maven中dependencyManagement作用说明 在Maven多模块的时候,管理依赖关系是非常重要的,各种依赖包冲突,查询问题起来非常复杂,于是就用到了<dependencyMana ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- SpringMVC 学习笔记(六)拦截器
5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器) 类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. ...
- Springboot--元注解及自定义注解(表单验证)
本文简单说明一下元注解,然后对元注解中的@Retention做深入的讨论,在文章最后使用元注解写一个自定义注解来结尾. 一.结论: @Target:注解的作用目标 @Target(ElementTyp ...
- 错误记录-MySql.Data.MySqlClient.MySqlException (0x80004005): Timeout expired.
-- ::25.026 +: [ERR] Connection id "0HLQH64H76UL5", Request id "0HLQH64H76UL5:0000000 ...
- 自定义PHPstorm快捷键
这篇随笔介绍一下PHPstorm自定义快捷键的步骤: 1.点击主菜单 File 下的 setting : 2.在弹出框中点击 Keymap : 3.之后会出现如下图所示的界面(图中所有的菜单都折叠了) ...
- html中为何经常使用<i>标签来作为小图标呢?
很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小i ...
- 逻辑式编程语言极简实现(使用C#) - 4. 代码实现(完结)
本文是本系列的完结篇.本系列前面的文章: 逻辑式编程语言极简实现(使用C#) - 1. 逻辑式编程语言介绍 逻辑式编程语言极简实现(使用C#) - 2. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...
- 推荐一款ui架构--frozenui
首页是这样定义的 移动框架 重磅出击 简单易用,轻量快捷,为移动端服务的前端框架 链接地址 http://frozenui.github.io/base.html#layout
- BUUCTF-BJD(更新V1.0)
CTF-Day1 (PS:第一次写博客,就是想记录自己的一一步一步) Misc: 问卷调查 | SOLVED |题最简单的misc-y1ng | SOLVED |Real_EasyBaBa | SOL ...