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之基础事件的更多相关文章

  1. Vue_(基础)Vue中的事件

    Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  4. vue入门基础知识点测试

    vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...

  5. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  6. vue 的常用事件

    vue 的常用事件 事件处理 1.使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名: 2.事件的回调需要配置在 methods 对象中,最终会在 vm 上: 3.methods ...

  7. 第六十一篇：Vue的绑定事件和修饰符

    好家伙,补基础加实践 1.绑定事件 我们使用v-on(简写为@)来绑定事件 写个例子, 按钮绑定数字加一(太tm经典了) 在<button>元素中使用@点击事件绑定方法"的&qu ...

  8. 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 ...

  9. vue学习笔记：vue.js基础语法

    一.VUE 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  10. 【深入浅出Linux网络编程】 “基础 -- 事件触发机制”

    回顾一下“"开篇 -- 知其然,知其所以然"”中的两段代码,第一段虽然只使用1个线程但却也只能处理一个socket,第二段虽然能处理成百上千个socket但却需要创建同等数量的线程 ...

随机推荐

  1. springboot自定义消息转换器

    import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.serializer.SerializerFeature; im ...

  2. 【从0开始编写webserver·基础篇#03】TinyWeb源码阅读，还是得看看靠谱的项目

    [前言] 之前通过看书.看视频和博客拼凑了一个webserver,然后有一段时间没有继续整这个项目 现在在去看之前的代码,真的是相当之简陋,而且代码设计得很混乱,我认为没有必要继续在屎堆上修改了,于是 ...

  3. ISP-AF相关-聚焦区域选择-清晰度评价

    1.镜头相关 镜头类型 变焦类型: 定焦.手动变焦.自动变焦 光圈: 固定光圈.手动光圈.自动光圈 视场角: 鱼眼镜头.超广角镜头.广角镜头.标准镜头.长焦镜头.超长焦镜头(由大至小) 光圈: 超星光 ...

  4. SkipList原理与实现

    机制 链表中查询的效率的复杂度是O(n), 有没有办法提升这个查询复杂度呢? 最简单的想法就是在原始的链表上构建多层索引. 在level 1(最底层为0), 每2位插入一个索引, 查询复杂度便是 O( ...

  5. Linux 问题：网络相关

    防火墙 同网段双网卡 双网关 看服务日志

  6. 2023-7-26 Dynamic替代部分反射的简单实现方式

    Dynamic与反射的使用 [作者]长生 实体类 public class School{ public int GetAge(){ return 100; } } 使用反射获取对象里的方法 Scho ...

  7. 如何配置Linux的互信

    如何配置Linux的互信? 这里针对的是root用户的,普通用户家目录/home/test/.ssh. 1.在客户端生成公钥私钥对 [root@auto1 ~]# ssh-keygen -t rsa ...

  8. Linux系统远程拷贝命令：scp

    做个记录,首先两台机器间要互通. 1. 将本地服务器的文件夹/文件拷贝到远程服务器上 语法: scp -r -P port local_folder/remote_file remote_userna ...

  9. Golang之旅——内存管理

    转载放在最前 一文带你了解,虚拟内存.内存分页.分段.段页式内存管理[Golang三关-典藏版]一站式Golang内存洗髓经 | Go 技术论坛 刘丹冰Aceld感谢以上文章作者,收获满满 存储器管理 ...

  10. SpringBoot3安全管理

    目录 一.简介 二.工程搭建 1.工程结构 2.依赖管理 三.配置管理 1.核心配置类 2.认证数据源 3.认证流程 4.身份过滤器 四.核心功能 1.登录退出 2.权限校验 五.参考源码 标签:Se ...