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, ...
随机推荐
- github pages搭建网站（三）
一.个人站点 访问 https://用户名.github.io 搭建步骤 (1)创建个人站点 ->新建仓库(注:仓库名必须是[用户名.github.io]) (2)在仓库下新建index.htm ...
- 特征选择：Filter/Wrapper/Embedded
一.特征的来源 在做数据分析的时候,特征的来源一般有两块,一块是业务已经整理好各种特征数据,我们需要去找出适合我们问题需要的特征:另一块是我们从业务特征中自己去寻找高级数据特征.我们就针对这两部分来分 ...
- iOS UI进阶-5.0 蓝牙/加速计/传感器
传感器 实现代码: #import "ViewController.h" @interface ViewController () @end @implementation Vie ...
- 4.后台管理系统中的ajax提交或保存的两次模态框确认
$(function () { $('.ajaxForm').ajaxForm({ beforeSubmit:showPleaseWait,//提交之前 ...
- Linux系统安装nodejs
参考文档 官网连接 镜像连接 安装方法有三种: 1. 源码安装(耗时) 2. apt-get / yum 安装(版本比较低) 3. 解压后创建软连接(推荐) 方法一. 1 ) 指定目录下下载源码包 $ ...
- EXTENDED LIGHTS OUT (高斯消元）
In an extended version of the game Lights Out, is a puzzle with 5 rows of 6 buttons each (the actual ...
- sitecore系列教程之简单和个性化
现代Web开发倾向于关注内容管理系统(CMS)的功能丰富的程序.最终用户可以做什么?作为内容管理者,我们可以为最终用户实现其目标提供哪些功能?开发人员可以为内容管理员构建哪些组件来实现它们? 相关内容 ...
- jQuery事件--keypress([[data],fn])和trigger(type,[data])
keypress([[data],fn]) 概述 当键盘或按钮被按下时,发生 keypress 事件 keypress 事件与 keydown 事件类似.当按钮被按下时,会发生该事件.它发生在当前获得 ...
- 【2017-03-23】CSS基础：内联样式
CSS:层叠式样式表 1.对层标签整体进行操作 <div style="width:200px;height:200px;background-color:blue"> ...
- File §2
Previously speaking,File can be seen as one ducument, also can be seen as list of documents like dir ...