• Why v-Model?

As a two-way binding instruction, V-Model is also one of the two core functions of VUE, which is very convenient to use and improves the efficiency of front-end development. In the View layer, the Model layer needs to interact with each other using the V-Model.

  • The principle of V-Model is described briefly

V-model mainly provides two functions: The input value of view layer affects the attribute value of data, and the change of data attribute value will update the value change of VIEW layer.

The core is that, on the one hand, the Modal layer hijacks each attribute via defineProperty, and once changes are monitored updates through the associated page element. On the other hand, by compiling the template file, bind the input event to the V-model of the control, so that the page input can update the relevant data attribute value in real time.

  • V – what is the model

V-model is a two-way binding instruction of VUE, which can synchronize the input value of the control on the page to the data property of the related binding, and also update the value of the input control on the page when the data binding property is updated.

Vue2.0 implementation method

  • The parent component
<template>
  <div id="app">
    {{username}} <br/>
    <my-input type="text" v-model="username"></my-input>
  </div>
</template>

<script>
import myinput from './components/myinput'
export default {
  name: 'App'.components:{
      myinput
  },
  data(){
    return {
      username:' '}}}</script>
Copy the code
  • Myinput. Vue:
<template>
    <div class="my-input">
        <input type="text" class="my-input__inner" @input="handleInput"/>
    </div>
</template>

<script>
    export default {
        name: "myinput".props: {value: {// Get the value of the parent component
                type:String.default:' '}},methods: {handleInput(e){
                this.$emit('input',e.target.value) // Trigger the input event of the parent component}}}</script>
Copy the code

The most common thing is to control the display and closing of modal boxes. We can also use the V-Model to take element’s El-Dialog component as an example

  • App.vue
<template>
    <div>
        <kmDialog
            v-model="showDialog"
        >
        <el-button @click="show">Am I</el-button>
    </div>
</template>
<script>
    import kmDialog from 'KmDialog.vue'
    export default {
        components: {
            KmDialog
        }
        data () {
            return {
                showDialog: false}},methods: {
            show() {
                this.showDialog = true}}}</script>
Copy the code
  • KmDialog.vue
<template>
    <el-dialog
        :title="isEdit ? 'Edit Device' : 'Add Device '"
        :visible.sync="value"
        width="40%"
        @close="cancel"
      >
        <span>This is a piece of information</span>
    </el-dialog>
</template>
<script>
    export default {
        props: {
            value: {
                default: false.type: Boolean}},methods: {
            cancel() {
                this.$emit('input'.false)}}}</script>
Copy the code