code sky

 Global routing front guard (beforeEach) This function is used the most. Its function is to perform permission-related verification before routing jumps. This function contains three parameters: to: the object of the target route that is about to enter; from: the route that the current route is leaving; next: confirm the release. It can be used to log in and register, to determine whether there is a token before logging in, and release if it exists. , if it does not exist, it will not be released. The post routing guard (afterEach), its role is to trigger after the routing jump.

 The creation and mounting of components that use the cache <keep-alive> at the beginning will be executed the same as the components that do not use the cache, but the components that use the cache will not be destroyed when switching components, and the activated function will be triggered when switching back again. , the deactivated function will be triggered when switching, and components that do not use the cache cannot use the activated function. Simply put, the activated function is a hook function after the page is activated, which is triggered as soon as the page is entered. So when we use component caching, if we want to send a request every time we switch, we need to write the request function in activated, and in created or mounted, it will only work when the component is loaded for the first time.

 When we switch from one component to another, the routing component that has not been displayed remains mounted and not destroyed. When we switch back, the previous data is still maintained, for example, entering data in a text box, Then switch to another page, and then switch to the previous text box interface, the data of the text box is still saved. The web page experience will be better.

 The role of props configuration in routing is to make it easier for routing components to receive parameters.It is very convenient to use. The following describes three ways to use props to pass and receive parameters.

 The main feature of SPA single page is that a layer of front-end routing is added on the basis of the separation of front-end and back-end. That is, the front end maintains a set of routing rules. The user clicks the routing link on the page, which causes the Hash value in the URL address bar to change. The front-end routing monitors the change of the Hash address, and the front-end routing renders the component corresponding to the current Hash address to the browser. Vue-router is the routing solution officially given by Vue. It can only be used in conjunction with the vue project, and can easily manage the switching of components in the SPA project. For VueRouter, routing is the decision-making process of selecting a component for rendering based on a request path.

 The above four objects are all in the vuex plug-in store, which is often used to store some data shared globally. But I still feel a little uncomfortable when using it, that is, I wrote a lot of repeated prefixes. At this time, these four objects appeared, which solved this pain point very well. mapState is mainly used to manipulate and obtain data, mapGetters is equivalent to computed properties, and mapMutations and mapActions are simplifications of mutation and action. They can be written as both objects and arrays.

 Due to browser same-origin policy restrictions. The Same Origin Policy is a convention. This is the main and essential security feature of the browser. Without the same-origin policy, normal browser functionality may be affected. The web is built on the same-origin policy, and browsers are just one implementation of the same-origin policy. The Same Origin Policy prevents JavaScript scripts from one domain from interacting with content from another domain. The so-called same origin (that is, the same domain) means that two pages have the same protocol, host and port.

 Vue provides us with a property to manipulate dom, ref. When bound to the dom element, it is used similar to the id. It is called through this.$refs, and it can also be bound to the component. It is very troublesome to obtain DOM elements in the previous native way. It needs to be obtained with such a long AP as: documentgetElementXXX/querySXXX.... Then jQuery was born to solve this pain point. The use of $("id") makes Our operation has become easier. But there are other problems, jQuery is just a library (plug-in) and cannot be used to build a framework. Now Vue can help us solve this problem. Vue also has its own method to obtain DOM, which is ref. It can get not only DOM elements but also components. If you add ref to the dom element, you can get the dom element, and if you add it to the component, you can get the component instance, and you can use the component method.

 The global event bus is not a native API provided by Vue. It is a clever design method summarized by developers in practice. Its principle is to add a property to the prototype of Vue. Once this property is added, Vue Instances and vue components can use this property with the help of prototypes, so as to realize the intercommunication and transfer of data between data. If we need to implement complex communication between components, it is not so convenient to use the props properties of parent and child components. We have written a lot of redundant code layer by layer. At this time, we can use the message bus writing method, which is more simple and convenient. 

 The parent component uses props to pass data (such as a method) to the child component, and the child component needs to use custom events to pass data back to the parent component! We can use v-on to bind custom events, and then pass them to subcomponents, which will call after receiving the method. Each Vue instance implements the Events interface, that is: use $on(eventName) to listen for events and $emit(eventName) to trigger events.

 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 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.

 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.

 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.