1.TypeScript union type
Resolution: the union type can set variables to multiple types through the pipeline (|), and the value can be assigned according to the set type.
2.TypeScript basic type
Resolution:
[1]Any type any: Declare as any A variable can be assigned any type of value
[2]Number type number: Double precision 64 bit floating point value. It can be used to represent integers and fractions
[3]String type string: A character series, using single quotes(')Or double quotation marks(")To represent the string type. Backquote(`)To define multiline text and embedded expressions
[4]Boolean type boolean: Represents a logical value true and false
[5]Array type: declare variables as arrays
[6]Tuple: tuple type is used to represent an array of known element numbers and types. The types of each element need not be the same, and the types of corresponding positions need to be the same
[7]enumeration enum: Enumeration types are used to define numeric collections
[8]void: Used to identify the type of return value of a method, indicating that the method has no return value
[9]null: Indicates that the object value is missing
[10]undefined: Used to initialize the variable to an undefined value
[11]never: never Other types[include null and undefined]A subtype of that represents a value that never appears
3. < HR > label
Parsing: when the subject of the content changes, use the < HR > tag to separate it.
4.trigger:'blur' and trigger:'change'
Analysis: blur loses focus and change data changes.
5. Difference between put and POST
Resolution:
[1]PUT request [PUT is used to change resources]: if the two requests are the same, the latter request will overwrite the first request
[2]Post request [post is used to add resources]: the latter request will not overwrite the first request
6. Optional and arbitrary attributes in TS
Resolution:
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
id: 89757,
name: 'Tom',
gender: 'male'
};
7.v-model
Parsing: v-model creates a two-way binding on form controls or components, which is essentially responsible for listening to user input events to update data.
8.gulp-autoprefixer
Analysis: gulp autoprefixer is to automatically process the prefix of the browser according to different versions of the browser to realize the compatibility of css browser, especially the development of mobile pages. https://www.npmjs.com/package/gulp-autoprefixer
npm install --save-dev gulp-autoprefixer
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
exports.default = () => (
gulp.src('src/app.css')
.pipe(autoprefixer({
cascade: false
}))
.pipe(gulp.dest('dist'))
);
9.@elsa-workflows/elsa-workflow-designer
Resolution: https://www.npmjs.com/package/@elsa-workflows/elsa-workflow-designer
[1] This is an introductory project to build stand-alone Web components using Stencil
[2]Stencil is a compiler for building fast Web applications using Web components
10.Stencil
Resolution: https://github.com/ionic-team/stencil
[1] A lightweight, progressive compiler, not a framework
[2] A Web component compiler for building fast and reusable UI components and static sites to generate progressive Web applications
11. type keyword in TS
Parsing: its function is to give a new name to the type, which can act on the original value [basic type], union type, tuple and any other type that needs handwriting.
type Second = number; // Basic type let timeInSecond: number = 10; let time: Second = 10; // The type of time is actually the type of number
12.@Component modifier
Resolution: @ Component modifier indicates that this class is a Vue Component.
@Component({
// All component options are allowed in here
template: '<button @click="onClick">Click!</button>'
})
13.@Prop
Parsing: required, default and type can be set:
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
@Prop() readonly msg!: string
@Prop({default: 'John doe'}) readonly name: string
@Prop({required: true}) readonly age: number
@Prop(String) readonly address: string
@Prop({required: false, type: String, default: 'Developer'}) readonly job: string
}
</script>
14. Calculation properties in TS and Vue
Resolution:
export default class HelloWorld extends Vue {
get fullName(): string {
return this.first+ ' '+ this.last
}
set fullName(newValue: string) {
let names = newValue.split(' ')
this.first = names[0]
this.last = names[names.length - 1]
}
}
15. Alias of Axios request method
Resolution:
[1]axios.request(config)
[2]axios.get(url[, config])
[3]axios.delete(url[, config])
[4]axios.head(url[, config])
[5]axios.post(url[, data[, config]])
[6]axios.put(url[, data[, config]])
[7]axios.patch(url[, data[, config]])
16.axios assistant function for processing concurrent requests
Resolution:
[1]axios.all(iterable)
[2]axios.spread(callback)
17. Customize axios instance
Resolution:
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
18.public interface IRepository<TEntity>
Resolution:
Task<TEntity> FindAsync(Expression<Func<TEntity, bool>> predicate, bool includeDetails = true, CancellationToken cancellationToken = default (CancellationToken)); Task<TEntity> GetAsync(Expression<Func<TEntity, bool>> predicate, bool includeDetails = true, CancellationToken cancellationToken = default (CancellationToken)); Task DeleteAsync(Expression<Func<TEntity, bool>> predicate, bool autoSave = false, CancellationToken cancellationToken = default (CancellationToken));
19.public interface IReadOnlyRepository<TEntity>
Resolution:
IAsyncQueryableExecuter AsyncExecuter { get; }
IQueryable<TEntity> WithDetails();
IQueryable<TEntity> WithDetails(params Expression<Func<TEntity, object>>[] propertySelectors);
20.public interface IReadOnlyBasicRepository<TEntity>
Resolution:
Task<List<TEntity>> GetListAsync(bool includeDetails = false, CancellationToken cancellationToken = default (CancellationToken)); Task<long> GetCountAsync(CancellationToken cancellationToken = default (CancellationToken)); Task<List<TEntity>> GetPagedListAsync(int skipCount, int maxResultCount, string sorting, bool includeDetails = false, CancellationToken cancellationToken = default (CancellationToken));
21.public interface IBasicRepository<TEntity>
Resolution:
Task<TEntity> InsertAsync(TEntity entity, bool autoSave = false, CancellationToken cancellationToken = default (CancellationToken)); Task<TEntity> UpdateAsync(TEntity entity, bool autoSave = false, CancellationToken cancellationToken = default (CancellationToken)); Task DeleteAsync(TEntity entity, bool autoSave = false, CancellationToken cancellationToken = default (CancellationToken));
22.v-bind binding class
Resolution:
[1] Object syntax
[2] Array syntax
23.v-bind binding class - object syntax
Resolution:
[1] Bind a class directly through {}
Resolution:
<h2 :class="{'active': isActive}">Hello World</h2>
[2] Pass in multiple values through judgment
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
[3] And ordinary classes exist at the same time
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
[4] If it is too complex, it can be placed in a methods or computed
<h2 class="title" :class="classes">Hello World</h2>
24.v-bind binding class - array syntax
Resolution:
[1] Bind a class directly through {}
Resolution:
<h2 :class="['active']">Hello World</h2>
[2] Pass in multiple values through judgment
<h2 :class="['active', 'line']">Hello World</h2>
[3] And ordinary classes exist at the same time
<h2 class="title" :class="['active', 'line']">Hello World</h2>
[4] If it is too complex, it can be placed in a methods or computed
<h2 class="title" :class="classes">Hello World</h2>
25. < I > label
Analysis: < I > tags are used to represent scientific and technological terms, idioms and proverbs in other languages, ideas, the name of spacecraft, etc.
reference:
[1]axios: http://www.axios-js.com/
[2]HTML Reference Manual: https://www.runoob.com/tags/html-reference.html