onblur失去焦点事件只能在input、a、button等元素上绑定，在某些情况下无法使用这些标签，需要给div元素绑定onblur事件。
 
        这时候可以给div绑定tabIndex属性：
 
<div tabindex="0" onblur="functionA"></div>
 
        PS：tabIndex属性应该绑定number，根据w3c的解释，tabIndex是tab 键用于导航时规定元素的 tab 键控制次序（1 是第一个）。
 
        使用tabIndex后可能出现的样式问题，元素默认会加上黑边样式：
 
        使用outline:0 none;清除黑边，针对一些ie浏览器可以尝试使用hidefocus="true"属性。

1，比较
 
原来的jquery需要操作demo去获取表单中的值放在data中，然后通过ajax请求传给后台
 
vue框架中的数据，不再需要操作demo，通过v-model-------(双向数据绑定),自动收集数据
 
view：
 
<div id= "demo"> 
  <form >
    <!-- text输入框 -->
    <span>姓名</span>
    <input type="text" v-model= "msg">
    <br>
    <!-- 密码输入框 -->
    <span>密码</span>
    <input type="password" v-model= "paw">
    <br>
    <!-- 单选框 -->
    <span>性别</span>
    <input type="radio" value="男" v-model= "sex">
    男
    <input type="radio" value="女" v-model= "sex">
    女
    <br>
     <!-- 复选框 -->
    <span>兴趣</span>
    <input type="checkbox" value="foot" v-model= "likes">
    足球
    <input type="checkbox" value="basket" v-model= "likes">
    篮球
    <input type="checkbox" value="pingpang" v-model= "likes">
    乒乓球
    <br>
    <!-- 下拉列表 -->
    <select> v-model= "cityId">
      <option value="">请选择列表</option>
      <option :value="city.id" v-for="(city,index) in citys" :key= "city.id">{{city.name}}</option>
    </select>
    <br>
    <!-- 输入多行文本框 -->
    留言：
    <textarea rows="5" v-model= "info">

    </textarea>
    <input type="button" value="提交" @click= "submit">
    

  </form>
</div>
 
 
 
数据和vm:
 
 new Vue({
    el: '#demo',
    data: {
      msg: '王晨栋',
      paw: '1234567',
      sex: '男',
      likes: ['foot','pingpang'],
      citys: [{id:1,name:'一年级'},{id:2,name:'二年级'},{id:3,name:'三年级'}],
      cityId: '2',
      info: '这个是我的多行留言！'
    },
    methods : {
      submit (){
        console.log(this.msg+'-----'+this.paw+'-----'+this.sex+'-----'+this.likes+'-----'+this.cityId+'-----'+this.info);
      }
    }
   
  })
 
 
 
轻松简单获取到参数：
 

https://blog.csdn.net/qq_16882597/article/details/80431793
 
点击div的时候，设置blur失去光标事件，获取当前的值，赋值给下面隐藏的input框的value。
 
注意事项： form表单中的表单元素只有加上 name属性才能提交上去。表单元素有 input select radio textarea等.

angular6的表单数据提交是通过ngForm进行提交的，通过ngModel进行数据的双向绑定，具体代码如下：
 
html代码：
 
<form action=""  #myForm = "ngForm" (ngSubmit)="onSubmit(myForm.value)">
     <div class="input-component">
         <span  class="titleLeft">名称</span>
         <input type="text"  [(ngModel)]="advertisementData.advertName" 
         name="advertName">
     </div>
</form>
 
ts文件代码：
 
onSubmit(value){
    function formatTen(num) { 
      return num > 9 ? (num + "") : ("0" + num); 
    } 
    this.valueData =value;
}
 
所获得的value值就是表单提交的值，所获得的值是一个对象，然后通过表单的name属性进行赋值即可。