• 售前

  • 售后

热门帖子
入门百科

Vue ​v-model相关知识总结

[复制链接]
幂倾城淮 显示全部楼层 发表于 2021-10-25 19:45:58 |阅读模式 打印 上一主题 下一主题
​v-model是Vue的一个指令,它提供了input和form数据之间或两个组件之间的双向数据绑定。
这在Vue开发中是一个简单的概念,但是v-model的真正威力需要一些时间才气理解。
到本教程结束时,你将了解v-model的全部差别用例,并学习如何在自己的项目中使用它。
预备好了吗?
我也是。让我们编写代码。
什么是v-model?

正如我们刚才讨论的,v-model是一个我们可以在模板代码中使用的指令。指令是一个模板令牌,它告诉Vue我们想要如何处置惩罚DOM。
v-model告诉Vue我们想要在模板中的值和数据属性中的值之间创建一个双向数据绑定。
使用v-model的一个常见用例是在设计form和input时。我们可以使用它使DOM input元素可以或许修改Vue实例中的数据。
让我们看一个在文本输入上使用v-model的简单示例。
  1. <template>
  2. <div>
  3.   <input
  4.    type='text'
  5.    v-model='value'
  6.   />
  7.   <p> Value: {{ value }} </p>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13.   return {
  14.    value: 'Hello World'
  15.   }
  16. }
  17. }
  18. </script>
复制代码
当我们在文本输入中输入时,我们会看到我们的data属性发生了变革。
v-model和v-bind的区别?

v-bind指令通常会与v-model切换。
两者的区别在于v-model提供了双向数据绑定。
在我们的例子中,这意味着假如我们的数据改变了,我们的输入也会改变,假如我们的输入改变了,我们的数据也会改变。
然而,v-bind只以一种方式绑定命据。
当你在你的应用中创建一个清晰的单向数据流时,这黑白常有用的。但是,在v-model和v-bind之间选择时必须小心。
v-model的修饰符

Vue提供了两个修饰符,允许我们更改v-model的功能。
每一个都可以像如许加起来,乃至可以连接在一起。
  1. <input
  2. type='text'
  3. v-model.trim.lazy='value'
  4. />
复制代码
.lazy

默认情况下,v-model在每个输入变乱上与Vue实例(数据属性)的状态同步。这包罗得到,失去核心等等。
lazy修饰符修改了我们的v-model,所以它只在更改变乱之后同步。
这淘汰了v-model试图与Vue实例同步的次数——在某些情况下,还可以进步性能。
.number

通常,我们的输入将自动将输入转为字符串—即使我们将输入是数字。
确保将值作为数字处置惩罚的一种方法是使用. number修饰符。
根据Vue文档,假如输入发生变革,并且parseFloat()无法剖析新值,那么将返回输入的末了一个有用值。
  1. <input
  2. type='number'
  3. v-model.number='value'
  4. />
复制代码
.trim

与大多数编程语言中的trim方法类似,.trim修饰符在返回值之前删除开头或末端的空缺。
在自定义组件中使用v-model

好了,现在我们已经了解了form/input内部的v-model的基本知识,让我们看看v-model的一个有趣用法——在组件之间创建双向数据绑定。
在Vue中,数据绑定有两个主要步骤:
从父节点传递数据
从子组件发出变乱以更新父组件
在自定义组件上使用v-model可以让我们传递一个prop,用一个指令来处置惩罚一个变乱。
  1. <custom-text-input v-model="value" />
  2. <!-- IS THE SAME AS -->
  3. <custom-text-input
  4.   :modelValue="value"
  5.   @update:modelValue="value = $event"
  6. />
复制代码
好吧,这到底是什么意思?
让我们继续使用v-model表单的例子,并使用名为CustomTextInput.vue的自定义文本输入。
使用v-model传递的值的默认名称是modelValue——我们将在示例中使用这个名称。
但是,我们可以像如许传递一个定制的模子名称。
  1. <custom-text-input v-model:name="value" />
复制代码
留意:当我们使用自定义模子名称时,所发出方法的名称将被更新:name
下面是来自Vue文档的一张图来总结它。

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

我们已经设置好了父组件,所以让我们从子组件访问它。
在CustomTextInput.vue中,我们必须做两件事:
      
  • 担当我们的v-model值作为prop  
  • 当我们的输入发生变革时,触发一个更新变乱
好的——让我们起首在脚本中声明它是prop。
  1. export default {
  2. props: {
  3.   modelValue: String,
  4. }
  5. }
复制代码
接下来,让我们创建我们的模板,将值设置为modelValue prop,只要有输入变乱,我们就通过update:modelValue发出新值。
  1. <template>
  2. <div>
  3.   <label> First Name </label>
  4.   <input
  5.    type='text'
  6.    placeholder='Input'
  7.    :value='modelValue'
  8.    @input='$emit("update:modelValue", $event.target.value)'
  9.   />
  10. </div>
  11. </template>
复制代码
使用v-model

好吧!
我们已经介绍了一个使用v-model在两个组件之间绑定命据的基本示例。
让我们看一些使用v-model指令的更高级的方法。
对一个组件多次使用v-model
v-model并不范围于每个组件只能使用一次。
要多次使用v-model,我们只需要确保为每个prop唯肯定名,并在子组件中精确访问它。
让我们在lastName中添加第二个v-model。
在我们的父组件中:
  1. <template>
  2. <div>
  3.   <custom-text-input
  4.    v-model='value'
  5.    v-model:lastName='lastName'
  6.   />
  7.   <p> Value: {{ value }} </p>
  8.   <p> Last Name: {{ lastName }} </p>
  9. </div>
  10. </template>
  11. <script>
  12. import CustomTextInput from './CustomTextInput.vue'
  13. export default {
  14. components: {
  15.   CustomTextInput,
  16. },
  17. data() {
  18.   return {
  19.    value: 'Matt',
  20.    lastName: 'Maribojoc'
  21.   }
  22. }
  23. }
  24. </script>
复制代码
然后,在子组件内部:
  1. <template>
  2. <div>
  3.   <label> First Name </label>
  4.   <input
  5.    type='text'
  6.    :value='modelValue'
  7.    placeholder='Input'
  8.    @input='$emit("update:modelValue", $event.target.value)'
  9.   />
  10.   <label> Last Name </label>
  11.   <input
  12.    type='text'
  13.    :value='lastName'
  14.    placeholder='Input'
  15.    @input='$emit("update:lastName", $event.target.value)'
  16.   />
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. props: {
  22.   lastName: String,
  23.   modelValue: String,
  24. }
  25. }
  26. </script>
复制代码
V-model的自定义修饰符

正如我们所讨论的,Vue中内置了一些修饰符。但总有一天,我们会想要添加我们自己的。
假设我们想要创建一个修饰符来删除输入中的全部空格。我们称之为无空格。
  1. <custom-text-input
  2. v-model.no-whitespace='value'
  3. v-model:lastName='lastName'
  4. />
复制代码
在我们的输入组件中,我们可以使用prop来捕获修饰符。自定义修饰符的名称是nameModifiers。
  1. props: {
  2. lastName: String,
  3. modelValue: String,
  4. modelModifiers: {
  5.   default: () => ({})
  6. }
  7. }
复制代码
好的,我们要做的第一件事是改变@input处置惩罚器来使用一个自定义方法。我们可以称它为emitValue,它将担当正在编辑的属性和变乱对象的名称。
  1. <label> First Name </label>
  2. <input
  3.    type='text'
  4.    :value='modelValue'
  5.    placeholder='Input'
  6.    @input='emitValue("modelValue", $event)'
  7. />
复制代码
在emitValue方法中,在调用$emit之前,我们要检查修饰符。假如no-whitespace修饰符为true,则可以在将其发送给父对象之前修改该值。
  1. emitValue(propName, evt) {
  2. let val = evt.target.value
  3. if (this.modelModifiers['no-whitespace']) {
  4.   val = val.replace(/\s/g, '')
  5. }
  6. this.$emit(`update:${propName}`, val)
  7. }
复制代码
结论

希望你知道了一些有关v-model的新知识。
在它的基本用例(如表单和输入数据)中,v-model是一个非常简单的概念。然而,当我们开始创建自定义组件并处置惩罚更复杂的数据时,我们可以真正了解v-model。
以上就是Vue ​v-model相干知识总结的具体内容,更多关于Vue ​v-model的资料请关注草根技能分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作