Vue2学习笔记:v-on
Vue的事件：
v-on: click/mouseover/mouseover/mousedown/dbclick/...
下面是点击事件介绍：
1.点击事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(){
alert('这是点击事件！');
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="show()">
</div>
</body>
</html>
当点击按钮的时候，弹出alert!
2.向数组添加元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
arr:['1','2']
},
methods:{
add:function(){
var num = this.arr.length+1;
this.arr.push(num); //给数组累加1
//这里的this就是实例化后的对象vm
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="add()"> <br />
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</div>
</body>
</html>
结果，按一次列表累加1
Vue2学习笔记:v-on的更多相关文章
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- Vue2 学习笔记3
文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...
- vue2 学习笔记2
文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...
- Vue2学习笔记:键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue2学习笔记:v-for指令
1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...
- vue2 学习笔记
一.部署环境1.安装nodeJS -- 地址:https://nodejs.org/zh-cn/ 2.安装vue脚手架 (用于创建VUE项目的) 进入项目文件或者新建一个文件 npm install ...
- Vue2 学习笔记5
文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...
- Vue2 学习笔记4
文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...
- Vue2学习笔记:计算属性（computed）
参考:https://www.cnblogs.com/zycbloger/p/6428907.html
- Vue2学习笔记:组件（Component）
组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
随机推荐
- Java的try-catch-finally
Javac语法糖之TryCatchFinally 如下引用文章:https://help.semmle.com/wiki/display/JAVA/Finally+block+may+not+comp ...
- android 解决studio生成aar包并在其他工程引用aar包的坑，不需要任何gradle配置
1.首先我们创建一个module 2.编写我们的一个类 3.编译我们的module,生成release版本的aar,注意千万不要是debug版本的, 点击最右边的gradle面板,选择我们的modul ...
- dynamic解析Http xml格式响应数据
继续上一篇 构建RESTful风格的WCF服务 ,咱已经把服务端的数据和服务准备好了,客户端调用 wcf rest接口后如何解析xml?下面使用dynamic关键字解析来至于WCF REST XML响 ...
- filebeat+ELK日志系统
架构图 filebat logstash elasticsearch 基于elasticsearch6.3.2 elasticsearch(一) 之 elasticsearch初识 elasticse ...
- java的逻辑与和短路与
逻辑与 --& 短路与 -- && 只说一个最大的区别,平时我们用的最多的是 短路与来进行逻辑判断: 短路与(或)会从左往右逐个判断式子,只要能得出结果后面的式子不再判断.逻辑 ...
- ruby冒泡算法删除店铺下的重复评论
Shop.each do |shop| if !shop.comments.blank? n = shop.comments.length for i in 0..n-1 for j in i+1.. ...
- SQL SERVER 原来还可以这样玩 FOR XML PATH
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- 7行代码看EntityFramework是如何运行
这段时间在项目中运用Entity Framework作为底层数据交互框架.一个字,爽.不仅提高了开发效率,省了很多代码,而且数据库也规范了很多.按照网上的一些教程初步学习,然后实际运用了,再结合MVC ...
- day-01mysql数据库下载安装卸载及基本操作
MySQL5.5.40破解版地址(永久有效):链接:https://pan.baidu.com/s/1n-sODjoCdeSGP8bDGxl23Q 密码:qjjy 第2节 数据库的介绍 MySQL:开 ...
- importnew:Map大家族的那点事儿
Map大家族的那点事儿(1) :Map Map大家族的那点事儿(2) :AbstractMap Map大家族的那点事儿(3) :TreeMap Map大家族的那点事儿(4) :HashMap Map ...