Vue学习笔记11--事件 + 事件修饰符 + 键盘事件

示例一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 事件的基本使用</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <!-- id 容器 root -->
    <div id="root">
        <h1>欢迎来到：{{name}}</h1>
        <button v-on:click="showInfo">点我提示哦</button>
        <hr />
        <button @click="showInfo">点我也提示的哈</button>
        <hr />
        <button @click="showParamsInfo($event,'我是参数666')">可入参提示哦</button>
    </div>

</body>

</html>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        // 对象信息
        data: {
            name: '开心Vue',
        },
        // 方法信息
        methods: {
            showInfo() {
                alert('事件触发成功！')
            },
            showParamsInfo(event, str) {
                alert('事件触发成功！' + str)
            },

        }

    })
    console.log(vm)
</script>

总结：事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名称；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数，否则this就不是vm了,会变为window
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click='demo'和@click='demo($event)'效果是一致的，但后者可传参(传参时，$event用于保证其不丢失--，如果不添加，同时传多个参数，会导致丢失）

Vue中的事件修饰符：修饰符可以连续写

prevent：阻止默认事件(常用，例如<a>标签中的 href访问，默认会执行，引入该修饰符后，提示后即可实现不再访问)
stop：阻止时间冒泡(常用)
once：事件只能触发异常(常用)
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕(平板、移动端用的相对多一些)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 事件修饰符</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <!-- id 容器 root -->
    <div id="root">
        <h1>欢迎来到：{{name}}</h1>

        <button v-on:click="showInfo">点我提示哦</button>
        <hr />
        <!-- <a v-bind:href="url" @click="showInfo">百度一下</a> -->

        <!-- prevent 为事件修饰符 阻止默认行为 -->
        <a v-bind:href="url" @click.prevent="showInfo">百度一下</a>
        <hr />
        <!-- 阻止事件冒泡 -->
        <div @click="showInfo">
            <button v-on:click.stop="showInfo">点我提示哦</button>

        </div>
        <hr />
        <!-- 事件只触发一次 -->
        <button v-on:click.once="showInfo">点我提示一次哦</button>
        <hr />
    </div>

</body>

</html>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        // 对象信息
        data: {
            name: '开心Vue',
            url: 'https://www.baidu.com/',
        },
        // 方法信息
        methods: {
            showInfo (e) {
                // 提示后阻止继续执行事件
                // e.preventDefault()   // 可使用 @click.prevent 代替

                alert('你好 心仪')
            },


        }

    })
    console.log(vm)

</script>

键盘事件

Vue中常用的按键别名：
- 回车，enter
- 删除，delte——捕获删除和退格键
- 退出，esc
- 空格，space
- 换行，tab(必须配合keydown使用)
- up，上
- down，下
- left，左
- right，右
Vue未提供别名的按键，可以使用按键原始的key(console.log(e.keycode))值去绑定,但需要注意转为kebab-case——短横线命名
系统修饰键(用法特殊)：ctrl、alt、shift、meta(windows键)
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件
也可以使用keycode去指定具体的按键——不推荐
Vue.config.keycodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 键盘事件</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <!-- id 容器 root -->
  <div id="root">
    <h1>欢迎来到：{{name}}</h1>
    <hr />
    <!-- keyup keydown -->
    实现方式1：<input type="text" placeholder="按下回车提示输入1" @keyup="showLog">
    <hr />
    实现方式2：<input type="text" placeholder="按下回车提示输入2" @keyup="showLog($event)">
    <hr />
    实现方式3：<input type="text" placeholder="按下回车提示输入3" @keyup.enter="showLog">
    <hr />
    实现tab方式：<input type="text" placeholder="按下tab提示输入" @keydown.tab="showLog">

    <hr />
    系统修饰键(用法特殊)：ctrl、alt、shift、meta(windows键)<br />
    配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发<br />
    实现ctrl方式1：<input type="text" placeholder="按下ctrl + 其他并释放其他键，提示输入" @keyup.ctrl="showLog">
    <hr />
    配合keydown使用：正常触发事件<br />
    实现ctrl方式2：<input type="text" placeholder="按下ctrl提示输入" @keydown.ctrl="showLog">
    <hr />
    自定义键盘按键别名--测试示例<br />
    <input type="text" placeholder="请输入，测试自定义回车按键" @keydown.myenter="showLog">
  </div>

</body>

</html>
<script type="text/javascript">
  Vue.config.keyCodes.myenter = 13
  const vm = new Vue({
    el: '#root',
    // 对象信息
    data: {
      name: '开心Vue',
      url: 'https://www.baidu.com/',
    },
    // 方法信息
    methods: {
      showInfo (e) {
        // 提示后阻止继续执行事件
        // e.preventDefault()   // 可使用 @click.prevent 代替

        alert('你好 心仪')
      },
      showLog (e) {
        // console.log(e.target.value)
        console.log('code==' + e.keyCode)//按键编码
        console.log('名称==' + e.key)//按键名称
        console.log(e.target.value)
        if (e.keyCode !== 13)//enter 回车 13
        {
          return
        }

      },


    }

  })
  console.log(vm)

</script>

注意：

<input type="text" placeholder="按下ctrl + 其他并释放其他键，提示输入" @keyup.ctrl="showLog">——表示ctrl + 键盘所有键

<input type="text" placeholder="按下ctrl + 其他并释放其他键，提示输入" @keyup.ctrl.x="showLog">——表示ctrl + x

posted on 2024-02-22 18:38 sunwugang 阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告