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. Blazor前后端框架Known功能介绍：系统安装激活及自定义

    本章介绍系统安装与激活及其自定义功能. 概述 框架内置简单的系统安装功能. 录入企业编码.名称.系统名称.产品密钥.管理员密码信息完成安装. 可自定义高级安装功能,如安装数据库等您产品所需的安装信息. ...

  2. Send files or execute commands over SSH

    1. 配置 SSH Server ----公钥和私钥的配置---- 假设有两台服务器,A是Jenkins构建服务器,B是应用服务器,A构建好应用之后,将包传到B进行发布. 在A上面执行 ssh-key ...

  3. 详解在Linux中修改Tomcat使用的jdk版本

    问题分析 由于部署个人项目使用了openjdk11,但是我之前安装的是jdk1.8,jdk版本升级的后果就是,tomcat运行的时候报一点小bug(因为之前安装tomcat默认使用了系统的jdk版本) ...

  4. 2023年郑州轻工业大学校赛邀请赛myh

    赛程回顾和赛后总结 赛程回顾 although 昨天刚复盘的,但还是记不住题号.就口胡下是那类型题吧. 刚开始时,我和队长先看的a,让jc去找签到题.我们看了下a,队长说可能dp,但还是感觉没啥思路就 ...

  5. MyBatis 常用工具类

    SQL 类 MyBatis 提供了一个 SQL 工具类,使用这个工具类,我们可以很方便在 Java 代码动态构建 SQL 语句 String newSql = new SQL() ({ SELECT( ...

  6. 2021-3-13 xml的增删改查

    public void XmlAdd(string filename, List<People> pList) { try { List<People> peoples = X ...

  7. rman catalog 遇到的一个错误

    [oracle@source admin]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.3.0 Production on Thu Jun 22 09: ...

  8. 渗透-02：HTTPS主干-分支和HTTPS传输过程

    一.HTTPS主干-分支 第一层 第一层,是主干的主干,加密通信就是双方都持有一个对称加密的秘钥,然后就可以安全通信了. 问题就是,无论这个最初的秘钥是由客户端传给服务端,还是服务端传给客户端,都是明 ...

  9. SpringBoot3基础用法

    目录 一.背景 二.环境搭建 1.工程结构 2.框架依赖 3.环境配置 三.入门案例 1.测试接口 2.全局异常 3.日志打印 3.1 日志配置 3.2 日志打印 四.打包运行 五.参考源码 技术和工 ...

  10. Thinkphp 5.x 远程代码执行漏洞利用小记

    Thinkphp 5.x远程代码执行漏洞存在于Thinkphp 5.0版本及5.1版本,通过此漏洞,可以在远程执行任意代码,也可写入webshell 下面是对其进行的漏洞利用! 漏洞利用: 1,利用s ...