Js and ES6 skills
1: Sometimes the interface returns a value that is not what we want, or we need a separate name, or we want a deeper field
(1) You don't need agelet data = {
name:'Chinaman'.sex: 'male'.age: 14 ,
address: {detail:"Guangdong"}}let{ age, ... obj } = data;/ /... Obj is the rest of the field, and you can assign it to the variable defined in date,
// For example this.form = {... obj}
(2(this is usually the case where you define a variable differently from the back end, and you don't want to change it)let { age: initAge ,... obj } = date;// initAge = 14
(3) let { address:detail, sex } = date;
// detail = 'guangdong'
Copy the code
2: custom methods return arrays that you can get from variables
function getDay(){
return [ 2021.12.3];
}
let [ year, month, day ] = getDay();
// year = 2021; month = 12; day = 3
Copy the code
3: Convert the value to Boolean, just add!! Can be
let value = "ss";
/ /!!!!! value --> ture;
Copy the code
4: ToString flattens arrays, usually used to estimate is flag, high order function to deal with it! Today learn some flowers (suitable for interview outfit *, practical or lack of a little, inside the value is a string type, to turn over the line)
5: Slice (0) implements deep copy. This method can also be implemented if you use json.stringify or recursively.
6: Slice implements scoring stars
Painted "u u u u being fostered fostered fostered fostered".slice(5 - rate, 10 - rate);
Copy the code
7: The key of the object is a variable
let obj = {};
let value = "Today";
let obj[value] = "2021";
// obj --> {" today ":"2021"}
Copy the code
If –> switch– > obj; if –> obj;
/ / the original statement
if(a==1) {}
else if(a==w) {}
1 / / optimization
switch(a) {
case 1:"do some think"
break;
}
2 / / optimization
let obj = {
1: "do some think".2: "do some think"
}
obj[a];
Copy the code
9: Optional chain operation? With?? ,? The. Function is to find the object deep key, undefined, so as not to let the program error. ?? I think with the | | about, most useful I think is an issue for 0, | | processing 0 is false,?????? Will release.
/ /? .
let obj = {
name:"xx".detail: {
province: {city: "Guangdong"}}}if(obj.detail&&obj.detail.province&&obj.detail.province.city){}
if(obj? .detail?.province?.city)// ??
const value = null ?? 'Default value';
// value: "default string"
const value = 0 ?? 42;
// value: 0
Copy the code
CSS tips
1: Clip-path for button drawing, you must have tried UI dream, quadrangle cut, trapezoid, etc. We might use fake elements to create missing corners, but this property can solve the problem at once.
// Here is a rectangle, other can be searched
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Copy the code
Polygon () is the number defined in polygon(), which can be interpreted as points, then connected to form an irregular rectangle
For example, you can achieve an effect, specific you can be unconstrained.
Vue skills
(1) Attributes are passed through methods. For computed data, methods are much less than methods. (2) Attributes are passed through methods, and for computed data, methods are much less than methods.
<div> {{ calcDate('It's sunny today') }} </div>
computed(){
calcDate(){
return function(value){
return value + 'do some think'}}}Copy the code
(2) if you don’t want to write this in the parent props, you can use $attrs to check the syntax of the props file.
// obj = {name:"x", age: "xx"}
<father :obj="obj"></father>
// The parent does not need to define name,age in props< son v - bind = "$attrs" > < son > / / sun < div > {{$attrs}} < / div > $attrs - > {name: "x", the age: "xx"}Copy the code
(3) The props properties of the parent and the child are the same? That can be directly deconstructed to use (guys, please print son, because I also used it in March, but basically the same meaning, don’t blame me for being lazy)
// father
import son from './son'
props: {... son.props }Copy the code
I suggest you print it out
attrs, $slot …. A few attributes, you will find the mainland, now one o ‘clock, ready to lunch break, there are some did not have time to write, write in the afternoon, first released, we do not dislike me lazy