This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Summary of the questions (1)

What’s the difference between v-show and V-IF when is it best to use

Differences: V-if controls the presence or absence of DOM nodes to control the visibility of elements; V-show is done by setting the display style of DOM elements. Block is displayed and none is hidden.

When to Use it: V-show is better if you need to switch very frequently; V-if is preferable if the conditions rarely change at run time.

How to implement the file upload function and monitor the upload progress in real time

Mainly using HTML5 file API implementation

File. The lastModified read-only

Returns the number of milliseconds since the start of UNIX time (00:00:00 UTC January 1, 1970) when the File referenced by the current File object was last modified.

File. LastModifiedDate read-only

Returns the Date object of the last modified time of the File referenced by the current File object.

The File name is read-only

Returns the name of the File referenced by the current File object.

The File size read-only

Returns the size of the file.

File. WebkitRelativePath read-only

Returns the path or URL associated with File.

The File type read-only

Returns the multipurpose Internet Mail extension Type (MIME Type) of the file

The advantage of webpack

Webpack scripts are written in commonJS form, but AMD/CMD support is also comprehensive to facilitate code migration for older projects. Support for a number of module loaders to enable flexible customization, such as the Babel-Loader loader, which allows us to write code using ES6 syntax; Less-loader is a loader that can compile less into CSS files. Easy to develop, can replace some grunt/gulp work, such as packaging, compression obfuscations, image to base64, etc.

The configuration can be packaged into multiple files, effectively taking advantage of the browser’s caching capabilities to improve performance.

The webpack.config.js entry refers to the configuration items of the entry file. It is an array because WebPack allows multiple entry points. Output is the configuration item of the output file path – the path of the output file filename – the name of the output file plugins As the name suggests, you can add more functionality to WebPack using plug-ins, To make WebPack more flexible and powerful, WebPack has two types of plug-ins: Webpack’s built-in plug-in module configures options for handling files loaders An array of wepback loaders that can handle different files test matches the regular expression loaders for the corresponding file The method that tells WebPack which loader to use to handle the installation of the file loaders matched by test

npm install xxx-loader --save-dev
Copy the code

Resolve: Other solution configuration; Resolve the root, the absolute path and the search module from here to find (optional) resolve. ModulesDirectories, relative path, so compared with root, so will parse a lot more paths. Find module(optional) resolvie. extensions to automatically extend the file name extension, which means that we can omit the resolvie. alias definition of the module alias, so that we can refer to the alias directly later, without having to write a long address \

$nextTick vue

You can handle asynchrony, performing a delayed callback after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM. When you change the data, you need to perform operations on the DOM immediately. In this case, the DOM is still obtained before the data is refreshed, which is not enough to meet the needs. NextTick (function () {// DOM has been updated})

Vue.nexttick ().then(function () {// DOM updated})

What is the same origin policy

Same-origin means the same domain name, same protocol, same port.

When the Baidu and Google pages are opened in two TAB pages of a browser, when the Baidu TAB page of the browser executes a script, it will check which page the script belongs to, that is, check whether the script is the same as baidu. Only the script that is the same as Baidu will be executed.

If not, the browser will report an exception in the console when the data is requested, indicating that access is denied.

Come on, Ollie!