表单和 v-model

思维导图

form 做表单一定要用 form+button组合

<template>
    <div id="app">
        登录
        <form @submit.prevent="onSubmit">    //.prevent阻止默认动作
            <label>
                <span>用户名</span>
                <input type="text" v-model="user.username"/>
            </label>
            <label>
                <span>密码</span>
                <input type="password" v-model="user.password"/>
            </label>
            <button type="submit">
                登录
            </button>
        </form>

    </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        user: {
          username: '',
          password: ''
        },
        x: ''
      }
    },
    methods: {
      onSubmit() {
        console.log(this.user)
      }
    },
    components: {}
  }
</script>

v-model

<label>
                <span>用户名</span>
                <input type="text" v-model="user.username"/>
</label> 

上面的v-model等价于

<label>
                <span>用户名</span>
                <input type="text" :value="user.username"
                @input = "user.username = $event.target.value"/>
</label>

自己封装一个

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

<script>

  export default {
    name: 'MyInput',
    props: {
      value: {
        type: String
      }
    },
  }
</script>

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