表单输入绑定

基本用法

文本（input）

代码：

<template>
  <div id="app">
   <input v-model="message" placeholder="edit me">
   <p>Message is: {{ message }}</p>
   <p><button @click="message = 'frank'">set message to frank</button></p>
 
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      message: 'hi'
    }
  },
  components: {}
}
</script>

• 双向绑定：改message（内存），UI（页面）会自动变化；另外，如果用户改input（页面上的东西），message（内存）会自动变化

多行文本（textarea）

代码：

<template>
  <div id="app">
   <textarea v-model="message" placeholder="edit me"/>
   <p>Message is: {{ message }}</p>
   <p><button @click="message = 'frank'">set message to frank</button></p>
 
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      message: 'hi'
    }
  },
  components: {}
}
</script>

复选框（checkbox）

• 代码（单个复选框）：

<template>
  <div id="app">
   <label>
    <input type="checkbox" v-model="x">
    <span>X:{{ x }}</span>
   </label>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      x: true
    }
  },
  components: {}
}
</script>

选中即为true,未选中为false

• 代码（多个复选框）

<template>
  <div id="app">
    爱好： {{x}}
   <label>
    <input type="checkbox" v-model="x" :value="1">
    <span>旅游</span>
   </label>
   <label>
    <input type="checkbox" v-model="x" :value="2">
    <span>美食</span>
   </label>
   <label>
    <input type="checkbox" v-model="x" :value="3">
    <span>运动</span>
   </label>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      x: []
    }
  },
  components: {}
}
</script>

单选按钮(radio)

代码：

<template>
  <div id="app">
    想做的事： {{x}}
   <label>
    <input type="radio" v-model="x" :value="1">
    <span>旅游</span>
   </label>
   <label>
    <input type="radio" v-model="x" :value="2">
    <span>美食</span>
   </label>
   <label>
    <input type="radio" v-model="x" :value="3">
    <span>运动</span>
   </label>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      x: ''
    }
  },
  components: {}
}
</script>

最好加上name,表示一组的。

选择框(select)

• 代码（单选时）

<template>
  <div id="app">
    你想要的： {{x}}
    <select v-model="x">
    <option value>请选择</option>
    <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option>
  </select>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      array: [
        {text: "旅游", value: 1},
        {text: "美食", value: 2},
        {text: "运动", value: 3}
      ],
      x: ''
    }
  },
  components: {}
}
</script>

• 代码（双选时）

<template>
  <div id="app">
    你想要的： {{x}}
    <select multiple v-model="x">
    <option value>请选择</option>
    <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option>
  </select>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      array: [
        {text: "旅游", value: 1},
        {text: "美食", value: 2},
        {text: "运动", value: 3}
      ],
      x: ''
    }
  },
  components: {}
}
</script>

选择时按Shift点击，跳着选择时按Alt。

form

<template>
  <div id="app">
    登录
    <form @submit.prevent="onSubmit"> //form监听它的表单事件，阻止默认动作
      <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： 1. input事件：键盘，鼠标，任何输入设备的输入；2. change事件：只在input失去焦点时触发

.lazy

• 输入时不要那么快的变化。适用于复文本编辑器，因为复文本编辑器中间可能有很多变化，如果直接监听input，事件太多，还不如等用户移出焦点之后，一次性获取用户输入的复文本

.number

• 输入的只选择数字

.trim

• 自动把前面的后面的空格去掉

v-model

• MyInput.Vue

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

• App.Vue

<template>
  <div id="app">
    {{user}}
    <hr />登录
    <form @submit.prevent="onSubmit">
      <label>
        <span>用户名</span>
        <MyInput v-model="user.username"
        @input="user.username = $event.target.value"/>
      </label>
      <label>
        <span>密码</span>
        <input type="password" v-model="user.password">
      </label>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

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

面试问题

面试官问你双向绑定，其实就是在问v-model。什么是v-model

• v-model可以实现我绑定一个变量：在变量变化的时候，UI会变化；用户改变UI的时候，数据也会变化。v-model 实际上是v-bind：value和v-on:input的语法糖

v-on:input=？？？

• 原生的v-on:input="xxx=$event.target.value";如果是自定义的组件就是v-on:input="xxx=$event"

Ant Design of Vue

www.antdv.com/components/…