Vue 学院 #2：V-model 指令

欢迎来到第二期 Vue 学院！这里会有很多关于 Vue 的文章！我在这方面有两年半的经验，可以教一些这方面的知识！

在本课程中，我们将重点关注 v-model 指令！

让我们开始吧

第一个难题是，我们如何管理中的输入值<input>？

我们可以做下一步：

<script>
export default {
  name: "HelloWorld",
  data: function () {
    return {
      message: '',
    }
  },
  methods: {
     updateMessage(event) {
         this.message = event.target.value
     }
  },
};
</script>

<template>
<div>
    <input
        :value="message"
        @input="updateMessage"
        >
</div>
</template>

我们需要将输入的值绑定到当前数据message并处理来自此输入的事件以更新当前数据message。

这不是很友好，我们必须对每个组件都这样做......

v-模型

您可以使用 v-model 指令在表单输入框、文本框和选择框元素上创建双向数据绑定。它会根据输入框类型自动选择正确的方式更新元素。

因此我们可以将上面的代码替换为

<script>
export default {
  name: "HelloWorld",
  data: function () {
    return {
      message: '',
    }
  },
};
</script>

<template>
<div>
    <input v-model="message">
</div>
</template>

我们可以删除更新值的方法！因为 v-model 会直接更新它。

非常有用！

我希望你喜欢这篇文章！

🎁 如果您在TwitterUnderrated skills in javascript, make the difference上关注我并给我点赞，即可免费获得我的新书😁

或者在这里获取

🎁我的新闻通讯

☕️ 你可以支持我的作品🙏

🏃‍♂️ 你可以关注我 👇

🕊 推特：https://twitter.com/code__oz

👨‍💻 Github：https://github.com/Code-Oz

你也可以标记🔖这篇文章！

鏂囩珷鏉ユ簮锛�https://dev.to/codeoz/vue-academy-2-v-model-directive-36oh