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. mybatis 部分符号需转译 及 IF如何正确判断单个数字字符

    mybatis 部分符号需转译 及 IF如何正确判断单个数字字符 1.Mybatis 转译字符如下下法即可: oracle中的日期查询在mybatis中写法可以参考如下:注意提交时间的<号是用特 ...

  2. Github入门教程（新版）

    GitHub 的介绍与使用 GitHub 注册一个账号 直接在首页注册即可啦 要注意的是 第一项 username 别人是可见的 后面修改也会比较麻烦,所以起个好名字很重要 个人主页介绍 刚注册好的页 ...

  3. Centos使用keepalived配置MySQL双主热备集群

    目录 安装MySQL 下载安装包 卸载mariadb-lib 安装依赖 安装gcc 安装perl 永久关闭selinux 安装 配置 创建mysql数据库管理用户和组 创建数据目录 修改my.cnf配 ...

  4. jar包、war包项目部署

    部署 部署 jar包 部署 war包 部署 jar包 环境准备 JDK Tomcat Linux 环境 1.将jar文件上传至服务器 2.编写脚本 启动脚本放在跟jar 一起的路径下,如果不放在同一路 ...

  5. Hexo博客Yilia主题添加相册功能，丰富博客内容，Next等其他主题可以参考

    实现思路 1.在主页上必须有一个可供点击的相册连接 2.要用 hexo 生成一个photos.html文件 3.photos.html中的图片数据来源?因为这是一个静态页面所有要有一个 json文件 ...

  6. Kubernetes亲和性学习笔记

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是欣宸在学习Kubernetes调度器的 ...

  7. node:windows script host 錯誤 console未定义

    错误背景 在开发npm包时,碰到此项报错 解决方案 选中任意js文件,选择打开方式,指定到node中即可

  8. gpg 解密-禁用交互式密码输入

    背景描述 gpg 解密默认弹出如下窗口,请用户输入密码,但在脚本自动化时遇到了问题 lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk x ...

  9. 【工具】-Reverse-DIE（Detect-It-Easy）

    关于 Detect It Easy,或缩写为"DIE"是一个用于确定文件类型的程序.Detect It Easy 是一个多功能的 PE 检测工具,基于 QT 平台编写,主要用于 P ...

  10. docker swarm 使用详解

    转载请注明出处: 1.docker swarm 的组成架构 一个基本的docker swarm 的架构如下: 它主要包含这几个核心组件: Manager节点(Manager Nodes): 管理节点是 ...