code sky

 width:auto: The default width value of block-level elements. When set to this value, the browser will automatically select an appropriate width value to adapt to the width of the parent element. When the width is set to 100%, the width of the child element box The value is equal to the parent's content, and as the parent's content automatically changes, after adding the padding and margin of the child element, its width remains unchanged, which is the difference from setting it to auto. But we most often use width:auto, because it is more flexible, width:100% is used less, because when adding padding or margin, this method is easy to make it exceed the parent box and destroy the original layout.

 The box model is a very important concept in CSS layout, it includes content area, padding, border, and margin. Box models can be divided into two types: standard box models and IE box models. The box model, as the name suggests, is used to hold things, and the things it holds are the content of HTML elements. In other words, every visible HTML element is a box.

 The reduce method contains two parameters, the first parameter is a callback function, which contains four parameters, the second parameter is an optional parameter, as the first parameter of the callback function. It executes the callback function for each element in the array in turn, excluding elements that are deleted or never assigned in the array, and accepts four parameters: the initial value (or the return value of the last callback function), the current element value, the current Index, the array on which reduce is called.

 The props property in Vue is used to pass values between components. Its main function and meaning is to receive data from the outside. It is equivalent to data and methods.When the attributes in the newly added mixins.js file conflict with the attributes in the component, such as the data attribute, methods attribute, etc., the attributes in the component shall prevail. If there is no conflict, the incoming props will be executed. But there are special ones: when there is a conflict between the lifecycle hook functions, the hooks passed in by props or in mixins.js are used first.

 This problem occurs when the less writing style is used in Vue. The reason for this problem is that the less-loader module is not installed, or the installed version is incompatible with the version of webpack. Therefore, an error occurs when using it, and the project cannot be started normally.

 Vue components can be divided into global components and local components. Global components are not used much, but local components are used more. The creation method is to use Vue.extend(options) to create, where options and the options passed in when new Vue(options) are almost the same, but there are also some differences: do not write el, data can no longer be written as an object, and must be written as a function. Generally, partial components are used more in single-page applications. Partial components belong to a Vue instance and are added (mounted) through comopnents. Registering components: local registration: you need to pass in the components option when new Vue, global registration: Vue.component ('component name', component), the component can be defined and placed, or it can be directly in the form of an object. Written in Vue.component.

 Vue officially provides some commonly used instructions v-text, v-html, v-model, v-if, v-show, etc. In addition, Vue also allows developers to customize related instructions. It is divided into private custom directives and global custom directives. The difference between them is: in each vue component, private custom directives can be declared under the directives node, and private custom directives only take effect in this component; globally shared custom directives Defining a directive needs to be declared via Vue.directive().

 What is the v-model directive? In short, it is Vue's two-way binding instruction, which can synchronously update the value input by the control on the page to the data attribute of the relevant binding, and also update the template value on the page when the original data data is updated. It mainly provides two functions. The input value of the view layer affects the attribute value of the data, and the change of the data attribute value will update the value change of the view layer.

 In daily coding, date data is often formatted, and Date objects are used to process dates and times. This article first introduces the Date object, and then deepens its understanding and practical application through a small case of formatting a date, including function use cases such as year, month, time, etc., friends who need it can read and refer to it.

 What is a dom tree? In short, DOM is the Document Object Model, which provides a structured representation for documents and defines how to access the document structure through scripts. DOM is composed of nodes. After the HTML is loaded, the rendering engine will generate a DOM tree in memory based on the HTML document. This article uses a small case to traverse the dom tree recursively. The core of the method is to determine whether the incoming data is an array, and then traverse the root node. Note that there must be an end condition when using recursion.

 Deep copy is to re-open a new reference address for the variable, which is completely separated from the original, which is equivalent to dividing a new space for itself. Although the content in it is the same, even if one of them is changed, the other is not. will be affected. Shallow copy means that the reference address of the reference type in the stack cannot be changed. The two variables share the same reference address and change the things in the same place. Therefore, the shallow copy causes the change of one variable to cause the same change of the other variable. .

In JS, pseudo-arrays are very common, also called array-like. So it is very important to understand and understand good pseudo-arrays. This article will explain in detail what a pseudo-array is and how to convert a pseudo-array into a real array in ES5 and ES6 respectively. What is a pseudo-array? The main characteristic of a pseudo-array: it is an object, and that object has a length property.

 The role of call, apply, and bind is to change the context of function execution, and when they are used, they will change the this pointing to when the function is running. call, apply, and bind are all methods under Function.prototype, which are used to change the runtime context of the function. The final return value is the return value of the method you called. If the method has no return value, it returns undefined.

 Functions and methods are an important knowledge point in programming. The key point of a function is how to call and execute. The way it is called has a huge impact on how the code inside the function is executed, especially in the creation of the this parameter. In addition to the most basic calling method such as function name (), what other methods are there? The following briefly introduces the three most basic (excluding, bind, apply, call).

 Arrays are frequently used in development, and processing data in arrays is one of the more common and important operations. Therefore, processing data in arrays during development is an important skill. Every developer Everyone should master the operations of arrays, especially for junior developers who have just entered the industry, so be sure to master the relevant skills. This article mainly shares some operations to filter the data in the array, about the use of the filter() method.

In Vue, a v-for loop is used to get dynamic data, thus creating a dom tree, such as the very common ul>li list. When I need to traverse an array or enumerate an object and display it in a loop, I often use the list rendering instruction v-for. It needs to be used in combination with in or of, as follows. When Vue renders elements, for the sake of efficiency, it will reuse existing elements as much as possible instead of re-rendering. If you don't want this, you can use the key attribute provided by Vue, which allows you to decide whether to reuse elements. Key The value must be unique.

 In javascript, for in is a standard in ES5, used to traverse keys. for of is a standard in ES6, used to traverse values. This article mainly explains for...in and for...of difference.

 This article mainly introduces the method of dynamically binding CSS styles in the Vue framework. By sharing simple examples, we gradually understand the value transfer and binding data in Vue. The introduction is very detailed and has certain reference value. Friends who need it can refer to it. First of all, let's talk about dynamic binding. Relatively, everyone knows static binding. For static binding, you can directly add class="". Dynamic binding must be based on a certain operation of the user to dynamically modify the style, which is more flexible. convenient.

 what is watch? It is an expression or method that monitors changes to a Vue instance. The callback function gets the new value and the old value as arguments, replaced by a function. Simply put: the role of watch can monitor the change of a value, and then call the method that needs to be executed because of the change. You can dynamically view the changes of the instance through watch, and you can also make further operations.

 A computed property is that when the value of its dependent property changes, the value of this property will be automatically updated, and the DOM part related to it will also be updated automatically. Although inline expressions can be used to achieve very simple effects, it is inconvenient to use in complex scenarios. The most suitable use scenarios are simple Boolean operations or string concatenation. If more complex business logic is involved, you should preferably use computed properties.

 The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property of an object, and returns the object. Contains three parameters: the object to be manipulated, the specified attribute of the manipulated object, and the attribute descriptor to be defined or modified. The last parameter is an object. You can specify its value, enumerable: control whether the property can be enumerated, the default value is false. writable: Controls whether the property can be modified, the default value is false. configurable: Controls whether the property can be deleted, and whether other properties except the value and writable properties can be modified. The default value is false.get: Called when the value of this property is obtained. set: Called when the value of this property is overridden.

 HTML-based templating syntax is used in Vue.js, which allows developers to declaratively bind the DOM to the underlying data of a Vue instance. So all Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles templates into virtual DOM render functions. Combined with a reactive system, Vue can intelligently calculate the minimum number of component re-renders to minimize the number of operations on the DOM.Template syntax in Vue is divided into two categories: interpolation syntax and directive syntax.

 In the JS era a few years ago, there was no concept of modularity. However, as front-end projects become larger and more complex, it is urgent to introduce the concept of modularity. Before ES6, the community developed some modular solutions, such as: CommonJS and AMD and CMD. These are slowly being replaced by import and export after ES6. Export is used to specify the interface that the module opens to the outside world. Regardless of whether you define it or not, the module exported by export is in strict mode and cannot be used in embedded scripts. The import command is used to import functionality provided by other modules.

 JavaScript does not have the concept of classes in languages such as JAVA in the strict sense before ES6. ES6 added class, but in fact this class is just syntactic sugar for constructors and prototypes before ES6. To really understand the most complex parts of JavaScript, you have to start with the initial constructors and prototypes. Prototype is one of the characteristics of JavaScript. Although the object-oriented concepts such as classes and instances are similar to languages such as Java, they are not the same in essence. In JavaScript, each object instantiated by the constructor generally only contains its own properties, but when we call a method or property that is not on the object, the instantiated object will look up its own prototype. . If the prototype has not been found, and the prototype object has its own prototype, it will go back to the top prototype along the prototype chain.

 A Set is a data structure called a collection, and a Map is a data structure called a dictionary.Both sets and dictionaries can store unique values, which are convenient for deduplication. Sets store elements in the form of [value, value], and dictionaries store elements in the form of [key, value].A Set can hold any value of any data type. Let's first briefly understand the properties and methods of the collection, and then study the specific use of this collection.

Both async and await are syntaxes provided in es7. Compared with the promise of es6, this method has higher code readability. Literally understand that async means asynchronous, await means waiting, then their role is very obvious: async: declare that a function is asynchronous; await: wait for an asynchronous function to complete execution.

 A Promise is simply a container that holds the result of an event (usually an asynchronous operation) that will end in the future. Syntactically, a Promise is an object from which messages of asynchronous operations can be obtained.It has three states: Pending, Resolved, Rejected

 What is AJAX? AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications for data interaction between browsers and servers. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, which allows web pages to request small amounts of information from the server instead of the entire page. AJAX describes a web application architecture that mainly uses scripts to manipulate HTTP. The main feature of AJAX applications is to use scripts to manipulate HTTP and web servers for data exchange without causing page reloads. Simply put, without reloading the entire web page, AJAX loads data in the background and displays it on the web page, which can partially refresh the page. The user has a better experience using the web page, but cannot go back.

 Introduction to Node.js：Node is a development platform that lets you run JavaScript on the server side, making JavaScript a scripting language on par with server-side languages like PHP, Python, Perl, Ruby, etc. Released in May 2009 and developed by Ryan Dahl, it is essentially a wrapper around the Chrome V8 engine. Node is optimized for some special use cases and provides alternative APIs that improve V8's performance in non-browser environments. The V8 engine executes Javascript very fast and works well. Node is a framework built on the Chrome JavaScript runtime for easily building responsive and easily extensible web applications. Node uses a non-blocking, event-driven I/O model to be lightweight and efficient, making it ideal for running data-intensive real-time applications on distributed devices.