如何添加事件侦听器以记录 vue 中的更改？答案

【问题标题】：How do I add event listener to document changes in vue?如何添加事件侦听器以记录 vue 中的更改？
【发布时间】：2017-03-11 00:59:55
【问题描述】：

我可以将监视属性添加到输入表单。但是如果用户按下一个键怎么办。我想在用户在页面上时打印按键。

$(document).keypress(function(event){
            alert(String.fromCharCode(event.which));
        });

但是如何在 vue 中添加按键检查？

【问题讨论】：

【解决方案1】：

注册全局事件监听器有两种选择。

如果您的文档根目录上有另一个 Vue 实例，您可以使用自定义事件。

添加到您的主实例：

<body @keydown="this.$emit('onkeydown')">...</body>

到你的嵌套实例：

<my-component v-on:onkeydown="alert(String.fromCharCode(event.which));"></my-component>

这会发出一个被嵌套实例捕获的全局事件。如果您想了解更多关于自定义事件的信息，请点击here。

如果您的 body 元素上没有实例，您可以在创建 Vue 实例时在文档上创建一个事件监听器 (Example)：

  methods: {
    onkeydown(e) {
      alert(String.fromCharCode(event.which));
    }
  },

  created() {
    document.onkeydown = this.onkeydown;
  }

【讨论】：

【解决方案2】：

试试这个

html

<div id="test">
  <input v-on:keyup="say()">Say hi</input>
</div>

new Vue({
  el: '#test',
  methods: {
    say: function (e) {
      alert(e.keyCode)
    }
  }
})

【讨论】：