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 的编译器为它添加特殊功能.在有些情况 ...
随机推荐
- Spark编程环境搭建（基于Intellij IDEA的Ultimate版本）（包含Java和Scala版的WordCount）（博主强烈推荐)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- Names and Identifiers
JLS:https://docs.oracle.com/javase/specs/jls/se7/html/jls-6.html#jls-6.2 Not all identifiers in a pr ...
- SpringMVC源码阅读：Controller中参数解析
1.前言 SpringMVC是目前J2EE平台的主流Web框架,不熟悉的园友可以看SpringMVC源码阅读入门,它交代了SpringMVC的基础知识和源码阅读的技巧 本文将通过源码(基于Spring ...
- 利用meta标签将http请求换成https请求
最近网站升级为https之后,为了防止一些http文件没有修改而引起的问题,可以加一个meta标签: <meta http-equiv="Content-Security-Policy ...
- 深入了解Java虚拟机（2）垃圾收集器与内存分配策略
垃圾收集器与内存分配策略 由于JVM中对象的频繁操作是在堆中,所以主要回收的是堆内存,方法区中的回收也有,但是比较谨慎 一.对象死亡判断方法 1.引用计数法 就是如果对象被引用一次,就给计数器+1,否 ...
- Node.js HTTP Server对象及GET、POST请求
上一博客学习了请求与响应,2次读2次写,但有一个问题就是客户端写入的时候怎么知道请求到达.所以HTTP Server对象出现了.它提供了实现HTTP服务器的基本框架.它可以监听端口的底层套接字和接收请 ...
- Linux 目录流管理
目录 1. 打开/关闭文件 1). 打开目录 / opendir 2). 关闭文件 / fclose 2. 读/写目录流 1). 目录流-读 / readdir & readdir_r 3. ...
- WebApi使用swagger ui自动生成接口文档
之前就写到.最近正在使用webapi.这里介绍一个实用的东西swageer ui现在开发都是前后端分开.我们这里是给前端提供api.有时候对于一个api的描述,并不想专门写一份文档.很浪费时间.swa ...
- ARC基本原理
基本简介 ARC是Automatic Reference Counting(自动引用计数器)的简称. ARC是ios5.0引入的新特性,完全消除手动管理内存的繁琐,编译器会自动在适合的代码里面插入适当 ...
- 【转】类找不到总结java.lang.ClassNotFoundException
(1)org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot load JDBC driver class 'com.microsoft.sqls ...