Is vuejs an API?

vuejs is not an API. vuejs is a progressive JavaScript framework for building user interfaces, designed to better organize and simplify web development. API refers to application programming interface, which is a set of predefined functions that provide applications and developers with the ability to access a set of routines based on certain software or hardware.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

vuejs is not an API.

Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces, aiming to better organize and simplify web development. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.

Vue’s core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting libraries, Vue is also fully capable of providing drivers for complex single-page applications (SPA).

Vue.js also provides MVVM data binding and a composable component system, with a simple and flexible API. Its goal is to achieve responsive data binding and composability through the simplest possible API. view component.

And API (Application Programming Interface, Application Programming Interface) are some predefined functions, the purpose is to provide applications and developers with access to a set of routines based on certain software or hardware capabilities without having to access the source code or understand the details of the inner workings.

Some APIs in vuejs

vm refers to the instance obtained by new Vue

(1) When the dom tag in After the value is bound to the value in data, changing the value corresponding to data can update the value in the tag in real time;

but the value added subsequently is invalid (binding fails).

(2) The object can be directly used as an attribute of data, which is valid (because the object is passed by value);

So the attribute and the object are congruent;

(3) The interfaces of vm are:

vm.$data is the data attribute of vm;

vm.$el is the dom node pointed to by the el attribute;

vm.$watch is to monitor attribute changes (such as the value in data) (refer to (9))

(4) The declaration cycle of the vue instance, there are several key functions:

created: After the event binding is completed, the function is directly used as an attribute in the vue instance when declaring the vue instance, the same below.

vm.$mount: Mount the dom node;

beforeCompile: before loading the template;

compiled: after loading the template;

ready: completed After (I guess);

beforeDestroy: before destruction;

destroyed: after destruction;

(5) vm.$mount (mounted id or class name )

When adding a new Vue instance, if you do not add el, it means that it will not be mounted and will only be generated. After generation, you can use this method to manually mount it to a certain place. If there are multiple ones that meet the conditions, Then mount it to the first place;

(6) v-for traverses arrays and objects, and can create multiple tags; for example, it is used to create tables;

(7) Escape: {{}} Two curly brackets will not escape the html tag of the value;

{{{}}} Three curly brackets will escape the html tag of the value and turn it into html text;

You cannot put bound data in the value (unless you use partials, but I don’t know how yet);

(8) Within the braces of interpolation, you can put expressions ( Functions cannot be placed);

(9) Within the curly brackets of interpolation, add the pipe symbol |, and you can use filters;

capitalize is a filter that capitalizes the first letter;

The filter can only be placed at the end of the expression and cannot be part of the expression;

The filter can add parameters;

The filter can be customized (but we don’t know how to customize it yet. defined method);

(10) Instruction:

v-if="variable name" Exists when a value is true;

v-bind: attribute Name = "Variable name" Bind the variable name after the equal sign (pointing to the attribute with the same name in the data attribute of vm) to the html attribute of the tag.

v-on: event type = "function name" When the event type is triggered, the function in methods is executed;

The abbreviation of v-on is @; the abbreviation of v-bind is: ( Colon);

(11) Computed attribute computed

The attribute here can be used as the data attribute; the advantage is that when the value in data changes, it will change together;

You can use more complex expressions (only simple expressions can be used in interpolation);

(12) Setters and getters of calculated properties

The default is getter (get attribute of the object), that is, when a certain value changes, the callback function (or get method) is triggered;

When the calculated property changes, certain values ​​need to be changed (such as changing 10 values, it is not good to write monitoring this value elsewhere), then you need to set the setter (set attribute of the object), that is, when the calculated attribute changes, the set method is triggered;

(13) Monitoring attributes vm.$watch (monitored attribute, callback function)

What is monitored is the data attribute;

The first parameter of the callback function is the changed value, and the second parameter is the changed value The previous value;

Triggered when the value of the attribute changes;

(14) class binding:

Use v-bind:class

Class use In object form, the key is the class name, and the value indicates whether to display this class;

You can directly place an object object in the value of v-bind:class, and place this object in the data attribute. Just set the properties of this object object in this way;

Class array writing method: the members in the array are variable names. If the variable is not an object object, the value of the variable is the class name; if it is an object, the object The key is the class name, and the value indicates whether to display;

(15) style binding:

Use v-bind:style

The form is an object, the key of the object Is the style name (such as fontSize, note that the style name needs to be in camel case instead of css), and the value is the value of the style;

You can directly put the object name on the right side of the equation of v-bind:style;

Changes in the value of the object will affect the inline style in real time;

For some styles, you can add prefixes for the browser (but some are not compatible with all browsers);

Related recommendations: "vue.js Tutorial"

The above is the detailed content of Is vuejs an API?. For more information, please follow other related articles on the PHP Chinese website!