美文网首页
Vue数据收集

Vue数据收集

作者: 沈凤德 | 来源:发表于2022-12-25 08:46 被阅读0次

    1、什么是表单

    在项目开发过程中,凡是需要用户填写的信息都需要用到表单。

    ./images

    #2、form标签

    在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性:action和method。

    <form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
    
    </form>
    
    

    vue禁止form默认发送请求方式

      <form  v-on:submit.prevent>
        <div>
          <input type="search" name="search"   required v-model='inputVaule'>
         </div>
         <div>
          <input type="submit" name="submit" @click='search' value="提交">
         </div>
       </form>
    

    #3、name和value

    在用户使用一个软件系统时,需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交,而肯定是所有数据填好后一起提交。那就带来一个问题,服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……?

    很简单,给每个数据都起一个『名字』,发送数据时用『名字』携带对应的数据,接收数据时通过『名字』获取对应的数据。

    在各个具体的表单标签中,我们通过『name属性』来给数据起『名字』,通过『value属性』来保存要发送给服务器的『值』。

    但是名字和值之间既有可能是『一个名字对应一个值』,也有可能是『一个名字对应多个值』。

    这么看来这样的关系很像我们Java中的Map,而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是:Map<String,String[]>。

    name属性就是Map的键,value属性就是Map的值。

    有了上面介绍的基础知识,下面我们就可以来看具体的表单标签了。

    #4、单行文本框

    #①代码

    个性签名:<input type="text" name="signal"/><br/>
    
    

    #②显示效果

    ./images

    #5、密码框

    #①代码

    密码:<input type="password" name="secret"/><br/>
    
    

    #②显示效果

    ./images

    #6、单选框

    #①代码

    你最喜欢的季节是:
    <input type="radio" name="season" value="spring" />春天
    <input type="radio" name="season" value="summer" checked="checked" />夏天
    <input type="radio" name="season" value="autumn" />秋天
    <input type="radio" name="season" value="winter" />冬天
    
    <br/><br/>
    
    你最喜欢的动物是:
    <input type="radio" name="animal" value="tiger" />路虎
    <input type="radio" name="animal" value="horse" checked="checked" />宝马
    <input type="radio" name="animal" value="cheetah" />捷豹
    

    #②效果

    ./images

    #③说明

    • name属性相同的radio为一组,组内互斥
    • 当用户选择了一个radio并提交表单,这个radio的name属性和value属性组成一个键值对发送给服务器
    • 设置checked="checked"属性设置默认被选中的radio

    #7、多选框

    #①代码

    你最喜欢的球队是:
    <input type="checkbox" name="team" value="Brazil"/>巴西
    <input type="checkbox" name="team" value="German" checked="checked"/>德国
    <input type="checkbox" name="team" value="France"/>法国
    <input type="checkbox" name="team" value="China" checked="checked"/>中国
    <input type="checkbox" name="team" value="Italian"/>意大利
    
    

    #②效果

    ./images

    #8、下拉列表

    #①代码

    你喜欢的运动是:
    <select name="interesting">
        <option value="swimming">游泳</option>
        <option value="running">跑步</option>
        <option value="shooting" selected="selected">射击</option>
        <option value="skating">溜冰</option>
    </select>
    
    

    #②效果

    ./images

    #③说明

    • 下拉列表用到了两种标签,其中select标签用来定义下拉列表,而option标签设置列表项。
    • name属性在select标签中设置。
    • value属性在option标签中设置。
    • option标签的标签体是显示出来给用户看的,提交到服务器的是value属性的值。
    • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

    #9、按钮

    #①代码

    <button type="button">普通按钮</button>
    <button type="reset">重置按钮</button>
    <button type="submit">提交按钮</button>
    
    

    #②效果

    ./images

    #③说明

    类型 功能
    普通按钮 点击后无效果,需要通过JavaScript绑定单击响应函数
    重置按钮 点击后将表单内的所有表单项都恢复为默认值
    提交按钮 点击后提交表单

    #10、表单隐藏域

    #①代码

    <input type="hidden" name="userId" value="2233"/>
    
    

    #②说明

    通过表单隐藏域设置的表单项不会显示到页面上,用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据,例如:用户id等等。

    #11、多行文本框

    #①代码

    自我介绍:<textarea name="desc"></textarea>
    
    

    #②效果

    ./images

    #③说明

    textarea没有value属性,如果要设置默认值需要写在开始和结束标签之间。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>收集表单数据</title>
    </head>
    <body>
        <div id="root">
            <!-- 设置表单提交事件回调,并且阻止了表单提交的默认行为 -->
            <form @submit.prevent="printForm">
                <!-- 普通的文本输入框,如果使用ajax进行请求的发送,name属性不要也罢,这个没什么要注意的,主要是使用v-model来进行数据的双向绑定 -->
                <label>账号:</label><input type="text" name="account" v-model="account"> <br><br>
                <label>密码:</label><input type="password" name="password" v-model="password"><br><br>
    
                <!-- 单选框:
                1. 如果需要在多个数据中进行选择,需要为每个input单选框设置value属性值。
                2. 同一类型的单选框要设置一样的name属性。
    
                3. 如果只是一个单选框,用于勾选是否,比如是否同意某个协议等,值只有false和true,无需name,value,并且双向绑定数据为布尔值,
                   true为选中,false为不选中。 -->
                <label>性别:</label>
                男<input type="radio" name="gender" v-model="gender" value="man">
                女<input type="radio" name="gender" v-model="gender" value="woman"><br><br>
    
    
                <!-- 多选框:
                1. 如果需要在多个数据中进行选择,需要为每个input单选框设置value属性值。
                2. 同一类型的单选框要设置一样的name属性。
                3. 与该表单元素进行双向绑定的数据类型要为数组。
    
                4. 如果只是一个多选框,用于勾选是否,比如是否同意某个协议等,值只有false和true,无需name,value,并且双向绑定数据为布尔值,
                   true为选中,false为不选中。  -->
                <label>爱好:</label>
                学习<input type="checkbox" name="hobby" v-model="hobby" value="学习">
                游泳<input type="checkbox" name="hobby" v-model="hobby" value="游泳">
                听音乐<input type="checkbox" name="hobby" v-model="hobby" value="听音乐"><br><br>
    
                <!-- 下拉框:
                1. v-model双向绑定要在select标签完成。
                2. 每个option子标签要设置value -->
                <label>所在地区:</label>
                <select name="address" v-model="address">
                    <option value="">请选择地区</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                    <option value="广州">广州</option>
                </select>
                <br><br>
                <!-- 多行输入:与单行输入类似 -->
                <label>其他信息:</label>
                <textarea v-model="otherInfo" ></textarea><br><br>
    
                <!-- 多选框的另外一种使用方式,仅仅用于判断是否勾选。 -->
                <label>是否同意协议:</label>
                <input type="checkbox" v-model="isAgree">阅读并接受<a href="https://www.baidu.com" target="_blank">用户协议</a><br><br>
                <button>控制台输出收集的表单数据</button>
    
            </form>
        </div>
    
        <script src="./js/vue.js"></script>
        <script>
            new Vue({
                el:"#root",
                data:{
                    account:"",
                    password:"",
                    gender:"",
                    hobby:[],
                    address:"",
                    otherInfo:"",
                    isAgree:false
                },
                methods: {
                    printForm(){
                        console.log(JSON.stringify(this._data));
                    }
                },
            })
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:Vue数据收集

          本文链接:https://www.haomeiwen.com/subject/jpswfdtx.html