今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单控件绑定"章节却找不到关于这点的介绍了,今天复习的时候在"组件"章节的"使用自定义事件的表单输入组件"小节里发现了这个语法糖的详细描述,特在此记录。

vue语法:

<input v-model="message">

实际相当于:

<input v-bind:value="message" v-on:input="message = $event.target.value">

另外还有一点值得注意的是,从这里我们可以看出,如果是自定义的表单组件,并且父组件在加载这个表单组件时使用了v-model指令,那么作为子组件,接收到的prop应该是value而不是message。这点要尤其注意。


详见:Vue - 自定义表单组件

Vue组件之自定义表单组件的更多相关文章

  1. 从后端到前端之Vue(六)表单组件

    表单组件 做项目的时候会遇到一个比较头疼的问题,一个大表单里面有好多控件,一个一个做设置太麻烦,更头疼的是,需求还总在变化,一会多选.一会单选.一会下拉的,变来变去的烦死宝宝了. 那么怎么解决这个问题 ...

  2. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  3. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  4. angular4 自定义表单组件

    自定义表单组件分为单值组件和多值组件. 单值组件:input/select/radio/textarea 多值组件:checkbox/tree组件 条件: 1.必须实现ControlValueAcce ...

  5. 【Flutter学习】基本组件之基本表单组件

    一,概述 表单时一个包含表单元素的区域. 表单元素允许用户输入内容,比如文本域,下拉列表,单选框,复选框等.常见的应用场景有:登录,注册,输入信息等. 表单里有两个重要的组件: Form:用来做整个表 ...

  6. Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...

  7. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  8. vue自定义表单生成器,可根据json参数动态生成表单

    介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...

  9. day75 form 组件(对form表单进行输入值校验的一种方式)

    我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...

随机推荐

  1. Hibernate的查询方式总结

    Hibernate的查询方式大体有三种,分别是HQL QBC和SQL三种.在网上查阅一一些资料,做了一个简单的总结. 1. SQL sql 是面向数据库表查询,from 后面跟的是表名,where 后 ...

  2. 树莓派(rasperberry pi 2)上装mysql远程无法访问

    于是组合关键字(树莓派 mysql)求百度问谷歌.未果.操刀自己来吧.检查mysql的配置文件 /etc/mysql/my.cnf 发现如下配置 # Instead of skip-networkin ...

  3. Tomcat的SSL证书配置以及Tomcat+Nginx实现SSL配置

    把jks上传到java容器在的服务器上,路径只要不是webapps下就可以,然后到conf目录下server.xml里配置 <Connector port=" protocol=&qu ...

  4. Lambda GroupBy Sum

    DataTable dt = new DataTable(); dt.AsEnumerable().GroupBy(r => r["ShopName"]) .Select(g ...

  5. Google V8编程详解附录

    Google V8编程详工具函数 头文件:utils.h #ifndef UTILS_H_ #define UTILS_H_ #include "v8.h" #include &l ...

  6. 最简单的JS图片轮播

    var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...

  7. 使用 Entity Framework Core 时,通过代码自动 Migration

    一 介绍 在使用 Entity Framework Core (下面就叫 EF Core 吧)进行开发时,如果模型有变动,我们要在用 EF Core 提供的命令行工具进行手工迁移,然后再运行程序.但是 ...

  8. 转载:log4j.properties log4j.xml 路径问题

    自动加载配置文件: (1)如果采用log4j输出日志,要对log4j加载配置文件的过程有所了解.log4j启动时,默认会寻找source folder下的log4j.xml配置文件,若没有,会寻找lo ...

  9. const 限定符

    1.定义const对象 const限定符把一个对象转换成一个常量 const int Bufsize = 512; 定义Bufsize 为常量并初始化为512.变量Bufsize仍然是一个左值,但是不 ...

  10. 使用vagrant创建虚拟机

    关于vagrant,维基百科给出了定义:"Vagrant is an open-source software product for building and maintaining po ...