Vue之基础事件
1.基础事件，先弹框试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="show()">
</div>
</body>
</html>
描述：
使用v-on:事件名="方法名"，在methods定义方法
结果：
2.向数组中添加一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</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>
结果：
点击完按钮后：
点击完后数组多出一项
Vue之基础事件的更多相关文章
- Vue_(基础)Vue中的事件
Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- vue入门基础知识点测试
vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 的常用事件
vue 的常用事件 事件处理 1.使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名: 2.事件的回调需要配置在 methods 对象中,最终会在 vm 上: 3.methods ...
- 第六十一篇：Vue的绑定事件和修饰符
好家伙,补基础加实践 1.绑定事件 我们使用v-on(简写为@)来绑定事件 写个例子, 按钮绑定数字加一(太tm经典了) 在<button>元素中使用@点击事件绑定方法"的&qu ...
- Vue学习之--------事件的基本使用、事件修饰符、键盘事件（2022/7/7）
文章目录 1.事件处理 1.1. 事件的基本使用 1.1.1 .基础知识 1.1.2. 代码实例 1.1.3.测试效果 1.2.事件修饰符 1.2.1. 基础知识 1.2.2 .代码实例 1.2.3 ...
- vue学习笔记：vue.js基础语法
一.VUE 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
- 【深入浅出Linux网络编程】 “基础 -- 事件触发机制”
回顾一下“"开篇 -- 知其然,知其所以然"”中的两段代码,第一段虽然只使用1个线程但却也只能处理一个socket,第二段虽然能处理成百上千个socket但却需要创建同等数量的线程 ...
随机推荐
- GGTalk 开源即时通讯系统源码剖析之：虚拟数据库
继上篇<GGTalk 开源即时通讯系统源码剖析之:服务端全局缓存>详细介绍了 GGTalk 对需要频繁查询数据库的数据做了服务端全局缓存处理,以降低数据库的读取压力以及加快客户端请求的响应 ...
- 脚手架服务运行 报错 error:03000086:digital envelope routines::initialization error
报错图片 解决方法: 降低版本 https://nodejs.org/zh-cn/ 安装后(安装前先卸载高版本,点击左下放大镜搜索"卸载程序" 进行卸载) 安装完成后,再次回到vu ...
- debezium之mysql配置
实验环境 全部部署于本地虚拟机 1 mysql 参考 官方文档 和 根据官方示例镜像(debezium/example-mysql,mysql版本为8.0.32) 1.1 创建用户 官方镜像里一共有三 ...
- Cilium系列-5-Cilium替换KubeProxy
系列文章 Cilium 系列文章 前言 将 Kubernetes 的 CNI 从其他组件切换为 Cilium, 已经可以有效地提升网络的性能. 但是通过对 Cilium 不同模式的切换/功能的启用, ...
- word中查找替换不能使用 解决方案
打开查找,然后点更多,最下面点不限定格式
- Linux下apt与dpkg的详解
apt是一个包管理工具,用于管理Debian和Ubuntu等基于Debian的Linux发行版中的软件包.它是"Advanced Packaging Tool"的缩写,允许用户在系 ...
- Pythonre.compile:用于优化正则表达式匹配的工具
import re # Python re.compile的性能优势 # 相对于使用re.match和re.search等函数直接进行匹配,使用Python re.compile的优化方式可以带来更好 ...
- AI 与智能化 API 治理的探索实践
7月 Eolink 受邀参加 QECon 2023 全球软件质量&效能大会(北京站).Eolink CEO 刘昊臻,发表了主题为「AI 与智能化 API 治理的探索实践」的演讲,分享 Eoli ...
- Airtest的iOS实用接口介绍
1. 前言 前段时间Airtest更新了1.3.0.1版本,里面涉及非常多的iOS功能新增和改动,今天想详细跟大家聊一下里面的iOS设备接口. PS:本文示例均使用本地连接的iOS设备,Airtest ...
- mall ：sa-token项目源码解析
目录 一.mall开源项目 1.1 来源 1.2 项目转移 1.3 项目克隆 二.Sa-Toekn框架 2.1 Sa-Token 简介 2.2 分布式后端项目的使用流程 2.3 分布式后端项目的使用场 ...