Vue ​v-model相关知识总结


Posted in Vue.js onJanuary 28, 2021

​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的简单示例。

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

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

当我们在文本输入中输入时,我们会看到我们的data属性发生了变化。

v-model和v-bind的区别?

v-bind指令通常会与v-model切换。

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

在我们的例子中,这意味着如果我们的数据改变了,我们的输入也会改变,如果我们的输入改变了,我们的数据也会改变。

然而,v-bind只以一种方式绑定数据。

当你在你的应用中创建一个清晰的单向数据流时,这是非常有用的。但是,在v-model和v-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

好了,现在我们已经了解了form/input内部的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——我们将在示例中使用这个名称。

但是,我们可以像这样传递一个定制的模型名称。

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

注意:当我们使用自定义模型名称时,所发出方法的名称将被更新:name

下面是来自Vue文档的一张图来总结它。

Vue ​v-model相关知识总结

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

我们已经设置好了父组件,所以让我们从子组件访问它。

在CustomTextInput.vue中,我们必须做两件事:

  • 接受我们的v-model值作为prop
  • 当我们的输入发生变化时,触发一个更新事件

好的——让我们首先在脚本中声明它是prop。

export default {
 props: {
  modelValue: String,
 }
}

接下来,让我们创建我们的模板,将值设置为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>

使用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: {
  lastName: String,
  modelValue: String,
 }
}
</script>

V-model的自定义修饰符

正如我们所讨论的,Vue中内置了一些修饰符。但总有一天,我们会想要添加我们自己的。

假设我们想要创建一个修饰符来删除输入中的所有空格。我们称之为无空格。

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

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

props: {
 lastName: String,
 modelValue: String,
 modelModifiers: {
  default: () => ({})
 }
}

好的,我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue,它将接受正在编辑的属性和事件对象的名称。

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

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

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

结论

希望你知道了一些有关v-model的新知识。

在它的基本用例(如表单和输入数据)中,v-model是一个非常简单的概念。然而,当我们开始创建自定义组件并处理更复杂的数据时,我们可以真正了解v-model。

以上就是Vue ​v-model相关知识总结的详细内容,更多关于Vue ​v-model的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
python能在浏览器能运行吗
2020/06/17 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
数控个人求职信范文
2014/02/03 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
高三毕业评语
2014/12/31 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏