zoukankan      html  css  js  c++  java
  • Vue---第二十三章v-on事件处理

    1.目的,因为在做前端开发的时候需要进行原生事件处理,以下代码是使用两个不同的点击事件来触发对应的内容

    比如第一个是演示获取之前的按钮上的内容,第二个是获取事件属性

     

     

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h2>1.事件处理方法v-on或@</h2>
            <!--click,显示的内容是Say加上data.msg的值,点击之后调用say函数-->
            <button v-on:click="say"> Say {{msg}} </button>
            <button @click="warn('hello', $event)">Warn</button>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></Script>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'hello xiaotaozi',
                    name:'亲爱的小桃子姐姐'
                },
                methods: {
                    say: function(event){//定义事件处理函数
                        //被触发时进行弹窗,弹窗内容是data.msg中的值
                        alert(this.name)
                        //event代表的是Dom原生事件,Vue.js它会自动的将它传入进来
                        alert(event.target.innerHTML)
                    },
                    //如果存在多个参数的情况下也需要进行Dom原生事件,
                    //则需要在调用的时候使用$event来进行传入,函数中使用event进行接收,为什么要传这个是为了进行Dom原生事件
                     warn: function (msg, event) {
                        alert(msg + "," + event.target.tagName)
                    } 
                },
                
            })
        </script>
    </body>
    </html>
     
    事件处理

    .stop

    .prevent

    .once

    <h2>2.事件修饰符</h2>
            <!--防止单击事件继续传播-->
            <div @click="todo">
                <!--.stop阻止事件继续传播,首先会调用doThis函数,然后再调用todo函数-->
                <button @click="doThis">单击事件会继续传播</button>
            </div>
            <div @click="todo">
                <button @click.stop="doThis">阻止单击事件会继续传播</button>
            </div>

            <!-- .prevent阻止事件默认行为-->
            <a href="http://192.168.111.119:8888/user/login" @click.prevent="doStop">xiaotaozi网</a><br/>
            <a href="http://192.168.111.119:8888/user/login">小桃子网</a><br/>
             <!-- 点击事件将只会触发一次 -->
            <button @click.once="doOnly">点击事件将只会触发一次: {{num}}</button> 
     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h2>1.事件处理方法v-on或@</h2>
            <!--click,显示的内容是Say加上data.msg的值,点击之后调用say函数-->
            <button v-on:click="say"> Say {{msg}} </button>
            <button @click="warn('hello', $event)">Warn</button>
            <h2>2.事件修饰符</h2>
            <!--防止单击事件继续传播-->
            <div @click="todo">
                <!--.stop阻止事件继续传播,首先会调用doThis函数,然后再调用todo函数-->
                <button @click="doThis">单击事件会继续传播</button>
            </div>
            <div @click="todo">
                <button @click.stop="doThis">阻止单击事件会继续传播</button>
            </div>

            <!-- .prevent阻止事件默认行为-->
            <a href="http://192.168.111.119:8888/user/login" @click.prevent="doStop">xiaotaozi网</a><br/>
            <a href="http://192.168.111.119:8888/user/login">小桃子网</a><br/>
             <!-- 点击事件将只会触发一次 -->
            <button @click.once="doOnly">点击事件将只会触发一次: {{num}}</button> 
        </div>
        <script src="./node_modules/vue/dist/vue.js"></Script>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'hello xiaotaozi',
                    name:'亲爱的小桃子姐姐',
                    num:0
                },
                methods: {
                    say: function(event){//定义事件处理函数
                        //被触发时进行弹窗,弹窗内容是data.msg中的值
                        alert(this.name)
                        //event代表的是Dom原生事件,Vue.js它会自动的将它传入进来
                        alert(event.target.innerHTML)
                    },
                    //如果存在多个参数的情况下也需要进行Dom原生事件,
                    //则需要在调用的时候使用$event来进行传入,函数中使用event进行接收,为什么要传这个是为了进行Dom原生事件
                     warn: function (msg, event) {
                        alert(msg + "," + event.target.tagName)
                    } ,
                    todo: function () {
                        alert("todo....");
                    },
                    doThis: function () {
                        alert("doThis....");
                    },
                    doStop: function () {
                        alert("href默认跳转被阻止....")
                    }, 
                    doOnly: function() {
                        this.num++
                    }
                },
                
            })
        </script>
    </body>
    </html>
     
    按键修饰符

    .enter
    .tab
    .delete
    .esc
    .space
    .up
    .down
    .left
    .right

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h2>1.事件处理方法v-on或@</h2>
            <!--click,显示的内容是Say加上data.msg的值,点击之后调用say函数-->
            <button v-on:click="say"> Say {{msg}} </button>
            <button @click="warn('hello', $event)">Warn</button>
            <h2>2.事件修饰符</h2>
            <!--防止单击事件继续传播-->
            <div @click="todo">
                <!--.stop阻止事件继续传播,首先会调用doThis函数,然后再调用todo函数-->
                <button @click="doThis">单击事件会继续传播</button>
            </div>
            <div @click="todo">
                <button @click.stop="doThis">阻止单击事件会继续传播</button>
            </div>

            <!-- .prevent阻止事件默认行为-->
            <a href="http://192.168.111.119:8888/user/login" @click.prevent="doStop">xiaotaozi网</a><br/>
            <a href="http://192.168.111.119:8888/user/login">小桃子网</a><br/>
             <!-- 点击事件将只会触发一次 -->
            <button @click.once="doOnly">点击事件将只会触发一次: {{num}}</button>
            <h2>3.按键修饰符</h2>
            <input @keyup.enter="keyEnter"><!--进入输入框按回车时调用keyEnter-->
            <input @keyup.space="keySpace"><!--进入输入框按回车时调用keySpace-->
        </div>
        <script src="./node_modules/vue/dist/vue.js"></Script>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'hello xiaotaozi',
                    name:'亲爱的小桃子姐姐',
                    num:0
                },
                methods: {
                    say: function(event){//定义事件处理函数
                        //被触发时进行弹窗,弹窗内容是data.msg中的值
                        alert(this.name)
                        //event代表的是Dom原生事件,Vue.js它会自动的将它传入进来
                        alert(event.target.innerHTML)
                    },
                    //如果存在多个参数的情况下也需要进行Dom原生事件,
                    //则需要在调用的时候使用$event来进行传入,函数中使用event进行接收,为什么要传这个是为了进行Dom原生事件
                     warn: function (msg, event) {
                        alert(msg + "," + event.target.tagName)
                    } ,
                    todo: function () {
                        alert("todo....");
                    },
                    doThis: function () {
                        alert("doThis....");
                    },
                    doStop: function () {
                        alert("href默认跳转被阻止....")
                    }, 
                    doOnly: function() {
                        this.num++
                    },
                    keyEnter: function () {
                        alert("已按:回车键")
                    },
                    keySpace: function () {
                        alert("已按:空格键")
                    } 
                },
                
            })
        </script>
    </body>
    </html>
    沫笙
  • 相关阅读:
    在SQL SERVER 2005中还原数据库时出现错误:system.data.sqlclient.sqlerror 媒体集有 2 个媒体簇 但只提供了 1 个。必须提供所有成员。 (microsoft.sqlserver.smo)
    Mysql的Root密码忘记,查看或修改的解决方法
    Win7系统如何设置FTP详细过程
    该设备或资源(127.0.0.1)未设置为接受端口“16823”上的连接。
    window7防火墙无法更改某些设置,错误代码0×80070422
    访问FTP站点下载文件,提示“当前的安全设置不允许从该位置下载文件”的解决方案
    解决SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的方法
    按状态选择链接元素
    类选择器与ID选择器的比较
    关于创建Web图像时应记住的五个要素
  • 原文地址:https://www.cnblogs.com/wendy-0901/p/14416414.html
Copyright © 2011-2022 走看看