美文网首页
Vue v-on:的使用

Vue v-on:的使用

作者: mage1160 | 来源:发表于2021-11-10 16:44 被阅读0次

<script src="../libs/vue.js"></script>

<div id="app">

    <!--v-on:XXX  完整的语法-->

    <button v-on:click="showAlert">按钮</button>

    <!--v-on:XXX  缩写@  语法糖-->

    <!--v-on:XXX  动态参数@[xxx]="xxx"-->

    <button @click="showAlert()">按钮</button>

    <br>

    <button @click="say('hello')">带参数的按钮</button>

    <!--访问原始的dom事件-->

    <button @click="showLog('原始事件点击',$event)" name="Button">获取原始事件的按钮</button>

    <button @click="showEvent($event)" name="Btn">获取原始事件的按钮</button>

    <div @click="divClick">

        <!--stop 修饰符 阻止冒泡事件-->

        <button @click.stop="btnClick">修饰符stop按钮</button>

    </div>

    <form action="baidu">

        <!--prevent 修饰符 阻止默认事件-->

        <button @click.prevent="submitClick">修饰符prevent按钮</button>

    </form>

    <!--once 修饰符 一次的点击事件-->

    <button @click.once="onceClick">只允许点击一次的按钮</button>

    <!--keyup enter  enter键的监听-->

    <input type="text" @keyup.enter="keyUp">

</div>

<script>

    var vue = new Vue({

        el: "#app",

        data: {

            message: 'hello vue'

        },

        methods: {

            keyUp(){

              console.log("=====keyUp=====")

            },

            onceClick(){

              console.log("=====onceClick=====")

            },

            submitClick(){

                console.log('=====submitClick====')

            },

            divClick(){

                console.log('=====divClick====')

            },

            btnClick(){

                console.log('=====btnClick====')

            },

            //获取data里的数据

            showAlert() {

                alert(this.message)

            },

            say(msg) {

                alert(msg)

            },

            showLog(msg, event) {

                console.log(msg)

                console.log(event)

                //获取点击事件的对象

                console.log(event.target)

                console.log(event.target.name)

            },

            showEvent(event) {

                console.log(event)

                //获取点击事件的对象

                console.log(event.target)

                console.log(event.target.name)

            }

        }

    })

</script>

常用的按键码:

(1).enter

(2).tab

(3).delete (捕获“删除”和“退格”键)

(4).esc

(5).space

(6).up

(7).down

(8).left

(9).right

相关文章

  • vue.js事件处理器笔记

    Vue.js 事件监听使用 v-on 指令:v-on 增加 1 这个按钮被点击了 {{ counter }...

  • vue之事件(二)

    vue中可以使用v-on进行事件处理。当然v-on也有简写方式 [@] 1.事件监听的好处?所有的 Vue.js ...

  • Vue的组件通信

    Vue的父子通信问题 参考文档 : Vue 组件组合 使用 props传递数据 用v-on 绑定事件 原理: 父子...

  • Vue v-on:的使用

    按钮 ...

  • vue:事件处理器

    Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on 增加 1 这个按钮被点击了 {{ coun...

  • vue 事件

    Vue.js 事件 在 vue 中,事件通过指令 v-on 进行绑定,v-on 缩写 @ 组件的 methods ...

  • Vue基础知识(四) - 事件绑定

    Vue要绑定事件需要使用 "v-on" 这个指令比如我们要使用点击事件,可以这样书写: 按钮 Vue的事件绑定包括...

  • Vue框架

    Vue框架官方[https://cn.vuejs.org/]Vue的基本使用步骤1.准备一个容器 v-on:cli...

  • 组件二次封装继承组件的属性、方法和插槽

    一、vue2.0使用方法 1、通过 v-on="$listeners"[https://cn.vuejs.org/...

  • Vue3.0----移除Api一览

    keyCode,作为v-on修饰符被移除 vue2中可以使用keyCode指代某个按键,vue3不在支持 $on,...

网友评论

      本文标题:Vue v-on:的使用

      本文链接:https://www.haomeiwen.com/subject/vgcizltx.html