Vue -cli version you use vue2, scaffolding 3
vue life cycle
- There are a total of 8 stages before/after creation, before/after loading, before/after update, and before/after destruction.
- Before/after creation: In the beforeCreate phase, the mounted element el and data object data of the vue instance are both undefined and have not been initialized. In the created phase, the data object data of the vue instance is available, but el is not yet available.
- Before/after loading: In the beforeMount stage, the $el and data of the vue instance are initialized, but they are still virtual dom nodes before mounting, and data.message has not been replaced. In the mounted stage, the vue instance is mounted and data.message is successfully rendered.
- Before/after update: When the data changes, the beforeUpdate and updated methods will be triggered.
- Before/after destruction: After the destroy method is executed, the change to the data will no longer trigger the periodic function, indicating that the vue instance has released the event monitoring and binding with the dom at this time, but the dom structure still exists
Vue two-way binding
- Vue.js uses data hijacking combined with the publisher-subscriber model to hijack the setter and getter of each property through Object.defineProperty(), publish messages to subscribers when the data changes, and trigger the corresponding listener callback
The difference between import and require
What is the label of the route
- router-link 与 router-view
Jump and pass parameters between routes
<router-link :to="{name:'home', params: {id:1}}"></router-link>
How does vue handle cross-domain
- cors (cross-domain resource sharing https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html)
- nginx reverse proxy proxy
How does vue handle low version browsers
- Vue does not support IE8 and below, because Vue uses ECMAScript 5 features that IE8 cannot emulate. But it supports all ECMAScript 5 compatible browsers. Browser support is required when using Vuex and axios: Promise, and IE does not support Promise.
method one,babel-polyfill simulates ES2015+
Use babel-polyfill to convert ES6 syntax to ES5 and simulate the entire ES2015+ environment. You can use Promise and WeakMap, methods Array.from, Object.assign, Array.prototype.includes.
npm install --save babel-polyfill
require(“babel-polyfill”);
import “babel-polyfill”;
Method Two,es6-promise 支持 Promise
npm install es6-promise
require('es6-promise').polyfill();
Tip: Although these polyfills meet some requirements, they virtually increase the size of the project.
Method threeLow version browser prompt
Compatibility with lower-version browsers is a very painful thing. At the same time, Internet Explorer has basically become a thing of the past. If you do too much work to be compatible with these browsers, it is really a waste.
It is also a good way to prompt users to upgrade their browsers. Recommended website: Happy browsing.
Happy browsing: Provide downloads from commonly used browsers, including Google, Firefox, and 360 browsers. Add the following Js code to the public\index.html file in the VUE project:
Prompt to upgrade the browser
(function(w){
if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){
var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){
var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){
setTimeout(f,10)}else{
s.insertBefore(d,s.firstChild)}};f()}}(window));
The difference between post and get
1. URL visibility:
get, the parameter url is visible
post, the url parameter is not visible
**get puts the requested data on the url, that is, on the HTTP protocol header. Its format is: split the URL and transmission data with ?, and connect the parameters with &; post puts the data in the HTTP packet body (requrest body)
2. The size of the transmitted data:
get general transmission data size does not exceed 2k-4k
post request transmission data size is set according to the php.ini configuration file, it can also be unlimited
**The maximum data submitted by get is 2k (in principle, the length of the url is unlimited, so there is no limitation on the data submitted by get? The limitation actually depends on the browser, and the browser usually limits the url length to 2K bytes, even ( Most) servers can handle up to 64K urls, and there is no use for eggs);
theoretically, there is no limit to post. In fact, the maximum amount is 80KB in IIS4, and 100KB in IIS5
3. Data transmission:
get, pass parameters
post through splicing url, and pass parameters through body
**GET generates a TCP data packet, the browser will send out http header and data together, the server responds with 200 (return data);
POST generates two TCP data packets, the browser sends the header first, and the server responds with 100 continue, browse The server sends data again, and the server responds with 200 ok (return data)
4. The response of the back page: When the
get request page is back, it will not affect the
post request page. When the post request page is back, the request will be resubmitted
**GET has no effect when the browser rolls back, POST will submit the request again
5. Cacheability:
get requests can be cached and
post requests cannot be cached
**GET request will be actively cached by the browser, while POST will not, unless manually set
6. Security: It is
not safe. In principle, post is definitely safer than get. After all, the URL is not visible when transmitting parameters, but it can't stop some people from grabbing packets and playing there. The browser will also cache the get request. data. Personally, security doesn’t make much difference. It’s the reason to guard against the gentleman but not against the villain. Encrypt the passed parameters, in fact, they are all the same
7. GET request can only be url-encoded, while POST supports multiple encoding methods
8. GET request parameters will be completely retained in the browser history, while POST parameters will not be retained
9. GET only accepts the data type of the parameters of ASCII characters, while POST does not limit the
implementation of div drag and drop
- onMousemove, onMouseup, onMousedown ( specific code .)
How does vue handle cross-domain
- Nginx reverse proxy interface cross-domain
- Configure a proxy server through nginx (the domain name is the same as domain1, and the port is different) as a springboard, reverse proxy access to the domain2 interface, and you can modify the domain information in the cookie by the way to facilitate the current domain cookie writing and realize cross-domain login.
How to communicate between vue components The
parent component and the child component pass values The
parent component passes the value defined on the label The
child component receives data through the props method The
child component passes data to the parent component The
child component passes parameters through the $emit method
File upload function
- 1. Create a tag for the uploaded file
- 2. Change event
- 3. Upload formData = "Specific steps
Code specification
1, need to declare (DOCTYPE) 2, need to define a language code
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />3, JavaScript definition must use<script language="javascript" type="text/javascript">to define the beginning of
4, CSS definitions must be used<style type=“text/css”>at the beginning to define 5, element and attribute names of all tags must be lowercase
6, all of the properties The value must be enclosed in quotation marks (" "/ '') double quotation marks or single quotation marks 7. All special symbols are expressed in codes. Spaces are
, less than (<)<, greater than (>)>, ampersand (&)&, etc. 8. All attributes must have attribute values 9. All tags must have corresponding end tags
10. All tags are Must be reasonably nested
11. Add meaningful alt attributes to the picture. When the image fails to load, the alt attribute can be used to indicate the content of the image. In the same way, add the title attribute of the text link to help the incomplete content to be displayed completely.
12. Add a label to the form to increase user-friendliness
axios request
- Axios promise is based on the HTTP library, promise to support all API, where requests and responses intercepted and converted request data and response data, the response content back automatically into a data type JSON example
created mounted区别
- Created: Called before dom rendering, usually put the initialization data in it to call such as ajax data and so on.
- Mounted: Called after dom rendering. For example, if we want to get document.getElementById, $("#id"), ref, etc., dom operations need to be placed here. For example, the swiper needs to get dom for the initial rotation graph effect and put it here to use
methods. (Method):
As long as the call is made, it will be executed, regardless of whether the dependent value has changed. No cache.
computed watch difference
-
computed (computed attribute):
monitor all dependent changes, if there is a change, it will be executed, and if there is no change, it will not be executed. There is a cache, no need to recalculate every time. Asynchronous is not supported.
Detailed = "In the vue template ({ {}}), you can write some simple js expressions, which is very convenient. However, if a large number of or complex expressions are used to process data in the page, it will have a great impact on the maintenance of the page. At this time, computed properties need to be used to handle complex logical operations.
1. Advantages:
When the data has not changed, the cache is read first. The computed attribute will only change the attribute to be calculated when the relevant data changes. When the relevant data has not changed, it will read the cache. You don't have to think about whether the motheds method and watch method execute the function every time.
2. Setter and getter methods: (note that set and get are used when writing in vue) The
setter method is triggered when the value is set.
The getter method is triggered when the value is obtained. -
watch (listening attribute):
Observe a certain variable and execute it if it changes. Support asynchronous. The Vue instance will call $watch() when it is instantiated to traverse every attribute of the watch object.
For an object, the key is the expression to be observed, and the value is the corresponding callback function. The value can also be a method name, or an object containing options.
Summary:
1. The actively called method is written in methods, and some operations are performed using computed or watch based on the update of certain variables.
2.computed and watch: If you want to be asynchronous, you can only use watch. If it is to calculate a certain value, it is recommended to use computed, such as the shopping cart full-select single-select function, and the shopping cart calculates the total price subtotal function.
Asynchronous conversion synchronous
mounted: function() {
(async function(){
console.log(1)
var a = await that.testFunc1()
console.log(a)
console.log(3)
})();
},
methods: {
testFunc1: function() {
return new Promise((resolve, reject)=>{
this.testFunc2("","",res=>{
resolve(res);
});
});
},
testFunc2: function(url,params,callback) {
setTimeout(()=>{
callback(2);
},1000);
}
}
// 打印结果：1,2,3
Parent-child component communication
vuex
vuex是vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车- Which of the five attributes does vuex have, which are State, Getter, Mutation, Action, and Module
. State features of vuex
A. Vuex is a warehouse, and there are many objects in the warehouse. The state is the storage location of the data source, corresponding to the data
B in the general Vue object. The data stored in the state is responsive. The Vue component reads the data from the store. If the data in the store changes, components that rely on this data Update
C will also occur . It maps the global state and getters to the calculated calculated properties of the current component through
mapState. The Getter feature A of vuex. Getters can perform calculations on the State. It is the calculated property B of the Store.
Although it is in the component You can also do calculation properties, but getters can be reused between multiple components. C. If a state is only used in one component, you can use getters
. The Mutation feature of vuex. Action is similar to mutation, but the difference is: Action submitted is
mutation. Rather than directly changing the state; Action can contain any asynchronous operation. (3) What problems will be caused by not using Vuex?
Maintainability will decrease. If you want to modify data, you need to maintain three places; readability will decrease, because the data in a component cannot be seen from where it comes from;
increasing coupling, a large number of uploads and distributions, will make coupling The performance is greatly increased. Originally, Vue used Component to reduce coupling, but now it is used in this way, which is contrary to the original intention of componentization.
.
git resolve code conflicts
- Scenario 1: On the current branch, directly modify the conflicting code—>add—>commit.
- Scenario 2: On the local current branch, modify the conflicting code—>add—>commit—>push