Shulou(Shulou.com)06/03 Report--

This article mainly introduces whether vuejs is API or not. It has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

Vuejs are not APIs. vuejs is a progressive JavaScript framework for building user interfaces designed to better organize and simplify Web development. APIs, on the other hand, are application programming interfaces, predefined functions designed to provide applications and developers with the ability to access a set of routines based on software or hardware.

This tutorial operating environment: Windows 7 system, vue2.9.6 version, DELL G3 computer.

Vuejs are not APIs.

Vue (pronounced/vju $>/, similar to view) is a progressive JavaScript framework for building user interfaces designed 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 focuses only on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. Vue, on the other hand, is also fully capable of providing drivers for complex single-page applications (SPA) when used in conjunction with modern toolchains and various supporting libraries.

Vue.js also provides MVVM data binding and a composable component system with simple, flexible APIs, with the goal of implementing responsive data binding and composable view components through the simplest possible APIs.

An API (Application Programming Interface) is a set of predefined functions designed to provide applications and developers with the ability to access a set of routines based on a piece of software or hardware without having to access the source code or understand the details of the internal workings.

Some APIs in vuejs

vm refers to an instance of new Vue acquisition

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

But the value added later is invalid (binding failed).

(2) An attribute that can directly treat an object as data is valid (because the object is passed by value);

So the attribute and the object are congruent;

(3) VM interfaces include:

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 values in data)(see (9))

(4) The declaration cycle of vue instances has several key functions:

created: After event binding ends, the function directly declares the vue instance as an attribute in the vue instance, the same below.

vm.$ mount: mount dom node;

beforeCompile: Before loading the template;

compiled: after loading the template;

ready: after completion (I guess);

beforeDestroy: before destroying;

destroyed: after destruction;

（5）vm.$ mount(id or class name of mount)

In the case of new Vue instance, without el, it means that it is not mounted and only generated. After generation, you can manually mount it to a certain place through this method. If there are multiple qualified instances, mount it to the first place;

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

(7) Escape: {{}} Two braces, html tags that do not escape values;

{{{}} Three curly braces, will escape the html tag of the value, that is, become html text;

bound data cannot be placed inside the value (unless partials are used, which I don't yet);

(8) In the curly brackets of interpolation, expressions can be placed (functions cannot be placed);

(9) In the curly brackets of interpolation, add the pipe symbol| filters can be used;

Capitalize is a filter that capitalizes the first letter;

Filters can only be placed at the end of an expression and cannot be part of it.

Filter can add parameters;

Filters can be customized (but the customization method is not yet known);

(10) Instructions:

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

v-bind: attribute name ="variable name" binds the variable name after the equal sign (pointing to the same attribute in vm's data attribute) to the html attribute of the tag.

v-on: Event type ="function name" Executes the function in methods when the event type is triggered;

v-on is abbreviated @;v-bind is abbreviated: (colon);

(11) Computed attributes

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

More complex expressions can be used (interpolation can only use simple expressions);

(12) Calculate the setter and getter of attributes

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

When the calculation attribute changes, you need to change some values (such as changing 10 values, it is not good to write and listen to this value elsewhere), then you need to set the setter (set attribute of the object), that is, when the calculation attribute changes, trigger the set method;

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

Monitoring is the data attribute;

The first argument of the callback function is the changed value, and the second argument is the value before the change.

Triggers when the value of the property changes;

(14) Class binding:

v-bind:class

class uses object form, key is class name, 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, so you can set the attributes of this object object;

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

(15) Style binding:

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 adopt hump type instead of css type), and the value is the value of the style;

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

Object's value changes, affecting inline styles in real time;

For some styles, browser-specific prefixes are possible (but some are not compatible with all browsers);

Thank you for reading this article carefully. I hope that the article "vuejs is not API" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you more, pay attention to the industry information channel, and more relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.