v-on事件绑定指令
v-on:事件绑定
v-on简写:@
绑定click事件时；
代码：
<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{ },
methods:{ show:function(){
alert("欢迎来到perfect*博客园！！！");
console.log('欢迎来到perfect*博客园！！！');
}, }
})
} </script> <body>
<div id="two">
<button v-on:click="show">欢迎来到perfect*博客园</button> </div>
</body>
执行click事件时进行数据的相加：
vue:
<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{
result:0 },
methods:{ add(a,b){
console.log("add");
console.log(this==vm);
this.result=a+b; }
}
})
} </script>
html:
<div id="two">
<button v-on:click="add(1,2)">进行绑定数据相加的方法add()</button>
result:{{result}}
</div>
使用v-on的简写@时：
在vue中修改add方法即可：
add(a,b){
console.log("add");
console.log(this==vm);
this.result +=a+b;
}
使用v-on的简写@：
<button @click="add(1,2)">进行绑定数据相加的方法add()</button>
result:{{result}}
以上示例所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{
result:0 },
methods:{ // show:function(){
// alert("欢迎来到perfect*博客园！！！");
// console.log('欢迎来到perfect*博客园！！！');
// }, add(a,b){
console.log("add");
console.log(this==vm);
this.result +=a+b; }
}
})
} </script> <body>
<div id="two">
<!--<button v-on:click="show">欢迎来到perfect*博客园</button>--> <button @click="add(1,2)">进行绑定数据相加的方法add()</button>
result:{{result}} </div>
</body>
</html>
使用v-on绑定事件
注意：在编写代码中如果使用简写，所有需要用到的地方都用简写哦！！！！
v-on事件绑定指令的更多相关文章
- angularjs学习之六（angularjs中directive指令的一般编程事件绑定 模板使用等）
angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...
- vue 基础重要组件 模板指令 事件绑定
组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- MVVM设计模式和WPF中的实现（四）事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- Android中的IOC框架，完全注解方式就可以进行UI绑定和事件绑定
转载请注明出处:http://blog.csdn.net/blog_wang/article/details/38468547 相信很多使用过Afinal和Xutils的朋友会发现框架中自带View控 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- vuejs学习笔记（1）--属性，事件绑定，ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
- vuejs学习笔记（2）--属性，事件绑定，ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
随机推荐
- python 内置方法expandtabs 把字符串格式化成列表输出
#!/usr/bin/python3 # -*- coding: utf-8 -*- test = "username\tmail\tage\nzhangsen\tzhangsen@qq.c ...
- Amber TUTORIAL B5: Simulating the Green Fluorescent Protein
Section 1: Preparing the PDB file 1EMA是本次教程所用的pdb,可以在PDB数据库下载. pdb4amber -i 1EMA.pdb -o gfp.pdb --dr ...
- cocos2dx 3.x(绘制线条)
// // MainScene.hpp // helloworld // // Created by apple on 16/9/19. // // #ifndef MainScene_hpp ...
- php 下载完成后删除文件
最近遇到一个需求:下载用户上传的图片,但是图片不断更新. 1.需要将图片从图片服务器下载到网站后台服务器 2.压缩文件夹生成zip压缩包 3.下载压缩包 4.删除压缩包和临时文件夹 其中遇到了一个问题 ...
- JavaScript-模拟收银台小程序
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript 创建和浅析自定义对象
在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式:对象直接量.new 构造函数.Objec ...
- Php 通过curl提交post内容为 Json的请求
<?php $data = array("cNos" => array("1064917432615","1064917432615&qu ...
- java中的锁之AbstractQueuedSynchronizer源码分析（二）
一.成员变量. 1.目录. 2.state.该变量标记为volatile,说明该变量是对所有线程可见的.作用在于每个线程改变该值,都会马上让其他线程可见,在CAS(可见锁概念与锁优化)的时候是必不可少 ...
- Shader1.0学习笔记之SetTexture
1.语法 SetTexture [TextureName] {Texture Block} 2.Texture block combine 命令 combine src1 * src2 越乘越暗 c ...
- Redis Cluster（集群）的搭建
一.Redis的下载.安装.启动(单实例) 我们统一将Redis安装在/opt目录下,执行命令如下: $ cd /opt $ wget http://download.redis.io/release ...