表单输入绑定、组件基础

目标：

1. 熟练掌握vue中表单的处理方式
2. 对之前学习的内容简单回顾一下，并写一个实例，学以致用（最好脱离文档）

vue中表单的处理方式

1. vue中表单的处理使用了v-model指令, 这个指令可以直接把一个数据绑定到表单元素中的value,checked,selected特性,同时这些特性也会被忽略掉初始值,而总是将vue实例的数据作为数据来源.
2. 使用了v-model之后<textarea></textarea>之间的插值就不会有效了,会被v-model代替.

双向绑定(v-model)

1.绑定value: text,textarea(字符串)

text:

textarea:

2.绑定checked: checkout(单个绑定布尔值,多个绑定字符串数组), radio(字符串)

checkout(单个):

checkout(多个):

JackJohnMike

radio:

One
Two

3.绑定selected: select(字符串)

    请选择    A    B    C

修饰符(用在v-model指令上)

.lazy: 触发的事件不一样,使用change触发,而不是input触发

.number: 自动转为数字类型

.trim:自动过滤后卫空白符号

例子

form.html

    
        
        
                
    
        
     
            
                  
      {
    {formData.textValue}}
      
            
      {
    {formData.textareaValue}}
      
            
                  
      
      点我啊
      
            
                  
                  
      哈哈            
                  
      呵呵            
                  
      嘻嘻            
      
            多选选中的是
       {
    {value}}             
      
            
                  
                  
      one            
                  
      two            
                  
      three            
      
            单选选中的是
       {
    {formData.pickedValue}}             
      
            
                  
                      请选择                A                B                C                        
      
            下拉选择框选中的是
       {
    {formData.selectedValue}}             
      
            
      提交