Vue 表单和 v-model

基本用法

input / textarea / checkbox / radio / select / form

• input-文本:

<input v-model="message" placeholder="edit me"> 
<p>Message is: {{ message }}</p>

• textarea-多行文本:

<span>Multiline message is:</span> 
<p style="white-space: pre-line;">{{ message }}</p> 
<br> 
<textarea v-model="message" placeholder="add multiple lines"></textarea>

• checkbox-复选框：

<input type="checkbox" id="checkbox" v-model="checked"> 
<label for="checkbox">{{ checked }}</label>

• radio-单选按钮：

<div id="example-4"> 
    <input type="radio" id="one" value="One" v-model="picked"> 
    <label for="one">One</label>
    <br> 
    <input type="radio" id="two" value="Two" v-model="picked"> 
    <label for="two">Two</label> 
    <br> 
    <span>Picked: {{ picked }}</span> 
</div>

new Vue({ 
    el: '#example-4', 
    data: { 
        picked: '' 
    } 
})

• select-选择框:
  • 单选时：

<div id="example-5"> 
    <select v-model="selected"> 
    <option disabled value="">请选择</option> 
        <option>A</option> 
        <option>B</option> 
        <option>C</option> 
    </select> 
    <span>Selected: {{ selected }}</span> 
</div>

new Vue({ 
    el: '...', 
    data: { 
        selected: '' 
    } 
})

- 多选时：

<div id="example-6"> 
    <select v-model="selected" multiple style="width: 50px;"> 
        <option>A</option> 
        <option>B</option> 
        <option>C</option> 
    </select>
    <br> 
    <span>Selected: {{ selected }}</span> 
</div>

new Vue({ 
    el: '#example-6', 
    data: { 
        selected: [] 
    } 
})

• form：

 <form @submit.prevent="onSubmit">
  <label>
    <span>用户名</span>
    <input type="text" v-model="user.username" />
  </label>
  <label>
    <span>密码</span>
    <input type="text" v-model="user.password" />
  </label>
  <button type="submit">登录</button>
</form>
    
new Vue({ 
      name: "App",
  data(){
    return {
      user:{
        username: "",
        password: ""
      },
    }
  },
  methods:{
    onSubmit()
  },
  components: {},
})

修饰符

.lazy / .number / .trim

• v-model.lazy，焦点失去时生效
• v-model.number，只接收数字
• v-model.trim，两头空格去掉

v-model

• 默认利用名为 value 的 prop 和名为 input 的事件
• 等价于 <input type="text" :value="user.username" @input="user.username = $event.target.value">
• 双向绑定：v-model会绑定一个变量，在变量变化的时候 UI 会变化，用户改变 UI 的时候，数据也会改变
• v-model 是 v-bind:value 和 v-on:input 的语法糖
• 自定义：v-on:input="$event"，原生：v-on:input="$event.target.value"
• 监听的事件
  • input 事件，键盘、鼠标、任何输入设备的输入
  • change 事件，只在 input 是去焦点时触发 (v-model.lazy)

使用 Ant Design of Vue

使用组件

$ npm i --save ant-design-vue

/* 完整引入 Antd 组件 */
import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false;
Vue.use(Antd)

new Vue({
  render: h => h(App),
}).$mount('#app')

/* 局部导入组件 */
import { Button, message } from 'ant-design-vue'

Vue.use(Button)

• 具体看文档