Students who have studied VUE should be familiar with V-Model. Let’s introduce v-Model in detail to let the interviewer hear your answer.

The V-model is mostly used on form elements, and is a syntactic sugar that implements bidirectional binding to form elements.

V-model, when applied to a normal text box, is actuallyvalueProperties andinputEvent syntax sugar.

For checkboxes and checkboxes, it ischeckedProperties andchangeEvent syntax sugar.

The V-Model you didn’t know about

V-model can be used in custom components in addition to form elements. When used in custom components, the default is also the syntactic sugar for the value attribute and input event. This can be modified by configuring Prop and Event for the Model in the component.

When v-Models are used in custom components, they are bound to child components by defaultvalueProperties andinputEvents.

Modify the default properties and events in the component to:ageandchange

To achieve a simple version of the model command –myModel, can achieve common text box and multi – box two-way data binding

Functionality is implemented but the code is poorly written…

Vue.directive('myModel', {
  inserted(el, binding, vnode) {
    let event = ' ';
    if (el.type === 'text') {
      event = 'oninput';
      el.value = binding.value;
    } else {
      event = 'onchange';
    }
    el[event] = function(e) {
      if (el.type === 'text') {
        vnode.context[binding.expression] = e.target.value;
      } else {
        let index = vnode.context[binding.expression].indexOf(e.target.value);
        if (index > -1) {
          vnode.context[binding.expression].splice(index, 1);
        } else{ vnode.context[binding.expression].push(e.target.value); }}}; },update(el, binding) {
    if (el.type === 'text') {
      el.value = binding.value;
    } else {
      for (let i = 0; i < binding.value.length; i++) {
        if (el.value === binding.value[i]) {
          el.checked = true; }}}},});Copy the code

Write in the last

Comments are welcome if there are any mistakes. There are better ways to code and welcome to talk about them.