Vue 框架之键盘事件、健值修饰符、双向数据绑定

键盘事件

Vue 中可以通过 v-on 指令来绑定 DOM 事件，在处理键盘事件时也不例外。我们可以使用 Vue 提供的 @keydown 和 @keyup 来绑定键盘事件，比如：

<template>
  <div>
    <p>按下的键盘键是：{{key}}</p>
    <input v-on:keydown="onKeyDown">
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: ''
    };
  },
  methods: {
    onKeyDown(e) {
      this.key = e.key;
    }
  }
};
</script>

在上面的示例中，我们使用 v-on:keydown 将 onKeyDown 方法绑定到 input 元素的键盘按下事件上，并通过 this.key 将按下的键盘键存储到 data 中的 key 属性中，然后在模板中展示出来。

修饰符

在 Vue 中，还可以使用修饰符来精细控制键盘事件的处理。常用的修饰符有：

.enter：处理回车键；
.tab：处理 Tab 键；
.delete：处理删除键；
.esc：处理 ESC 键；
.space：处理空格键；
.ctrl：处理控制键；
.alt：处理 Alt 键；
.shift：处理 Shift 键；
.meta：处理 Meta 键。

以 .enter 修饰符为例，当在 input 元素上按下回车键时，只有回车键按下事件才会被绑定的事件处理函数捕获，其他键盘按键则不会触发该方法。示例如下：

<template>
  <div>
    <input v-on:keydown.enter="onEnter" />
  </div>
</template>

<script>
export default {
  methods: {
    onEnter() {
      console.log('回车键按下');
    }
  }
};
</script>

双向数据绑定

Vue 的数据绑定是双向的，绑定的数据既可以在模板中显示出来，也可以通过用户的交互行为修改数据。可以使用 v-model 指令来实现双向数据绑定。示例如下：

<template>
  <div>
    <p>你的名字是：{{name}}</p>
    <input v-model="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  }
};
</script>

在上面的示例中，v-model 指令将 input 元素绑定到 name 属性上，实现了数据的双向绑定。当用户在输入框中输入的时候，name 属性的值也会随之变化，反之亦然。

示例说明

以一个简单的 TodoList 应用为例，说明键盘事件、健值修饰符、双向数据绑定在实际开发中的应用。

在该应用中，我们需要支持以下的功能：

用户可以向输入框中输入 Todo 项；
用户按下回车键时，能够将该 Todo 项添加到 TodoList 中；
用户可以点击已添加的 Todo 项，将其标记为已完成；
用户可以编辑已添加的 Todo 项，将其修改为其他内容；
用户可以删除已添加的 Todo 项。

<template>
  <div>
    <input v-model="newTodo" v-on:keydown.enter="addTodo" placeholder="请输入待办事项" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index" :class="{ done: todo.done }">
        <input type="checkbox" v-model="todo.done" />
        <span v-if="!todo.editing" v-on:dblclick="edit(index)">{{ todo.text }}</span>
        <input v-else v-model="todo.text" v-on:blur="doneEdit(index)" v-on:keydown.enter="doneEdit(index)" />
        <button v-on:click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (!this.newTodo) {
        return;
      }
      this.todos.push({
        text: this.newTodo,
        done: false,
        editing: false
      });
      this.newTodo = '';
    },
    remove(index) {
      this.todos.splice(index, 1);
    },
    edit(index) {
      this.todos[index].editing = true;
      this.$nextTick(() => {
        this.$el.querySelectorAll('li input')[index + 1].focus();
      });
    },
    doneEdit(index) {
      if (!this.todos[index].text) {
        this.remove(index);
        return;
      }
      this.todos[index].editing = false;
    }
  }
};
</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>

在上面的代码中，我们使用 v-model 实现了输入框的数据双向绑定，并使用 v-on:keydown.enter 实现了按下回车键添加 Todo 项的功能。使用 v-for 指令循环渲染 TodoList，并使用 v-model 将 Todo 项中的 done 属性与复选框进行了双向绑定。在编辑 Todo 项时，我们使用了 v-if 和 v-else 循环渲染 Todo 项的文本和输入框，并使用 v-on:dblclick 触发编辑状态。在编辑 Todo 项的输入框中，我们使用了 v-on:blur 和 v-on:keydown.enter 实现了光标失去焦点或按下回车键保存修改的功能。最后，在删除 Todo 项时，我们使用 v-on:click 绑定点击事件实现了删除功能。