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, ...
随机推荐
- 通过socket实现http通讯代码理解
1.首先构造http协议报头: String dd = "GET http://www.baidu.com HTTP/1.1" + "\r\n" + " ...
- iOS UI进阶-2.0 CALayer
在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图 ...
- Cocos Creator 音频API控制调频
*****音频的一些控制***** cc.audioEngine.playMusic(this.BGAudio,true);//播放音乐(true代表循环) cc.audioEngine.stopMu ...
- oracle 常用（二）
多表查询: 1.等值连接查询: select a.aa,a.bb,b.qq from XX a , CC b where a.aa= b.ee 2.不等值连接: select * fr ...
- js中var a=new Object()和var a={}有什么区别吗？
应该是没有区别的,两者都是生成一个默认的Object对象.js和其它语言一样,一切对象的基类都是Object,所以,new Object()和简易的{}是同样的空对象,就是默认的对象.本来我以为{}应 ...
- C# Dapper 简单实例
/// <summary> /// 分页信息 /// </summary> public class PageInfo<T> { /// & ...
- MongoDB Driver：使用正确的姿势连接复制集
from:https://yq.aliyun.com/articles/8461?spm=5176.7937264.222114.10.s2oqcT 摘要: MongoDB复制集(Replica ...
- URL List by Category
URLs List AI https://www.cnblogs.com/zlel/p/8882129.html Javascript Promise http://liubin.org/promis ...
- UVa-1025城市里的间谍 A Spy in the Metro
原题 城市里的间谍 分析 动态规划,dp[i][j]表示你在时刻i,车站j,最少还要等待的时间. 边界条件d[T][n]=0 已经到达,其他d[T][i]=inf不可达. 在一个站点时,有以下三种决策 ...
- workerman 7272端口被占用
1/问题:workerman 7272端口被占用 2/策略: 1.查找被占用的端口 netstat -tln netstat -tln | grep 8083 netstat -tln 查看端口使用情 ...