Vue表单和v-model

Vue表单

主要是按照Vue的文档，进行CRM操作，文档链接文档链接

介绍一些form表单中的基础组件用法

• form表单中有哪些基本组件，如：input/textarea/checkbox/radio/select/form

input

//html
<template>
  <div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <p>
      <button @click="message='xiaobangsky'">set message to xiaobangsky</button>
    </p>
  </div>
</template>
//js
export default {
  name: 'App',
  data(){
    return {
      message:'hi'
    }
  }
}

textarea

//html
 <div id="app">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <p>Message is: {{ message }}</p>
    <p>
      <button @click="message='xiaobangsky'">set message to xiaobangsky</button>
    </p>
  </div>

checkbox

//html
  <div id="app">
    <input  type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label  for="jack">Jack</label>
    <input  type="checkbox" id="john" value="John" v-model="checkedNames">
    <label  for="john">John</label>
    <input  type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label  for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>
//js
export default {
  name: 'App',
  data(){
    return {
      checkedNames: []
    }
  }
}

radio

//html
<div id="app">
    <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>
//js
export default {
  name: 'App',
  data(){
    return {
      picked: ''
    }
  }
}

select

//html
 <div id="app">
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
//js
export default {
  name: 'App',
  data(){
    return {
      selected: ''
    }
  }
}

form

//html
  <div id="app">
    <form @submit.prevent="submit">
      <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>
//js
export default {
  name: 'App',
  data(){
    return {
      user: {
        username:'',
        password:''
      }
    }
  },
  methods:{
    submit(){
      console.log(this.user);
    }
  }
}

修饰符

• 修饰符：.lazy/.number/.trim

.lazy

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

.number

<input type="password" v-model.number="user.password"/>

.trim

<input type="text" v-model.trim="user.username"/>

v-model

代码示例

//v-model实际上等价于v-bind:value和v-on:input
<input type="text" :value="user.username" @input="user.username=$event.target.value"/>

自定义input

<template>
    <div class="red">
        <input :value="value" @input="onInput"/>
    </div>
</template>
<script>
export default {
    name:'MyInput',
    props:{
        value:{
            type:String
        }
    },
    methods:{
        onInput(e){
            const value =e.target.value;
            this.$emit('input',value)
        }
    }
}
</script>
<style scoped>
.red{
    background: red;
    display: inline-block;
}
</style>

//主视图
 <my-input :value="user.username" @input="user.username=$event"/>
 import MyInput from './MyInput.vue';
export default {
  components: { MyInput },
  name: 'App',
  data(){
    return {
      user: {
        username:'',
        password:0
      }
    }
  }
}

总结

• v-model可以绑定一个变量
• v-model实际上等价于v-bind:value和v-on:input
• 当为原生组件时，v-on:input=“xxx=$event.target.value"，当为自定义组件时，v-on:input="xxx=$event”

ant-design-vue的使用

• 见官方文档ant-design-vue
• 简单示例

<template>
  <div id="app">
    <a-input placeholder="Basic usage" />
  </div>
</template>

<script>

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

import Vue from 'vue'
import App from './App.vue'
import AntD from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

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

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