zoukankan      html  css  js  c++  java
  • 事件处理

    1.v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>学习example</title>
        <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
        <button v-on:click="counter+=1">{{counter}}</button>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                counter: 0,
            },
        });
    </script>
    <style type="text/css">
    </style>
    </body>
    </html>
    

    2.事件处理方法

    许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>学习example</title>
        <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
        <button v-on:click="greet">greet</button>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                name: "vue",
            },
            methods: {
                greet: function (even) {
                    //`this` 在方法里指向当前 Vue 实例
                    alert("hi " + this.name);
                    if (even) {
                        alert(even.target.tagName);
                    }
                }
            }
        });
    </script>
    <style type="text/css">
    </style>
    </body>
    </html>
    

     3.内联处理器中的方法

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>学习example</title>
        <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
        <button v-on:click="say('hi')">say hi</button>
        <button v-on:click="say('what')">say what</button>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            methods: {
                say: function (str) {
                    alert(str);
                }
            }
        });
    </script>
    <style type="text/css">
    </style>
    </body>
    </html>
    

     4.在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>学习example</title>
        <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
        <button v-on:click="say('hello',$event)">say hello</button>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            methods: {
                say: function (str, e) {
                    alert(str);
                    alert(e);
                    console.log(e);
                }
            }
        });
    </script>
    <style type="text/css">
    </style>
    </body>
    </html>
    
  • 相关阅读:
    浅谈数据的离散化
    【ZOJ】3785 What day is that day? ——浅谈KMP在ACM竞赛中的暴力打表找规律中的应用
    【Python】iichats —— 命令行下的局域网聊天程序
    【Python】iiblogs ——命令行下的网页收藏夹
    【Python】iiacm_filemaker ——简易的.cpp文件创建即初始化脚本,ACMer专用
    【黑科技】读写优化
    【POJ】1330 Nearest Common Ancestors ——最近公共祖先(LCA)
    【HDU】1717 小数化分数2 ——计数原理
    【POJ】2318 TOYS ——计算几何+二分
    【HDU】4923 Room and Moor(2014多校第六场1003)
  • 原文地址:https://www.cnblogs.com/xidian2014/p/13408405.html
Copyright © 2011-2022 走看看