关于 Vue v-model 你需要知道的一切

关于 Vue v-model 你需要知道的一切
喜欢就关注我们吧


Vue里面的v-model是一个指令,提供输入和表单数据之间或两个组件之间的双向数据绑定。

这是Vue开发中一个简单的概念,但v-model的真正用途远不止如此。

通过学习本教程中Vue v-model的不同用例,可以帮助你掌握如何在项目中使用它。

准备好了吗?让我们开始!

什么是Vue v-model?

正如之前所说,Vue v-model是我们可以在模板代码中使用的指令。指令是模板标记,告诉Vue我们想要如何处理DOM。

v-model则是告诉Vue在模板中的值和数据属性中的值之间创建双向数据绑定。

v-model的一个常见用例是在设计表单和输入时。它可以用于使得DOM输入元素能够修改Vue实例中的数据。

看一个在文本输入框上使用v-model的简单示例。

<template>
  <div>
    <input type="text" v-model="value" />
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value'Hello World'
      }
    }
  }
</script>

当我们在文本框中输入中内容时,可以看到data属性随之发生变化。

关于 Vue v-model 你需要知道的一切

这简直太完美了。

v-model和v-bind的区别?

通常与v-model交换使用的指令是v-bind指令。

两者的区别在于v-model提供了双向数据绑定。

在示例中,双向数据绑定意味着如果数据发生变化,输入也发生变化;反之亦然。

但是,v-bind仅单向绑定数据。

这在app中创建明确的单向数据流时非常有用。但是在v-modelv-bind之间进行选择时请务必小心。

v-model的修饰符

Vue提供了若干修饰符,以便允许我们更改v-model的功能。

每一个修饰符都可以像下面这种方式添加,甚至可以连接在一起。

<input 
  type='text'
  v-model.trim.lazy='value'
/>

.lazy

默认情况下,v-model在每个输入事件上与Vue实例(数据属性)的状态同步。这包括获得/失去焦点。

.lazy修饰符更改v-model,因此它仅在更改事件后同步。

这减少了v-model尝试与Vue实例同步的次数——在某些情况下,可以提高性能。

.number

通常,输入的内容会自动地变为字符串——即使我们将输入声明为数字类型。

为了确保值作为数字处理,我们可以使用.number修饰符来解决。

根据Vue文档,如果输入更改并且parseFloat()无法解析新的值,则返回输入的最后一个有效值。

<input 
  type='number'
  v-model.number='value'
/>

.trim

与大多数编程语言中的trim方法类似,.trim修饰符在返回值之前删除字符串前面或后面的空格。

在自定义组件中使用v-model

好的,现在我们已经了解了表单/输入框中关于v-model的基础知识,接下来让我们看一下v-model的一个有趣用途——在组件之间创建双向数据绑定。

在Vue中,数据绑定有两个主要步骤:

  • 传递父级的数据
  • 从子级发出事件来更新父级实例

在自定义组件上使用v-model允许我们传递prop并通过指令处理事件。

<custom-text-input v-model="value" />

<!-- IS THE SAME AS -->

<custom-text-input 
   :modelValue="value"
   @update:modelValue="value = $event"
/>

那么这到底是什么意思?

让我们继续使用v-model作为表单的示例,然后使用名为CustomTextInput.vue的自定义文本输入。

使用v-model传递的值,其默认名称是modelValue,也是我们将在示例中使用的名称。

我们可以像这样传递自定义model名称。

<!-- We can name v-model, but for our example leave unnamed. -->
<custom-text-input v-model:name="value" />

注意:当我们使用自定义model名称时,发出方法的名称是update:name

以下是Vue文档中的总结。

关于 Vue v-model 你需要知道的一切

使用自定义组件中的v-model

在设置了父组件之后,现在让我们从子组件访问父组件。

CustomTextInput.vue中我们需要做两件事:

  • 接受v-model值作为prop
  • 当文本框的值改变时发出更新事件

好的,首先让我们在脚本中将它声明为prop。

export default {
  props: {
    modelValueString,
  },
};

接着创建模板,将值设置作为modelValue prop,这样每当有输入事件时,可以通过update:modelValue发出新的值。

<template>
  <div>
    <label> First Name </label>
    <input 
      type='text'
      placeholder='Input'
      :value='modelValue'
      @input='$emit("update:modelValue", $event.target.value)'
    />

  </div>
</template>

现在,如果我们回过头去查看代码,可以看到它的运行。

关于 Vue v-model 你需要知道的一切

使用v-model的技巧

介绍了如何使用v-model在两个组件之间绑定数据之后,让我们来看看v-model指令的一些更高级的方法。

对单个组件多次使用v-model

v-model不限于每个组件仅使用一次。

要多次使用v-model,只需要确保唯一命名每个prop并在子组件中正确访问它就可以了。

让我们向名为lastName的文本框添加第二个v-model

在父组件中,

<template>
  <div>
    <custom-text-input 
      v-model='value' 
      v-model:lastName='lastName'
    />

    <p> Value: {{ value }} </p>
    <p> Last Name: {{ lastName }} </p>
  </div>
</template>

<script>
import CustomTextInput from './CustomTextInput.vue'

export default {
  components: {
    CustomTextInput,
  },
  data() {
    return {
      value'Matt',
      lastName'Maribojoc'
    }
  }
}
</script>

然后,在子组件中,

<template>
  <div>
    <label> First Name </label>
    <input 
      type='text'
      :value='modelValue'
      placeholder='Input'
      @input='$emit("update:modelValue", $event.target.value)'
    />

    <label> Last Name </label>
    <input 
      type='text'
      :value='lastName'
      placeholder='Input'
      @input='$emit("update:lastName", $event.target.value)'
    />

  </div>
</template>

<script>
export default {
  props: {
    lastNameString,
    modelValueString,
  }
}
</script>

再去看项目,我们可以看到两个v-model都是独立工作的。

关于 Vue v-model 你需要知道的一切

v-model的自定义修饰符

虽然Vue内置了一些修饰符,但有时我们也会想要添加自定义修饰符。

假设我们想要创建修饰符,用于删除输入中的所有空格。我们称之为no-whitespace

<custom-text-input 
  v-model.no-whitespace='value' 
  v-model:lastName='lastName'
/>

在输入框组件中,我们可以使用prop捕获修饰符。自定义修饰符的名称是nameModifiers

export default {
  props: {
    lastNameString,
    modelValueString,
    modelModifiers: {
      default() => ({}),
    },
  },
};

好的,我们要做的第一件事是更改@input处理程序以使用自定义方法。我们将它命名为为emitValue,它将接受正在编辑的属性名以及事件对象。

<label> First Name </label>
<input 
      type='text'
      :value='modelValue'
      placeholder='Input'
      @input='emitValue("modelValue", $event)'
/>

emitValue方法中,在调用$emit之前,我们要检查修饰符。如果no-whitespace修饰符为true,则可以在将其发送给父级之前修改值。

export default {
  methods: {
    emitValue(propName, evt) {
      let val = evt.target.value;
      if (this.modelModifiers["no-whitespace"]) {
        val = val.replace(/s/g"");
      }
      this.$emit(`update:${propName}`, val);
    },
  },
};

令人惊叹。现在再来看应用程序。

关于 Vue v-model 你需要知道的一切

每当输入发生变化并且有空格时,父值中的空格就会被删除!

总结

希望本指南可以帮助你了解一些关于Vue v-model的新知识。

在表单和输入数据等基本用例中,v-model是一个非常简单的概念。然而,当涉及创建自定义组件和处理更复杂的数据时,我们才真正窥见v-model的强大力量。

编码快乐!

关于 Vue v-model 你需要知道的一切

每日分享前端插件干货,欢迎关注!

点赞和在看就是最大的支持❤️

原文始发于微信公众号(前端新世界):关于 Vue v-model 你需要知道的一切

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/28935.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!