11、数字 type="number"
这个首先可以设定输入法为数字状态，不用再从中文改成数字了，省去用户的一个步骤，有些版本还可以限制用户更换状态。想输入英文、汉字是没戏了，不过还是有点小问题，因为小数点、正负号、e都属于合法字符，所以可以输入，但是却没有判断数量和位置。
比如小数点可以输入n个，+-号可以任意位置输入。这就有点郁闷了。还有科学计数法的e，这个我都忽略了，看到能输入e想了半天才想起来想的很周到，但是我输入eeee，也是可以的。既然都做了限制，为啥不顺便限制一下数量呢？
12、电话号码 type="tel"
这个嘛，有些版本会设定输入法为数字状态，有些版本就没啥效果了，如果电话号里面只有数字的话，建议用number的方式。
13、电子邮件 type="email"
这个也基本没啥效果。输入法应该出现@、 .com、 163.com 这类的快捷输入的，可是没有发现。不知道其他系统或者输入法有没有。
14、网址 type="url"
可以设定输入法为英文状态，但是没有出现http:// 、.com、.cn、www 这类的快捷输入。
15、滑块 type="range"
这个好像以前就有，只是不常用。不贴图了，也没啥弹出效果，直接拽就好。
16、查询 type="search"
这个唯一特点就是输入信息后，右侧可以出现一个“X”，按一下就会清空文本框。
17、datalist
这个是给文本框提供一个像下拉列表框那样的备选项，还是比较实用的，只是有一个小问题，他自带过滤功能，比如输入 a 那么只会保留a开头的备选项，其他的 就都消失了。如果输入了信息只会，想换成其他备选项的话，就需要先清空才行，否则其他选项是不会出现了。不过好在我们有search，还记得他有什么功能吗？那个x。好了这两个似乎是绝配了。
Vue组件的基础知识
表单这一块为啥要做成组件呢？因为要复用呀。一个表单里面有很多很多文本框、下拉列表框，一个项目又有很多很多的表单？如果一个一个的设置属性，是不是太麻烦。如果需求变化了，要先找到这个*.vue，然后再去修改对应的属性。好麻烦的说。如果做成组件，不仅仅可以达到复用的效果，还可以做到业务需求和代码的分离！
组件之hello word
先做一个简单的组件看看组件到底是啥样子的。下面是官网的例子（加了一个props），我们来分析一下。
Vue.component('button-counter', { props:["value"], data: function() { return { count: 0 } }, template: `<button v-on:click="count++"> You clicked me {{ count }} times.{{value}}</button>` }); new Vue({ el: '#components-demo' }); <div id="components-demo"> <button-counter value="3"></button-counter> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>
首先使用Vue.component('button-counter', {}) 注册一个组件。第一个参数就是组件的名称，后面的参数是组件的实现代码，其中包括属性（props）、内部变量（data）、模板（template）、方法（methods）等。其实组件和vue的实例还是很像的，最明显的就是多了个属性（props）和模板。
属性（props）是把组件外部的数据传递到组件内部，是一个很基础的数据传递方式。可以传递的数据类型也没有限制。数字、文本、对象都可以。
模板呢，就是组件内部的结构，编写方式和vue的实例是很像的。这里有个主意的地方，一开始我没注意看，“template:”后面跟的是啥？不是单引号哦，而是键盘左上角esc键下面的那个。这个符号终于派上用场了。是不是一直没按过？
用这个符号框起来的可以直接换行，这样就不用一行一行的“+’”了。
页面里使用的方式来引用，相当于我们自己定义了一个dom。当然这个dom是需要vue来解析的，没有vue解析的话浏览器是不会识别。运行的时候也是没有的，直接就是我们写的模板（绑定数据后）的内容。
data使用了function的形式，这个是在组件复用的时候区分多个组件的内部数据的。如果不用function的形式，复用的多个组件，将会共用同一个data值。
然后就是做一个vue的实例，对div进行托管。
表单是使用率最高的一个地方了，项目再小也要有个表单，那么如何更好的做好表单呢？我们思路就是————依赖注入。这个可不是sql注入攻击，大家不要弄混淆了。那么如何实现呢？让我们一一分析。
组件的特点和优势
我们为啥要做表单组件呢？首先要看看组件的优势了，优势都有哪些呢？封装和复用、切换表单元素的形式、适配各种UI。
- 复用和封装
等等，原生的表单元素不是也可以复用吗？为啥还要弄个组件？这个就要做一个对比了。用原生的方式做一个下拉列表框是啥样的呢？
<select> <option value ="1">男</option> <option value ="0">女</option> </select>
要写好几行太麻烦了，如果封装一下，各种设置由组件内部解决，外部传参数就可以了，那么是不是可以很方便呢？
不管多复杂的表单元素，一行搞定，其他的交给组件内部处理。
2.可以随意切换“形态”
经理说，这个下拉列表框改成单选的形式吧，这样用户选着方便。
于是我们只好改成这样：
<input type="radio" checked="checked" name="Sex" value="1" />男性 <input type="radio" name="Sex" value="0" />女性
过两天经理又说了：哎呀，还是下拉列表框好看，你再改回去吧。
。。。。。。
真的吗？算了，经理说啥就是啥。看在工资的份上我忍！
经理的要求必须做到，没有讨论的余地。那么怎么办呢？只能改自己了。当然不是翻来覆去的手敲，而是做成组件！
比如：复选改单选，单选改下拉列表框。通过表单元素组件，改一下就可搞定。
3.适配器
现在vue有好多好多UI组件，用哪个好呢？现在我们可以基于原生html封装一个表单控件，那么以后呢？是不是可以针对其他UI组件封装一个表单元素控件呢？然后只要能够保证接口不变，那么我们依赖这个组件写的代码就不需要改变。
最终要实现——换UI就换UI，不影响业务逻辑的代码。
现在看看写表单组件是不是很有必要了呢？
组件的双向绑定
对于表单元素，还有一个需要注意的地方，那就是数据的双向绑定！我们先来个简单的练练手，对 input 封装一下。
Vue.component('my-input', { props:["value"], template: `<input type="text" :value="value" @input="$emit('input',$event.target.value)" :key="1">` }); var form = new Vue({ el: '#components-demo', data:{ formValue:{ v1:'22' } } }); <div id="components-demo"> <my-input v-model="formValue.v1"></my-input> {{formValue.v1}} </div>
先看一下页面里的使用方法，是不是很熟悉的味道，熟悉的v-model，熟悉的大括号。
然后再看组件内部实现。
首先定义一个属性（props）value，用于接收组件外面传递的数据，然后模板里面要做两件事情：接收参数、返回用户输入的数据。
v-model是一个语法糖，外面可以直接用，但是组件内部就不能直接用了，必须拆成两块才行：一个是 :value给文本框赋值；另一个是监听input事件（代码第五行），然后使用$emit向组件外部传递值。$emit有两个参数，第一个参数是外部监听的事件，第二个参数（含后面的参数）是要传递出去的数值。
可能大家看着有点晕，两个input是咋回事，我们来改变一下，就都明白了。
@change="$emit('event1',Date.now())" 模板里加入这样一行。change是文本框的原生change事件，这里必须用原生的，不能用自定义的。
@change是让vue监听这个事件。 $emit 是向组件外面传递消息，第一个参数event1，是外部vue监听的事件，这个可以自定义，写啥都行。
第二个参数是要传递的值，这里Date.now()是当前时间，写$event.target.value 的话，就是文本框的值。也就是说，写啥都行，都可以传递出去。
<my-inputv-model="formValue.v1"@event1="fun"></my-input>
methods:{ fun:function(data) { alert(data); } }
外部监听自定义event1事件，然后调用methods里的方法fun。
如果理解了，那么组件的消息传递算是基本掌握了。
表单元素组件
- 需要哪些属性
表单元素组件需要设置多少属性呢？这就是苦力活了，既然把input封装进来了，那么他的原生属性都应该能够支持，就是说要在外部可以设置。那么怎么办呢，如果一个个传递那还不如用原生的呢，所以我们设置一个对象属性，直接传递一个对象过来，这样就简单了。
熟悉了表单元素的属性之后，我们可以定义一个json来保存这些属性：
c1:{ //辅助 controlId: '150', // 编号，区别同一个表单里的其他控件 controlType: 101, // 用类型编号表示type colName: '姓名', //中文名称 isClear: false, //isClear 连续添加时是否恢复默认值 //通用 disabled: false, // 是否禁用 required: true, //必填 pattern: '', //用正则做验证。 tabIndex:0, // tab 键顺序 class:'cssTxt input_t1', title: '', //提示信息 //多行文本 rows:5, //行数 cols:100, //列数 //文本框类 name:'', value: '', placeholder: '请输入姓名', readonly: false, //只读 size: 10, // 字符宽度 maxlength: 20, //最大字符数 autocomplete: 'on', //off min: 1, // 最小值 max: 100, // 最大值 step: 1, // 步长 multiple: false, //是否可以有多个值，用于上传文件 listKey:'browsers', //备选文字标识 //选择类和备选文字的选项 list: [{ "id": "1", "name": "北京", "check": false } , { id: '2', name: '上海', check: false }, { id: '3', name: '广州', check: false } ] }
因为json的结构可以非常灵活的组合，所以这里设计一个大而全的结构，把所有需要的属性都放在一起，使用的时候，可以根据元素类型灵活取舍。
看到这里大家可能想，这样太复杂了，还不如直接使用原生的呢。大家先别急，看完下面这三点然后在下结论。
- 不是所有类型都需要这些属性，每一个类型用到的并不多。
- 可以写一个辅助工具来生成这个json，并不需要我们手撸代码。
- 可以根据文档自动生成这个json。
比如纯文本框（type=”text”）可以简化为：
colName:{ controlId: 'colName', //ColumnID controlType: 116, class:'cssTxt input_t1', placeholder: '请填写标题', size: 30, maxlength: 50 }
这样是不是简单多了呢？其实最简单的设置只需要 controlType 即可，其他的都可以不设置，但是也就意味着只能用默认的文本框，没有办法进行其他的设置。总之还是要看你要对表单进行多少设置。
