In-depth understanding of the implementation principles of vue. js bidirectional binding

This article will give you an in-depth introduction to the implementation principle of vue. js two-way binding. If you need it, you can refer to it for reference. Let's take a look at it with xiaobian. Preface

We all know that Vue. js has two core functions: a responsive data binding system and a component system. This article only explores how to implement the hello world bidirectional binding mentioned in the beginning of almost all Vue. First, let's talk about the knowledge points involved, and then refer to the source code to implement the hello world opening example with as few code as possible.

1. accessors

The accessor attribute is a special attribute in an object. It cannot be set directly in the object, but must be defined separately through the defineProperty () method.

Var obj = {}; // defines an Object named hello for obj. defineProperty (obj, "hello", {get: function () {return something}, set: function (val) {/* do something */}})

Obj. hello // you can read the accessors attributes like normal attributes.

The "value" of the accessors attribute is special. Reading or setting the value of the accessors attribute actually calls its internal features: get and set functions.

Obj. hello // read the attribute, that is, the get function is called and the return value of the get function is returned.

Obj. hello = "abc" // assign a value to the attribute, that is, call the set function.

Now, the hello world bidirectional binding is basically implemented. The text content will change along with the content in the input box. Modifying the vm. text Value in the Controller will be synchronously reflected in the text content.

Summary

The above is about vue. I hope the content in this article will help you learn and work. If you have any questions, please leave a message, thank you for your support for PHP.

For more details about the implementation principles of vue. js bidirectional binding, refer to the PHP Chinese website!