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 actuallyvalue
Properties andinput
Event syntax sugar.
For checkboxes and checkboxes, it ischecked
Properties andchange
Event 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 defaultvalue
Properties andinput
Events.
Modify the default properties and events in the component to:age
andchange
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.