【Vue教程三】点击事件、表单输入事件、键盘事件

qing_小诺

已于 2022-07-03 17:37:09 修改

阅读量5.9k

点赞数 2

分类专栏： Vue 文章标签： vue

于 2019-07-09 17:34:29 首次发布

本文链接：https://blog.csdn.net/qq_33237207/article/details/95205683

版权

Vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

一、点击事件：

1、可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

'v-on:click' 简写成 '@click'

<body>
    <div id="app">
        <!-- `greet` 是在下面定义的方法名 -->
        <p>{{name}}</p>
        <button v-on:click="greet">Greet</button>
        <button v-on:click="greet2($event,66)">传参</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'qingqing'
            },
            methods: {// 在 `methods` 对象中定义方法
                greet: function (event) {
                    // `this` 在方法里指向当前 Vue 实例
                    alert('Hello ' + this.name + '!')//'Hello qingqing!'
                    this.name='qwe';
                    if (event) {  // `event` 是原生 DOM 事件
                        alert(event.target.tagName)//'BUTTON'
                    }
                },
                greet2(event, number) {
                     console.log(event.target.innerText,number)
                }
            }
        })
        // 也可以用 JavaScript 直接调用方法
        // vm.greet() // => 'Hello qingqing!'
    </script>
</body>

说明：vue更改数据用下面的方法：this.name='xxx'；

2、事件修饰符

修饰符是由点开头的指令后缀来表示的。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

二、表单事件：

1、你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

注：v-model其实是v-model:value的缩写，v-model实现双向绑定，而v-bind实现单向绑定。

<body>
    <div id="app">
        <!-- 文本 -->
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <hr />
        <!-- 多行文本 -->
        <textarea v-model="message2" placeholder="add multiple lines"></textarea>
        <p>Message2 is: {{ message2 }}</p>
        <hr />
        <!-- 复选框 -->
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br />
        <span>Checked names: {{ checkedNames }}</span>
        <hr />
        <!-- 单选按钮 -->
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br />
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br />
        <span>Picked: {{ picked }}</span>
        <hr />
        <!-- 下拉框-单选 -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
        <hr />
        <!-- 下拉框-多选 -->
        <select v-model="selected2" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected2: {{ selected2 }}</span>
        <hr />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: '',
                message2: '',
                checkedNames: [],
                picked: '',
                selected: '',
                selected2: [],
            }
        })
    </script>
</body>

上面代码展示出来的效果如下：

2、修饰符

2.1、number 修饰符：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

2.2、trim 修饰符：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

2.3、lazy 修饰符：失去焦点时得到数据，可用于多文本输入框

<textarea v-model.lazy="other"></textarea>
<!-- 加了lazy后，失去焦点才显示下面的other -->
<span>输入了如下的文字: {{ other }}</span>

三、键盘事件：

1、在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

2、使用keyCode（键盘码）也是允许的，但keyCode 的事件用法已经被废弃了，并可能不会被最新的浏览器支持。

<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

注意：tab比较特殊，本身按键就有切走焦点的作用，需要配合keydown使用。

系统修饰键（用法特殊）：Ctrl、Alt、Shift、meta（即win键）：
1、配合keyup时：需要搭配其他按键一起按下后再释放；
2、配合keydown时：正常触发事件。

你还可以通过全局 Vue.config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`来监听f1键盘事件
Vue.config.keyCodes.f1 = 112

附js中键盘码对应值：js 里面的键盘事件对应的键码 - 无花1 - 博客园

如果需要用到其他键盘符，可以参考一下上面的链接，键盘码对应值部分截图如下：