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, ...
随机推荐
- [Git/GitHub] Tutorial 1. Git download and commit first project
1. Install at https://git-scm.com/downloads 2. Set up your name and email $ git config --global user ...
- 玩nginx部署不同的web app
需求:一台服务器上部署多个应用 ,比如www.host.com/app 映射到 www.host.com:8081 实现方法:1. nginx 使用把路径访问映射到端口上.但是遇到一个问题是web a ...
- Elasticsearch集群管理工具head插件安装
Elasticsearch-head是一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序,你可以通过插件把它集成到es.或直接下载源码,在本地打开index.html ...
- 转：django模板标签{% for %}的使用（含forloop用法）
django模板标签{% for %}的使用(含forloop用法) {% %}虽然这个是写在html中,但是这里边写的是服务端代码 在django模板标签中,{% for %} 标签用于迭代序列 ...
- shell基础：多命令顺序执行与管道符
有些命令的前后关系正是需要这样的关系来实现. 如在软件包的安装中: 第三个是个简单的判断:
- vue框架(三)_vue引入jquery、bootstrap
一.vue安装jquery 1.按照之前博客的内容,新建一个vue工程. 2.在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 3.在build/ ...
- idea上将项目上传到github
1.下载并安装好git,然后配置git的path路径.再配置git的全局用户名和邮箱. 2.注册github账号,如果已经有github账号,则此步骤可以省略. 3.在idea中配置git,配置如下: ...
- [1]windows 内核情景分析---说明
本文说明:这一系列文章(笔记)是在看雪里面下载word文档,现转帖出来,希望更多的人能看到并分享,感谢原作者的分享精神. 说明 本文结合<Windows内核情景分析>(毛德操著).< ...
- 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- html5-div布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...