Vue 构造选项 - 进阶使用说明

new Vue({
  ...,
  directives:{
    "x"：directiveOptions
  }
})

<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>

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

<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>