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, ...
随机推荐
- DLNg改善深层NN：第一周DL的实用层面
1.为什么正则化可以减少过拟合? //答:可以让模型参数变小,减小模型的方差. 在损失函数中加入正则项,在正则化时,如果参数lamda设置得足够大,那么就相当于权重系数W接近于0 ,就会减少很多隐藏单 ...
- Keras和tf关系【转载】
转自:https://blog.csdn.net/capecape/article/details/78390246 TensorFlow和theano以及Keras都是深度学习框架,TensorFl ...
- SaltStack 数据系统 Grains Pillar
grains 先来一个很好用的命令 # salt '*' grains.items \\基本上输出了所有你想要的信息 192.168.100.138: ---------- SSDs: biosrel ...
- Laravel中路由怎么写（二）
1.路由命名——给路由起个名字 1.1 基本使用 我们使用as关键字来为路由命名: Route::get('/hello/Laravel',['as'=>'academy',function() ...
- 小a和uim之大逃离
题目传送门 #include <bits/stdc++.h> using namespace std; #define ll long long #define re register # ...
- js关卡函数，throat函数实现，定时运行函数
function throat(callback,num){ var timer = null; callback = callback || function(){}; return functio ...
- JDB调试
- gparted 不能起作用的时候，用fdisk
我用的是vmware,从网上下载的centos 6.3版本,通过yum update,其最后更新为6系列的最终版本6.7. 没有仔细看磁盘空间,因为某种原因,为了远程登录,我安装了xfce4桌面,后来 ...
- NserviceBus:消息Message、Command、Event（2）
NServiceBus.IMessage 用于定义消息.NServiceBus.ICommand 用于定义命令.NServiceBus.IEvent 用于定义事件. ICommand 命令 用于点对点 ...
- Navicat Premium 安装与激活破解版简单操作 （原）
首先下载navicate程序以及破解文件,这里一并存到了百度网盘直接下载即可 链接:https://pan.baidu.com/s/11ptFmsV1o3B5oB00zm2NdQ 密码:yw82 解压 ...