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-cli 创建模板项目
Nov 19 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
Vue深入理解插槽slot的使用
Aug 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+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
广告词串烧
2014/03/19 职场文书
租赁协议书范本
2014/04/22 职场文书
高一新生军训方案
2014/05/12 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
贷款委托书
2014/08/01 职场文书
见习报告的格式
2014/11/04 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
读书笔记格式
2015/07/02 职场文书
公司开业致辞
2015/07/29 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server