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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
详解Vue的options
May 15 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
关于vue-router-link选择样式设置
Apr 30 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实现下载CSS文件中的图片
2015/12/06 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python的另外几种语言实现
2015/01/29 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python学生管理系统的实现
2020/04/05 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python实现自动装机功能案例分析
2020/10/22 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
优秀通讯员事迹材料
2014/01/28 职场文书
论文评语大全
2014/04/29 职场文书
汽车专业求职信
2014/06/05 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android