Day19_09_Vue教程之v-on

傷城~ 2024-02-19 21:42 48阅读 0赞

## Vue教程之v-on ##

### 一.监听事件 ###

*  `v-on`

### 二. HTML ###

<div id="vue">
        <button v-on:click="sayHi">点我</button>
    </div>

注：在这里我们使用了 `v-on` 绑定了 `click` 事件，并指定了名为 `sayHi` 的方法

### 三.JavaScript ###

方法必须定义在 Vue 实例的 `methods` 对象中

<script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                message: 'Hello World'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                sayHi: function (event) {
                    // `this` 在方法里指向当前 Vue 实例
                    alert(this.message);
                }
            }
        });
    </script>

### 四.测试效果 ###

![20190806224333453.png][]

### 五.完整的 HTML ###

<!DOCTYPE html>
    <html xmlns:v-on="">
    <head>
        <meta charset="UTF-8">
        <title>事件篇 v-on</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="vue">
        <button v-on:click="sayHi">点我</button>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                message: 'Hello World'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                sayHi: function (event) {
                    // `this` 在方法里指向当前 Vue 实例
                    alert(this.message);
                }
            }
        });
    </script>
    </body>
    </html>

[20190806224333453.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f690ae211bbc4244baf8e82f38307dfe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 Day19_10_Vue教程之v-for

Vue教程之v-for 一.循环遍历语句 `v-for` 二.HTML <div id="vue"> <li v-for="i

向右看齐/ 2024年02月19日 21:42/ 0 赞/ 48 阅读

相关 Day19_09_Vue教程之v-on

Vue教程之v-on 一.监听事件 `v-on` 二. HTML <div id="vue"> <button v-on:cl

傷城~/ 2024年02月19日 21:42/ 0 赞/ 49 阅读

相关 Day19_07_Vue教程之Vue表单输入

Vue教程之Vue表单输入一.什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的

淩亂°似流年/ 2024年02月19日 21:40/ 0 赞/ 47 阅读

相关 Day19_08_Vue教程之v-else-if

Vue教程之v-else-if 一.连续的条件判断语句 `v-if` `v-else-if` `v-else` 二.HTML <d

Myth丶恋晨/ 2024年02月19日 21:40/ 0 赞/ 45 阅读

相关 Day19_06_Vue教程之Vue实例的生命周期

Vue教程之Vue实例的生命周期一.什么是生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载

怼烎@/ 2024年02月19日 21:40/ 0 赞/ 56 阅读

相关 Day19_04_Vue教程之环境搭建

Vue教程之环境搭建一.安装node.js（[https://nodejs.org/en/）][https_nodejs.org_en] ![watermark_

我就是我/ 2024年02月19日 21:39/ 0 赞/ 53 阅读

相关 Day19_05_Vue教程之第一个Vue应用程序

Vue教程之第一个Vue应用程序一.兼容性 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持

雨点打透心脏的1/2处/ 2024年02月19日 21:39/ 0 赞/ 57 阅读

相关 Day19_03_Vue教程之Vue简介

Vue教程之Vue简介一.简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架

梦里梦外;/ 2024年02月19日 21:39/ 0 赞/ 45 阅读

相关 Day19_02_Vue教程之MVVM模式

MVVM模式一.什么是 MVVM? MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是

谁践踏了优雅/ 2024年02月19日 21:39/ 0 赞/ 66 阅读

相关 Day06_12_SpringBoot教程之YAML语法教程

YAML语法教程我们进行项目免不了要写配置文件,怎么写配置文件也是一门学问. `YAML` 是专门用来写配置文件的语言,非常简洁和强大,远比 `JSON`格式方便.

比眉伴天荒/ 2024年01月20日 07:15/ 0 赞/ 57 阅读