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 的编译器为它添加特殊功能.在有些情况 ...
随机推荐
- git使用时的一下简单命令
一.简介 SVN集中式版本控制系统 分布式版本控制系统 二.使用git 1.git init 将这个命令变成git可管理的仓库 2.git add filename 将这个文件添加到仓库 3.git ...
- Disconf 学习系列之Disconf是什么？
不多说,直接上干货! Disconf是什么 Distributed Configuration Management Platform(分布式配置管理平台) ,它是专注于各种分布式系统配置管理 的通用 ...
- java学习-MD5消息摘要算法
md5 属于hash算法一类,是不可逆的消息摘要算法.与对称加密和非对称加密算法不一样,不需要加密密钥. 注意: md5不是加密算法,只是将数据进行散列计算后生成一个唯一值的算法,没有加密密钥也没有解 ...
- 词性标注 HMM
1.给定语料,统计语料中的词性为N,词组为M. 2.HMM关注3个参数 a.初始化概率 b.状态转移矩阵 N*N c.观测状态概率矩阵 N*M 3.状态转移矩阵:词A的词性为词性a,词B的词性为词性b ...
- java字符串应用之表达式解析器
一.表达式的组成 1.数字 2.运算符:+ - / * ^ % = 3.圆括号 4.变量二.运算符优先级 由高到低分别为:+-(正负号).^.*/%.+-.= 优先 ...
- oracle 比较日期相等
where to_char(date1, 'yyyymmdd')=to_char(date2,'yyyymmdd'); or where to_date(char1, 'yyyymmdd')=to_d ...
- layer 中的 layer.alert layer.msg layer.confirm
1.layer.alert layer.alert('见到你真的很高兴', {icon: 6}); 效果图 layer.alert('墨绿风格,点击确认看深蓝', { skin: 'layui-lay ...
- javascript Function类型
Function(函数)类型实际上是对象,每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法,由于函数是对象,因此函数名实际上也是一个指向函数对象的指针 声明方式 func ...
- 关于C#判断是否是数字的正则式
有话要说 今天我同事突然让我帮他看个问题,他说想不通为什么数据库中会有不合法的内容,我都已经用正则过滤了,并且在本地调通了的! 我问他是不是你正则有问题,他说没问题啊,前端和后端的正则是一样的,前端我 ...
- include，forward和param指令