Vue2-表单与v-model

1.Vue表单使用 

表单输入绑定：表单输入绑定 — Vue.js

#v-model双向数据绑定

new Vue({
  template: `
    <div>
      /* 用户修改 , vue-data数据同步修改(内存) */
      <input v-model="message" placeholder="edit...">
      <p>message: {{message}}</p>

      /* vue-data数据修改 , 页面同步修改 */
      <button @click="message='Hi,message'">reset message</button>
    </div>
  `,
  data:{
    message:""
  },
}).$mount("#app");

#表单-复选框checkbox

new Vue({
  template: `
    <div>
      student name:{{checkedNames}}
      <br/>

      /* 复选框 v-model 同数组表示一组复选框, value 值作为元素值被传入数组 */
      <label>
        <input type="checkbox" v-model="checkedNames" value="Jack">
        <span>Jack</span>
      </label>
      <label>
        <input type="checkbox" v-model="checkedNames" value="John">
        <span>John</span>
      </label>
      <label>
        <input type="checkbox" v-model="checkedNames" value="Mike">
        <span>Mike</span>
      </label>
    </div>
  `,
  data:{
    checkedNames: []
  },
}).$mount("#app");

##不同的表单类型 type 值不同
##Vue表单的 data 值接受类型不同[文档规定]

#表单-下拉框selected(v-for 渲染动态选项)

new Vue({
  template: `
    <div>
      <span>Selected: {{ selected }}</span>
      <br/>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        /* vue 使用 key 属性跟踪和更新元素 */
        <option v-for="option in options" v-bind:value="option.value" :key="option.value">
          {{ option.text }}
        </option>
      </select>
    </div>
  `,
  data:{
    options:[
      {text:"grade A",value:1},
      {text:"grade B",value:2},
      {text:"grade C",value:3},
    ],
    selected: '1'
  },
}).$mount("#app");

#表单-表单form(submit 提交数据)

new Vue({
  template: `
    <div>
      {{user}}

      /* form+button 默认自动刷新页面 */
      <form @submit.prevent="onSubmit">
        <label>
          <span>user name:</span>
          <input type="text" v-model="user.username"/>
        </label>
        <label>
          <span>password:</span>
          <input type="password" v-model="user.password"/>
        </label>
        <button type="submit">login</button>
      </form>
    </div>
  `,
  data:{
    user:{
      username:'',
      password:''
    }
  },
  methods:{
    onSubmit(){
      console.log(this.user)
    }
  }
}).$mount("#app");

2.表单修饰符

#.lazy修改数据同步方式(多用于富文本编辑器)

new Vue({
  template: `
    <div>
      <span>username: {{username}}</span>
      <br/>
        <label>
          <input type="text" v-model.lazy="username"/>
        </label>
    </div>
  `,
  data:{
    username:""
  },
}).$mount("#app");

##input事件: 键盘,鼠标,任何输入设备的输入[输入时触发]
##change事件: 只在 input失去焦点 时触发[输入完成后触发]

#.number输入值转为 Number 类型(64位浮点数-双精度)

new Vue({
  template: `
    <div>
      <span>userage: {{userage}}</span>
      <br/>
        <label>
          /* .number 自动调用 parseFloat() 解析数据 */
          <input type="text" v-model.number="userage"/>
        </label>
    </div>
  `,
  data:{
    userage:0,
  },
}).$mount("#app");

#.trim过滤首尾空格

new Vue({
  template: `
    <div>
      <span>username: {{username}}</span>
      <br/>
        <label>
          <input type="text" v-model.trim="username"/>
        </label>
    </div>
  `,
  data:{
    username:"",
  },
}).$mount("#app");

3.v-model语法糖

v-model实现方式：自定义事件 — Vue.js 

##v-model语法糖

#原生input
new Vue({
  template: `
    <div>
      <span>username: {{username}}</span>
      <br/>
        <label>
          <input type="text" v-model="username">
          /* 原生input事件v-model等价于 */
          <input type="text" v-bind:value="username" v-on:input="username = $event.target.value"/>
        </label>
    </div>
  `,
  data:{
    username:"",
  },
}).$mount("#app");

#v-bind:value,username绑定输入框value属性值
#v-on:input监听输入框input事件,$event.target.value获取输入框当前值

#自定义组件

/* myInput.vue */ 
<script>
export default{
  name:"myInput",
  props:{
    value: {type:String}
  },
}
</script>

<template>
  <div class="pink wrapper">
    <input :value="value" @input="$emit('input',$event.target.value)" />
  </div>
</template>

<style scoped>
.pink{
  background: pink;
}
.wrapper{
  display: inline-block;
}
</style>

/* myInput.vue */ 
const Vue = window.Vue;
Vue.config.productionTip = false;

import myInput from "@/myInput.vue";

new Vue({
  components:{myInput},
  template: `
    <div>
      <span>username: {{username}}</span>
      <br/>
      <my-input v-model="username"/>
      /* 自定义组件v-model等价于 */ 
      <my-input :value="username" @input="username=$event"/>
    </div>
  `,
  data:{
    username:"",
  },
}).$mount("#app");

4.使用第三方库Ant Design of Vue

快速上手：Ant Design Vue

Ant Design of Vue表单：Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js