Cheat Sheet for Javascript&Node.js&Vue.js

Table Of Contents

JS

 1/* *******************************************************************************************
 2 * GLOBAL OBJECTS > OBJECT
 3 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
 4 * ******************************************************************************************* */
 5
 6// Global object: properties
 7Object.length                                        // length is a property of a function object, and indicates how many arguments the function expects, i.e. the number of formal parameters. This number does not include the rest parameter. Has a value of 1.
 8Object.prototype                                     // Represents the Object prototype object and allows to add new properties and methods to all objects of type Object.
 9
10// Methods of the Object constructor
11Object.assign(target, ...sources)                    // Copies the values of all enumerable own properties from one or more source objects to a target object. method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object
12Object.create(MyObject)                              // Creates a new object with the specified prototype object and properties. The object which should be the prototype of the newly-created object.
13Object.defineProperty(obj, prop, descriptor)         // Adds the named property described by a given descriptor to an object.
14Object.defineProperties(obj, props)                  // Adds the named properties described by the given descriptors to an object.
15Object.entries(obj)                                  // Returns an array containing all of the [key, value] pairs of a given object's own enumerable string properties.
16Object.freeze(obj)                                   // Freezes an object: other code can't delete or change any properties.
17Object.getOwnPropertyDescriptor(obj, prop)           // Returns a property descriptor for a named property on an object.
18Object.getOwnPropertyDescriptors(obj)                // Returns an object containing all own property descriptors for an object.
19Object.getOwnPropertyNames(obj)                      // Returns an array containing the names of all of the given object's own enumerable and non-enumerable properties.
20Object.getOwnPropertySymbols(obj)                    // Returns an array of all symbol properties found directly upon a given object.
21Object.getPrototypeOf(obj)                           // Returns the prototype of the specified object.
22Object.is(value1, value2);                           // Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).
23Object.isExtensible(obj)                             // Determines if extending of an object is allowed.
24Object.isFrozen(obj)                                 // Determines if an object was frozen.
25Object.isSealed(obj)                                 // Determines if an object is sealed.
26Object.keys(obj)                                     // Returns an array containing the names of all of the given object's own enumerable string properties.
27Object.preventExtensions(obj)                        // Prevents any extensions of an object.
28Object.seal(obj)                                     // Prevents other code from deleting properties of an object.
29Object.setPrototypeOf(obj, prototype)                // Sets the prototype (i.e., the internal [[Prototype]] property).
30Object.values(obj)                                   // Returns an array containing the values that correspond to all of a given object's own enumerable string properties.
31
32// Object instances and Object prototype object (Object.prototype.property or Object.prototype.method())
33// Properties
34obj.constructor                                      // Specifies the function that creates an object's prototype.
35obj.__proto__                                        // Points to the object which was used as prototype when the object was instantiated.
36
37// Methods
38obj.hasOwnProperty(prop)                             // Returns a boolean indicating whether an object contains the specified property as a direct property of that object and not inherited through the prototype chain.
39prototypeObj.isPrototypeOf(object)                   // Returns a boolean indicating whether the object this method is called upon is in the prototype chain of the specified object.
40obj.propertyIsEnumerable(prop)                       // Returns a boolean indicating if the internal ECMAScript [[Enumerable]] attribute is set.
41obj.toLocaleString()                                 // Calls toString().
42obj.toString()                                       // Returns a string representation of the object.
43object.valueOf()                                     // Returns the primitive value of the specified object.
44
45/* *******************************************************************************************
46 * GLOBAL OBJECTS > ARRAY
47 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
48 * ******************************************************************************************* */
49
50// Global object: properties
51Array.length                                         // Reflects the number of elements in an array.
52Array.prototype                                      // Represents the prototype for the Array constructor and allows to add new properties and methods to all Array objects.
53
54// Global object: methods
55Array.from(arrayLike[, mapFn[, thisArg]])            // Creates a new Array instance from an array-like or iterable object.
56Array.isArray(obj)                                   // Returns true if a variable is an array, if not false.
57Array.of(element0[, element1[, ...[, elementN]]])    // Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.
58
59// Instance: properties
60arr.length                                           // Reflects the number of elements in an array.
61
62// Instance: mutator methods
63arr.copyWithin(target, start, end)                   // Copies a sequence of array elements within the array.
64arr.fill(value, start, end)                          // Fills all the elements of an array from a start index to an end index with a static value.
65arr.pop()                                            // Removes the last element from an array and returns that element.
66arr.push([element1[, ...[, elementN]]])              // Adds one or more elements to the end of an array and returns the new length of the array.
67arr.reverse()                                        // Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.
68arr.shift()                                          // Removes the first element from an array and returns that element.
69arr.sort()                                           // Sorts the elements of an array in place and returns the array.
70array.splice(start, deleteCount, item1, item2, ...)  // Adds and/or removes elements from an array.
71arr.unshift([element1[, ...[, elementN]]])           // Adds one or more elements to the front of an array and returns the new length of the array.
72
73// Instance: accessor methods
74arr.concat(value1[, value2[, ...[, valueN]]])        // Returns a new array comprised of this array joined with other array(s) and/or value(s).
75arr.includes(searchElement, fromIndex)               // Determines whether an array contains a certain element, returning true or false as appropriate.
76arr.indexOf(searchElement[, fromIndex])              // Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
77arr.join(separator)                                  // Joins all elements of an array into a string.
78arr.lastIndexOf(searchElement, fromIndex)            // Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
79arr.slice(begin, end)                                // Extracts a section of an array and returns a new array.
80arr.toString()                                       // Returns a string representing the array and its elements. Overrides the Object.prototype.toString() method.
81arr.toLocaleString(locales, options)                 // Returns a localized string representing the array and its elements. Overrides the Object.prototype.toLocaleString() method.
82
83// Instance: iteration methods
84arr.entries()                                        // Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
85arr.every(callback[, thisArg])                       // Returns true if every element in this array satisfies the provided testing function.
86arr.filter(callback[, thisArg])                      // Creates a new array with all of the elements of this array for which the provided filtering function returns true.
87arr.find(callback[, thisArg])                        // Returns the found value in the array, if an element in the array satisfies the provided testing function or undefined if not found.
88arr.findIndex(callback[, thisArg])                   // Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.
89arr.forEach(callback[, thisArg])                     // Calls a function for each element in the array.
90arr.keys()                                           // Returns a new Array Iterator that contains the keys for each index in the array.
91arr.map(callback[, initialValue])                    // Creates a new array with the results of calling a provided function on every element in this array.
92arr.reduce(callback[, initialValue])                 // Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
93arr.reduceRight(callback[, initialValue])            // Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
94arr.some(callback[, initialValue])                   // Returns true if at least one element in this array satisfies the provided testing function.
95arr.values()                                         // Returns a new Array Iterator object that contains the values for each index in the array.
96

Node.js

  1/* *******************************************************************************************
  2 * SYNOPSIS
  3 * http://nodejs.org/api/synopsis.html
  4 * ******************************************************************************************* */
  5
  6
  7var http = require('http');
  8
  9// An example of a web server written with Node which responds with 'Hello World'.
 10// To run the server, put the code into a file called example.js and execute it with the node program.
 11http.createServer(function (request, response) {
 12  response.writeHead(200, {'Content-Type': 'text/plain'});
 13  response.end('Hello World\n');
 14}).listen(8124);
 15
 16console.log('Server running at http://127.0.0.1:8124/');
 17
 18
 19/* *******************************************************************************************
 20 * GLOBAL OBJECTS
 21 * http://nodejs.org/api/globals.html
 22 * ******************************************************************************************* */
 23
 24
 25// In browsers, the top-level scope is the global scope.
 26// That means that in browsers if you're in the global scope var something will define a global variable.
 27// In Node this is different. The top-level scope is not the global scope; var something inside a Node module will be local to that module.
 28
 29__filename;  // The filename of the code being executed. (absolute path)
 30__dirname;   // The name of the directory that the currently executing script resides in. (absolute path)
 31module;      // A reference to the current module. In particular module.exports is used for defining what a module exports and makes available through require().
 32exports;     // A reference to the module.exports that is shorter to type.
 33process;     // The process object is a global object and can be accessed from anywhere. It is an instance of EventEmitter.
 34Buffer;      // The Buffer class is a global type for dealing with binary data directly.
 35
 36
 37/* *******************************************************************************************
 38 * CONSOLE
 39 * http://nodejs.org/api/console.html
 40 * ******************************************************************************************* */
 41
 42
 43console.log([data], [...]);             // Prints to stdout with newline.
 44console.info([data], [...]);            // Same as console.log.
 45console.error([data], [...]);           // Same as console.log but prints to stderr.
 46console.warn([data], [...]);            // Same as console.error.
 47console.dir(obj);                       // Uses util.inspect on obj and prints resulting string to stdout.
 48console.time(label);                    // Mark a time.
 49console.timeEnd(label);                 // Finish timer, record output.
 50console.trace(label);                   // Print a stack trace to stderr of the current position.
 51console.assert(expression, [message]);  // Same as assert.ok() where if the expression evaluates as false throw an AssertionError with message.
 52
 53
 54/* *******************************************************************************************
 55 * TIMERS
 56 * http://nodejs.org/api/timers.html
 57 * ******************************************************************************************* */
 58
 59
 60setTimeout(callback, delay, [arg], [...]);   // To schedule execution of a one-time callback after delay milliseconds. Optionally you can also pass arguments to the callback.
 61clearTimeout(t);                             // Stop a timer that was previously created with setTimeout().
 62setInterval(callback, delay, [arg], [...]);  // To schedule the repeated execution of callback every delay milliseconds. Optionally you can also pass arguments to the callback.
 63clearInterval(t);                            // Stop a timer that was previously created with setInterval().
 64setImmediate(callback, [arg], [...]);        // To schedule the "immediate" execution of callback after I/O events callbacks and before setTimeout and setInterval.
 65clearImmediate(immediateObject);             // Stop a timer that was previously created with setImmediate().
 66
 67unref();  // Allow you to create a timer that is active but if it is the only item left in the event loop, node won't keep the program running.
 68ref();    // If you had previously unref()d a timer you can call ref() to explicitly request the timer hold the program open.
 69
 70
 71/* *******************************************************************************************
 72 * MODULES
 73 * http://nodejs.org/api/modules.html
 74 * ******************************************************************************************* */
 75
 76
 77var module = require('./module.js');    // Loads the module module.js in the same directory.
 78module.require('./another_module.js');  // load another_module as if require() was called from the module itself.
 79
 80module.id;        // The identifier for the module. Typically this is the fully resolved filename.
 81module.filename;  // The fully resolved filename to the module.
 82module.loaded;    // Whether or not the module is done loading, or is in the process of loading.
 83module.parent;    // The module that required this one.
 84module.children;  // The module objects required by this one.
 85
 86exports.area = function (r) {
 87  return Math.PI * r * r;
 88};
 89
 90// If you want the root of your module's export to be a function (such as a constructor)
 91// or if you want to export a complete object in one assignment instead of building it one property at a time,
 92// assign it to module.exports instead of exports.
 93module.exports = function(width) {
 94  return {
 95    area: function() {
 96      return width * width;
 97    }
 98  };
 99}
100
101
102/* *******************************************************************************************
103 * PROCESS
104 * http://nodejs.org/api/process.html
105 * ******************************************************************************************* */
106
107
108process.on('exit', function(code) {});              // Emitted when the process is about to exit
109process.on('uncaughtException', function(err) {});  // Emitted when an exception bubbles all the way back to the event loop. (should not be used)
110
111process.stdout;           // A writable stream to stdout.
112process.stderr;           // A writable stream to stderr.
113process.stdin;            // A readable stream for stdin.
114
115process.argv;             // An array containing the command line arguments.
116process.env;              // An object containing the user environment.
117process.execPath;         // This is the absolute pathname of the executable that started the process.
118process.execArgv;         // This is the set of node-specific command line options from the executable that started the process.
119
120process.arch;             // What processor architecture you're running on: 'arm', 'ia32', or 'x64'.
121process.config;           // An Object containing the JavaScript representation of the configure options that were used to compile the current node executable.
122process.pid;              // The PID of the process.
123process.platform;         // What platform you're running on: 'darwin', 'freebsd', 'linux', 'sunos' or 'win32'.
124process.title;            // Getter/setter to set what is displayed in 'ps'.
125process.version;          // A compiled-in property that exposes NODE_VERSION.
126process.versions;         // A property exposing version strings of node and its dependencies.
127
128process.abort();          // This causes node to emit an abort. This will cause node to exit and generate a core file.
129process.chdir(dir);       // Changes the current working directory of the process or throws an exception if that fails.
130process.cwd();            // Returns the current working directory of the process.
131process.exit([code]);     // Ends the process with the specified code. If omitted, exit uses the 'success' code 0.
132process.getgid();         // Gets the group identity of the process.
133process.setgid(id);       // Sets the group identity of the process.
134process.getuid();         // Gets the user identity of the process.
135process.setuid(id);       // Sets the user identity of the process.
136process.getgroups();      // Returns an array with the supplementary group IDs.
137process.setgroups(grps);  // Sets the supplementary group IDs.
138
139process.initgroups(user, extra_grp);  // Reads /etc/group and initializes the group access list, using all groups of which the user is a member.
140process.kill(pid, [signal]);          // Send a signal to a process. pid is the process id and signal is the string describing the signal to send.
141process.memoryUsage();                // Returns an object describing the memory usage of the Node process measured in bytes.
142process.nextTick(callback);           // On the next loop around the event loop call this callback.
143process.maxTickDepth;                 // Callbacks passed to process.nextTick will usually be called at the end of the current flow of execution, and are thus approximately as fast as calling a function synchronously.
144process.umask([mask]);                // Sets or reads the process's file mode creation mask.
145process.uptime();                     // Number of seconds Node has been running.
146process.hrtime();                     // Returns the current high-resolution real time in a [seconds, nanoseconds] tuple Array.
147
148
149/* *******************************************************************************************
150 * CHILD PROCESS
151 * http://nodejs.org/api/child_process.html
152 * ******************************************************************************************* */
153
154
155// Node provides a tri-directional popen facility through the child_process module.
156// It is possible to stream data through a child's stdin, stdout, and stderr in a fully non-blocking way.
157
158ChildProcess;                                                 // Class. ChildProcess is an EventEmitter.
159
160child.stdin;                                                  // A Writable Stream that represents the child process's stdin
161child.stdout;                                                 // A Readable Stream that represents the child process's stdout
162child.stderr;                                                 // A Readable Stream that represents the child process's stderr.
163child.pid;                                                    // The PID of the child process
164child.connected;                                              // If .connected is false, it is no longer possible to send messages
165child.kill([signal]);                                         // Send a signal to the child process
166child.send(message, [sendHandle]);                            // When using child_process.fork() you can write to the child using child.send(message, [sendHandle]) and messages are received by a 'message' event on the child.
167child.disconnect();                                           // Close the IPC channel between parent and child, allowing the child to exit gracefully once there are no other connections keeping it alive.
168child_process.spawn(command, [args], [options]);              // Launches a new process with the given command, with command line arguments in args. If omitted, args defaults to an empty Array.
169child_process.exec(command, [options], callback);             // Runs a command in a shell and buffers the output.
170child_process.execFile(file, [args], [options], [callback]);  // Runs a command in a shell and buffers the output.
171child_process.fork(modulePath, [args], [options]);            // This is a special case of the spawn() functionality for spawning Node processes. In addition to having all the methods in a normal ChildProcess instance, the returned object has a communication channel built-in. 
172
173
174/* *******************************************************************************************
175 * UTIL
176 * http://nodejs.org/api/util.html
177 * ******************************************************************************************* */
178
179
180// These functions are in the module 'util'. Use require('util') to access them.
181
182util.format(format, [...]);    // Returns a formatted string using the first argument as a printf-like format. (%s, %d, %j)
183util.debug(string);            // A synchronous output function. Will block the process and output string immediately to stderr.
184util.error([...]);             // Same as util.debug() except this will output all arguments immediately to stderr.
185util.puts([...]);              // A synchronous output function. Will block the process and output all arguments to stdout with newlines after each argument.
186util.print([...]);             // A synchronous output function. Will block the process, cast each argument to a string then output to stdout. (no newlines)
187util.log(string);              // Output with timestamp on stdout.
188util.inspect(object, [opts]);  // Return a string representation of object, which is useful for debugging. (options: showHidden, depth, colors, customInspect)
189util.isArray(object);          // Returns true if the given "object" is an Array. false otherwise.
190util.isRegExp(object);         // Returns true if the given "object" is a RegExp. false otherwise.
191util.isDate(object);           // Returns true if the given "object" is a Date. false otherwise.
192util.isError(object);          // Returns true if the given "object" is an Error. false otherwise.
193util.promisify(fn)             // Takes a function whose last argument is a callback and returns a version that returns promises.
194
195util.inherits(constructor, superConstructor);  // Inherit the prototype methods from one constructor into another.
196
197
198/* *******************************************************************************************
199 * EVENTS
200 * http://nodejs.org/api/events.html
201 * ******************************************************************************************* */
202
203
204// All objects which emit events are instances of events.EventEmitter. You can access this module by doing: require("events");
205// To access the EventEmitter class, require('events').EventEmitter.
206// All EventEmitters emit the event 'newListener' when new listeners are added and 'removeListener' when a listener is removed.
207
208emitter.addListener(event, listener);        // Adds a listener to the end of the listeners array for the specified event.
209emitter.on(event, listener);                 // Same as emitter.addListener().
210emitter.once(event, listener);               // Adds a one time listener for the event. This listener is invoked only the next time the event is fired, after which it is removed.
211emitter.removeListener(event, listener);     // Remove a listener from the listener array for the specified event.
212emitter.removeAllListeners([event]);         // Removes all listeners, or those of the specified event.
213emitter.setMaxListeners(n);                  // By default EventEmitters will print a warning if more than 10 listeners are added for a particular event.
214emitter.listeners(event);                    // Returns an array of listeners for the specified event.
215emitter.emit(event, [arg1], [arg2], [...]);  // Execute each of the listeners in order with the supplied arguments. Returns true if event had listeners, false otherwise.
216
217EventEmitter.listenerCount(emitter, event);  // Return the number of listeners for a given event.
218
219
220/* *******************************************************************************************
221 * STREAM
222 * http://nodejs.org/api/stream.html
223 * ******************************************************************************************* */
224
225
226// A stream is an abstract interface implemented by various objects in Node. For example a request to an HTTP server is a stream, as is stdout.
227// Streams are readable, writable, or both. All streams are instances of EventEmitter.
228
229// The Readable stream interface is the abstraction for a source of data that you are reading from.
230// In other words, data comes out of a Readable stream.
231// A Readable stream will not start emitting data until you indicate that you are ready to receive it.
232// Examples of readable streams include: http responses on the client, http requests on the server, fs read streams
233// zlib streams, crypto streams, tcp sockets, child process stdout and stderr, process.stdin.
234
235var readable = getReadableStreamSomehow();
236
237readable.on('readable', function() {});   // When a chunk of data can be read from the stream, it will emit a 'readable' event.
238readable.on('data', function(chunk) {});  // If you attach a data event listener, then it will switch the stream into flowing mode, and data will be passed to your handler as soon as it is available.
239readable.on('end', function() {});        // This event fires when there will be no more data to read.
240readable.on('close', function() {});      // Emitted when the underlying resource (for example, the backing file descriptor) has been closed. Not all streams will emit this.
241readable.on('error', function() {});      // Emitted if there was an error receiving data.
242
243// The read() method pulls some data out of the internal buffer and returns it. If there is no data available, then it will return null.
244// This method should only be called in non-flowing mode. In flowing-mode, this method is called automatically until the internal buffer is drained.
245readable.read([size]);
246
247readable.setEncoding(encoding);           // Call this function to cause the stream to return strings of the specified encoding instead of Buffer objects.
248readable.resume();                        // This method will cause the readable stream to resume emitting data events.
249readable.pause();                         // This method will cause a stream in flowing-mode to stop emitting data events.
250readable.pipe(destination, [options]);    // This method pulls all the data out of a readable stream, and writes it to the supplied destination, automatically managing the flow so that the destination is not overwhelmed by a fast readable stream.
251readable.unpipe([destination]);           // This method will remove the hooks set up for a previous pipe() call. If the destination is not specified, then all pipes are removed.
252readable.unshift(chunk);                  // This is useful in certain cases where a stream is being consumed by a parser, which needs to "un-consume" some data that it has optimistically pulled out of the source, so that the stream can be passed on to some other party.
253
254
255// The Writable stream interface is an abstraction for a destination that you are writing data to.
256// Examples of writable streams include: http requests on the client, http responses on the server, fs write streams,
257// zlib streams, crypto streams, tcp sockets, child process stdin, process.stdout, process.stderr.
258
259var writer = getWritableStreamSomehow();
260
261writable.write(chunk, [encoding], [callback]);  // This method writes some data to the underlying system, and calls the supplied callback once the data has been fully handled.
262writer.once('drain', write);                    // If a writable.write(chunk) call returns false, then the drain event will indicate when it is appropriate to begin writing more data to the stream.
263
264writable.end([chunk], [encoding], [callback]);  // Call this method when no more data will be written to the stream.
265writer.on('finish', function() {});             // When the end() method has been called, and all data has been flushed to the underlying system, this event is emitted.
266writer.on('pipe', function(src) {});            // This is emitted whenever the pipe() method is called on a readable stream, adding this writable to its set of destinations.
267writer.on('unpipe', function(src) {});          // This is emitted whenever the unpipe() method is called on a readable stream, removing this writable from its set of destinations.
268writer.on('error', function(src) {});           // Emitted if there was an error when writing or piping data.
269
270
271// Duplex streams are streams that implement both the Readable and Writable interfaces. See above for usage.
272// Examples of Duplex streams include: tcp sockets, zlib streams, crypto streams.
273
274// Transform streams are Duplex streams where the output is in some way computed from the input. They implement both the Readable and Writable interfaces. See above for usage.
275// Examples of Transform streams include: zlib streams, crypto streams.
276
277
278/* *******************************************************************************************
279 * FILE SYSTEM
280 * http://nodejs.org/api/fs.html
281 * ******************************************************************************************* */
282
283
284// To use this module do require('fs').
285// All the methods have asynchronous and synchronous forms.
286
287fs.rename(oldPath, newPath, callback);  // Asynchronous rename. No arguments other than a possible exception are given to the completion callback.Asynchronous ftruncate. No arguments other than a possible exception are given to the completion callback.
288fs.renameSync(oldPath, newPath);        // Synchronous rename.
289
290fs.ftruncate(fd, len, callback);        // Asynchronous ftruncate. No arguments other than a possible exception are given to the completion callback.
291fs.ftruncateSync(fd, len);              // Synchronous ftruncate.
292fs.truncate(path, len, callback);       // Asynchronous truncate. No arguments other than a possible exception are given to the completion callback.
293fs.truncateSync(path, len);             // Synchronous truncate.
294
295fs.chown(path, uid, gid, callback);     // Asynchronous chown. No arguments other than a possible exception are given to the completion callback.
296fs.chownSync(path, uid, gid);           // Synchronous chown.
297fs.fchown(fd, uid, gid, callback);      // Asynchronous fchown. No arguments other than a possible exception are given to the completion callback.
298fs.fchownSync(fd, uid, gid);            // Synchronous fchown.
299fs.lchown(path, uid, gid, callback);    // Asynchronous lchown. No arguments other than a possible exception are given to the completion callback.
300fs.lchownSync(path, uid, gid);          // Synchronous lchown.
301
302fs.chmod(path, mode, callback);         // Asynchronous chmod. No arguments other than a possible exception are given to the completion callback.
303fs.chmodSync(path, mode);               // Synchronous chmod.
304fs.fchmod(fd, mode, callback);          // Asynchronous fchmod. No arguments other than a possible exception are given to the completion callback.
305fs.fchmodSync(fd, mode);                // Synchronous fchmod.
306fs.lchmod(path, mode, callback);        // Asynchronous lchmod. No arguments other than a possible exception are given to the completion callback.
307fs.lchmodSync(path, mode);              // Synchronous lchmod.
308
309fs.stat(path, callback);                // Asynchronous stat. The callback gets two arguments (err, stats) where stats is a fs.Stats object. 
310fs.statSync(path);                      // Synchronous stat. Returns an instance of fs.Stats.
311fs.lstat(path, callback);               // Asynchronous lstat. The callback gets two arguments (err, stats) where stats is a fs.Stats object. lstat() is identical to stat(), except that if path is a symbolic link, then the link itself is stat-ed, not the file that it refers to.
312fs.lstatSync(path);                     // Synchronous lstat. Returns an instance of fs.Stats.
313fs.fstat(fd, callback);                 // Asynchronous fstat. The callback gets two arguments (err, stats) where stats is a fs.Stats object. fstat() is identical to stat(), except that the file to be stat-ed is specified by the file descriptor fd.
314fs.fstatSync(fd);                       // Synchronous fstat. Returns an instance of fs.Stats.
315
316fs.link(srcpath, dstpath, callback);             // Asynchronous link. No arguments other than a possible exception are given to the completion callback.
317fs.linkSync(srcpath, dstpath);                   // Synchronous link.
318fs.symlink(srcpath, dstpath, [type], callback);  // Asynchronous symlink. No arguments other than a possible exception are given to the completion callback. The type argument can be set to 'dir', 'file', or 'junction' (default is 'file') and is only available on Windows (ignored on other platforms)
319fs.symlinkSync(srcpath, dstpath, [type]);        // Synchronous symlink.
320fs.readlink(path, callback);                     // Asynchronous readlink. The callback gets two arguments (err, linkString).
321fs.readlinkSync(path);                           // Synchronous readlink. Returns the symbolic link's string value.
322fs.unlink(path, callback);                       // Asynchronous unlink. No arguments other than a possible exception are given to the completion callback.
323fs.unlinkSync(path);                             // Synchronous unlink.
324
325fs.realpath(path, [cache], callback);     // Asynchronous realpath. The callback gets two arguments (err, resolvedPath).
326fs.realpathSync(path, [cache]);           // Synchronous realpath. Returns the resolved path.
327
328fs.rmdir(path, callback);                 // Asynchronous rmdir. No arguments other than a possible exception are given to the completion callback.
329fs.rmdirSync(path);                       // Synchronous rmdir.
330fs.mkdir(path, [mode], callback);         // Asynchronous mkdir. No arguments other than a possible exception are given to the completion callback. mode defaults to 0777.
331fs.mkdirSync(path, [mode]);               // Synchronous mkdir.
332fs.readdir(path, callback);               // Asynchronous readdir. Reads the contents of a directory. The callback gets two arguments (err, files) where files is an array of the names of the files in the directory excluding '.' and '..'.
333fs.readdirSync(path);                     // Synchronous readdir. Returns an array of filenames excluding '.' and '..'.
334fs.close(fd, callback);                   // Asynchronous close. No arguments other than a possible exception are given to the completion callback.
335fs.closeSync(fd);                         // Synchronous close.
336fs.open(path, flags, [mode], callback);   // Asynchronous file open.
337fs.openSync(path, flags, [mode]);         // Synchronous version of fs.open().
338fs.utimes(path, atime, mtime, callback);  // Change file timestamps of the file referenced by the supplied path.
339fs.utimesSync(path, atime, mtime);        // Synchronous version of fs.utimes().
340fs.futimes(fd, atime, mtime, callback);   // Change the file timestamps of a file referenced by the supplied file descriptor.
341fs.futimesSync(fd, atime, mtime);         // Synchronous version of fs.futimes().
342fs.fsync(fd, callback);                   // Asynchronous fsync. No arguments other than a possible exception are given to the completion callback.
343fs.fsyncSync(fd);                         // Synchronous fsync.
344
345fs.write(fd, buffer, offset, length, position, callback);  // Write buffer to the file specified by fd.
346fs.writeSync(fd, buffer, offset, length, position);        // Synchronous version of fs.write(). Returns the number of bytes written.
347fs.read(fd, buffer, offset, length, position, callback);   // Read data from the file specified by fd.
348fs.readSync(fd, buffer, offset, length, position);         // Synchronous version of fs.read. Returns the number of bytesRead.
349fs.readFile(filename, [options], callback);                // Asynchronously reads the entire contents of a file.
350fs.readFileSync(filename, [options]);                      // Synchronous version of fs.readFile. Returns the contents of the filename. If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.
351
352fs.writeFile(filename, data, [options], callback);   // Asynchronously writes data to a file, replacing the file if it already exists. data can be a string or a buffer.
353fs.writeFileSync(filename, data, [options]);         // The synchronous version of fs.writeFile.
354fs.appendFile(filename, data, [options], callback);  // Asynchronously append data to a file, creating the file if it not yet exists. data can be a string or a buffer.
355fs.appendFileSync(filename, data, [options]);        // The synchronous version of fs.appendFile.
356fs.watch(filename, [options], [listener]);           // Watch for changes on filename, where filename is either a file or a directory. The returned object is a fs.FSWatcher. The listener callback gets two arguments (event, filename). event is either 'rename' or 'change', and filename is the name of the file which triggered the event.
357fs.exists(path, callback);                           // Test whether or not the given path exists by checking with the file system. Then call the callback argument with either true or false. (should not be used)
358fs.existsSync(path);                                 // Synchronous version of fs.exists. (should not be used)
359
360// fs.Stats: objects returned from fs.stat(), fs.lstat() and fs.fstat() and their synchronous counterparts are of this type.
361stats.isFile();
362stats.isDirectory()
363stats.isBlockDevice()
364stats.isCharacterDevice()
365stats.isSymbolicLink()  // (only valid with fs.lstat())
366stats.isFIFO()
367stats.isSocket()
368
369fs.createReadStream(path, [options]);   // Returns a new ReadStream object.
370fs.createWriteStream(path, [options]);  // Returns a new WriteStream object.
371
372
373/* *******************************************************************************************
374 * PATH
375 * http://nodejs.org/api/fs.html
376 * ******************************************************************************************* */
377
378
379// Use require('path') to use this module.
380// This module contains utilities for handling and transforming file paths.
381// Almost all these methods perform only string transformations.
382// The file system is not consulted to check whether paths are valid.
383
384path.normalize(p);                    // Normalize a string path, taking care of '..' and '.' parts.
385path.join([path1], [path2], [...]);   // Join all arguments together and normalize the resulting path.
386path.resolve([from ...], to);         // Resolves 'to' to an absolute path.
387path.relative(from, to);              // Solve the relative path from 'from' to 'to'.
388path.dirname(p);                      // Return the directory name of a path. Similar to the Unix dirname command.
389path.basename(p, [ext]);              // Return the last portion of a path. Similar to the Unix basename command.
390path.extname(p);                      // Return the extension of the path, from the last '.' to end of string in the last portion of the path.
391
392path.sep;                             // The platform-specific file separator. '\\' or '/'.
393path.delimiter;                       // The platform-specific path delimiter, ';' or ':'.
394
395
396/* *******************************************************************************************
397 * HTTP
398 * http://nodejs.org/api/http.html
399 * ******************************************************************************************* */
400
401
402// To use the HTTP server and client one must require('http').
403
404http.STATUS_CODES;                                             // A collection of all the standard HTTP response status codes, and the short description of each.
405http.request(options, [callback]);                             // This function allows one to transparently issue requests.
406http.get(options, [callback]);                                 // Set the method to GET and calls req.end() automatically.
407
408server = http.createServer([requestListener]);                 // Returns a new web server object. The requestListener is a function which is automatically added to the 'request' event.
409server.listen(port, [hostname], [backlog], [callback]);        // Begin accepting connections on the specified port and hostname.
410server.listen(path, [callback]);                               // Start a UNIX socket server listening for connections on the given path.
411server.listen(handle, [callback]);                             // The handle object can be set to either a server or socket (anything with an underlying _handle member), or a {fd: <n>} object.
412server.close([callback]);                                      // Stops the server from accepting new connections. 
413server.setTimeout(msecs, callback);                            // Sets the timeout value for sockets, and emits a 'timeout' event on the Server object, passing the socket as an argument, if a timeout occurs.
414
415server.maxHeadersCount;  // Limits maximum incoming headers count, equal to 1000 by default. If set to 0 - no limit will be applied.
416server.timeout;          // The number of milliseconds of inactivity before a socket is presumed to have timed out.
417
418server.on('request', function (request, response) { });        // Emitted each time there is a request.
419server.on('connection', function (socket) { });                // When a new TCP stream is established.
420server.on('close', function () { });                           // Emitted when the server closes.
421server.on('checkContinue', function (request, response) { });  // Emitted each time a request with an http Expect: 100-continue is received.
422server.on('connect', function (request, socket, head) { });    // Emitted each time a client requests a http CONNECT method.
423server.on('upgrade', function (request, socket, head) { });    // Emitted each time a client requests a http upgrade.
424server.on('clientError', function (exception, socket) { });    // If a client connection emits an 'error' event - it will forwarded here.
425
426request.write(chunk, [encoding]);                              // Sends a chunk of the body.
427request.end([data], [encoding]);                               // Finishes sending the request. If any parts of the body are unsent, it will flush them to the stream.
428request.abort();                                               // Aborts a request.
429request.setTimeout(timeout, [callback]);                       // Once a socket is assigned to this request and is connected socket.setTimeout() will be called.
430request.setNoDelay([noDelay]);                                 // Once a socket is assigned to this request and is connected socket.setNoDelay() will be called.
431request.setSocketKeepAlive([enable], [initialDelay]);          // Once a socket is assigned to this request and is connected socket.setKeepAlive() will be called.
432
433request.on('response', function(response) { });                // Emitted when a response is received to this request. This event is emitted only once.
434request.on('socket', function(socket) { });                    // Emitted after a socket is assigned to this request.
435request.on('connect', function(response, socket, head) { });   // Emitted each time a server responds to a request with a CONNECT method. If this event isn't being listened for, clients receiving a CONNECT method will have their connections closed.
436request.on('upgrade', function(response, socket, head) { });   // Emitted each time a server responds to a request with an upgrade. If this event isn't being listened for, clients receiving an upgrade header will have their connections closed.
437request.on('continue', function() { });                        // Emitted when the server sends a '100 Continue' HTTP response, usually because the request contained 'Expect: 100-continue'. This is an instruction that the client should send the request body.
438
439response.write(chunk, [encoding]);                             // This sends a chunk of the response body. If this merthod is called and response.writeHead() has not been called, it will switch to implicit header mode and flush the implicit headers.
440response.writeContinue();                                      // Sends a HTTP/1.1 100 Continue message to the client, indicating that the request body should be sent.
441response.writeHead(statusCode, [reasonPhrase], [headers]);     // Sends a response header to the request.
442response.setTimeout(msecs, callback);                          // Sets the Socket's timeout value to msecs. If a callback is provided, then it is added as a listener on the 'timeout' event on the response object.
443response.setHeader(name, value);                               // Sets a single header value for implicit headers. If this header already exists in the to-be-sent headers, its value will be replaced. Use an array of strings here if you need to send multiple headers with the same name.
444response.getHeader(name);                                      // Reads out a header that's already been queued but not sent to the client. Note that the name is case insensitive.
445response.removeHeader(name);                                   // Removes a header that's queued for implicit sending.
446response.addTrailers(headers);                                 // This method adds HTTP trailing headers (a header but at the end of the message) to the response.
447response.end([data], [encoding]);                              // This method signals to the server that all of the response headers and body have been sent; that server should consider this message complete. The method, response.end(), MUST be called on each response.
448
449response.statusCode;                                           // When using implicit headers (not calling response.writeHead() explicitly), this property controls the status code that will be sent to the client when the headers get flushed.
450response.headersSent;                                          // Boolean (read-only). True if headers were sent, false otherwise.
451response.sendDate;                                             // When true, the Date header will be automatically generated and sent in the response if it is not already present in the headers. Defaults to true.
452
453response.on('close', function () { });  // Indicates that the underlying connection was terminated before response.end() was called or able to flush.
454response.on('finish', function() { });  // Emitted when the response has been sent. 
455
456message.httpVersion;                    // In case of server request, the HTTP version sent by the client. In the case of client response, the HTTP version of the connected-to server.
457message.headers;                        // The request/response headers object.
458message.trailers;                       // The request/response trailers object. Only populated after the 'end' event.
459message.method;                         // The request method as a string. Read only. Example: 'GET', 'DELETE'.
460message.url;                            // Request URL string. This contains only the URL that is present in the actual HTTP request.
461message.statusCode;                     // The 3-digit HTTP response status code. E.G. 404.
462message.socket;                         // The net.Socket object associated with the connection.
463
464message.setTimeout(msecs, callback);    // Calls message.connection.setTimeout(msecs, callback).
465
466
467/* *******************************************************************************************
468 * URL
469 * http://nodejs.org/api/url.html
470 * ******************************************************************************************* */
471
472
473// This module has utilities for URL resolution and parsing. Call require('url') to use it.
474
475url.parse(urlStr, [parseQueryString], [slashesDenoteHost]);  // Take a URL string, and return an object.
476url.format(urlObj);                                          // Take a parsed URL object, and return a formatted URL string.
477url.resolve(from, to);                                       // Take a base URL, and a href URL, and resolve them as a browser would for an anchor tag.
478
479
480/* *******************************************************************************************
481 * QUERY STRING
482 * http://nodejs.org/api/querystring.html
483 * ******************************************************************************************* */
484
485
486// This module provides utilities for dealing with query strings. Call require('querystring') to use it.
487
488querystring.stringify(obj, [sep], [eq]);         // Serialize an object to a query string. Optionally override the default separator ('&') and assignment ('=') characters.
489querystring.parse(str, [sep], [eq], [options]);  // Deserialize a query string to an object. Optionally override the default separator ('&') and assignment ('=') characters.
490
491
492/* *******************************************************************************************
493 * ASSERT
494 * http://nodejs.org/api/assert.html
495 * ******************************************************************************************* */
496
497
498// This module is used for writing unit tests for your applications, you can access it with require('assert').
499
500assert.fail(actual, expected, message, operator);     // Throws an exception that displays the values for actual and expected separated by the provided operator.
501assert(value, message); assert.ok(value, [message]);  // Tests if value is truthy, it is equivalent to assert.equal(true, !!value, message);
502assert.equal(actual, expected, [message]);            // Tests shallow, coercive equality with the equal comparison operator ( == ).
503assert.notEqual(actual, expected, [message]);         // Tests shallow, coercive non-equality with the not equal comparison operator ( != ).
504assert.deepEqual(actual, expected, [message]);        // Tests for deep equality.
505assert.notDeepEqual(actual, expected, [message]);     // Tests for any deep inequality.
506assert.strictEqual(actual, expected, [message]);      // Tests strict equality, as determined by the strict equality operator ( === )
507assert.notStrictEqual(actual, expected, [message]);   // Tests strict non-equality, as determined by the strict not equal operator ( !== )
508assert.throws(block, [error], [message]);             // Expects block to throw an error. error can be constructor, RegExp or validation function.
509assert.doesNotThrow(block, [message]);                // Expects block not to throw an error, see assert.throws for details.
510assert.ifError(value);                                // Tests if value is not a false value, throws if it is a true value. Useful when testing the first argument, error in callbacks.
511
512
513/* *******************************************************************************************
514 * OS
515 * http://nodejs.org/api/os.html
516 * ******************************************************************************************* */
517
518
519// Provides a few basic operating-system related utility functions.
520// Use require('os') to access this module.
521
522os.tmpdir();             // Returns the operating system's default directory for temp files.
523os.endianness();         // Returns the endianness of the CPU. Possible values are "BE" or "LE".
524os.hostname();           // Returns the hostname of the operating system.
525os.type();               // Returns the operating system name.
526os.platform();           // Returns the operating system platform.
527os.arch();               // Returns the operating system CPU architecture.
528os.release();            // Returns the operating system release.
529os.uptime();             // Returns the system uptime in seconds.
530os.loadavg();            // Returns an array containing the 1, 5, and 15 minute load averages.
531os.totalmem();           // Returns the total amount of system memory in bytes.
532os.freemem();            // Returns the amount of free system memory in bytes.
533os.cpus();               // Returns an array of objects containing information about each CPU/core installed: model, speed (in MHz), and times (an object containing the number of milliseconds the CPU/core spent in: user, nice, sys, idle, and irq).
534os.networkInterfaces();  // Get a list of network interfaces.
535os.EOL;                  // A constant defining the appropriate End-of-line marker for the operating system.
536
537
538/* *******************************************************************************************
539 * BUFFER
540 * http://nodejs.org/api/buffer.html
541 * ******************************************************************************************* */
542
543
544// Buffer is used to dealing with binary data
545// Buffer is similar to an array of integers but corresponds to a raw memory allocation outside the V8 heap
546
547Buffer.from(size);                                                  // Allocates a new buffer of size octets.
548Buffer.from(array);                                                 // Allocates a new buffer using an array of octets.
549Buffer.from(str, [encoding]);                                       // Allocates a new buffer containing the given str. encoding defaults to 'utf8'.
550
551Buffer.isEncoding(encoding);                                        // Returns true if the encoding is a valid encoding argument, or false otherwise.
552Buffer.isBuffer(obj);                                               // Tests if obj is a Buffer
553Buffer.concat(list, [totalLength]);                                 // Returns a buffer which is the result of concatenating all the buffers in the list together.
554Buffer.byteLength(string, [encoding]);                              // Gives the actual byte length of a string.
555
556buf.write(string, [offset], [length], [encoding]);                  // Writes string to the buffer at offset using the given encoding
557buf.toString([encoding], [start], [end]);                           // Decodes and returns a string from buffer data encoded with encoding (defaults to 'utf8') beginning at start (defaults to 0) and ending at end (defaults to buffer.length).
558buf.toJSON();                                                       // Returns a JSON-representation of the Buffer instance, which is identical to the output for JSON Arrays
559buf.copy(targetBuffer, [targetStart], [sourceStart], [sourceEnd]);  // Does copy between buffers. The source and target regions can be overlapped
560buf.slice([start], [end]);                                          // Returns a new buffer which references the same memory as the old, but offset and cropped by the start (defaults to 0) and end (defaults to buffer.length) indexes. Negative indexes start from the end of the buffer.   
561buf.fill(value, [offset], [end]);                                   // Fills the buffer with the specified value
562buf[index];                                                         // Get and set the octet at index
563buf.length;                                                         // The size of the buffer in bytes, Note that this is not necessarily the size of the contents
564
565buffer.INSPECT_MAX_BYTES;                                           // How many bytes will be returned when buffer.inspect() is called. This can be overridden by user modules.

Vue.js

  1/* *******************************************************************************************
  2 * GLOBAL CONFIG
  3 * Vue.config is an object containing Vue’s global configurations.
  4 * You can modify its properties listed below before bootstrapping your application.
  5 * https://vuejs.org/v2/api/#Global-Config
  6 * ******************************************************************************************* */
  7
  8
  9// Configure whether to allow vue-devtools inspection
 10Vue.config.devtools = true
 11
 12// Enable component init, compile, render and patch performance tracing in the browser devtool timeline.
 13Vue.config.performance = true
 14
 15// Prevent the production tip on Vue startup.
 16Vue.config.productionTip = false
 17
 18// Suppress all Vue logs and warnings
 19Vue.config.silent = false
 20
 21// Make Vue ignore custom elements defined outside of Vue
 22Vue.config.ignoredElements = [
 23  'my-custom-web-component',
 24  'another-web-component',
 25  /^ion-/
 26]
 27
 28// Define custom key alias(es) for v-on.
 29Vue.config.keyCodes = {
 30  v: 86,
 31  f1: 112,
 32  // camelCase won`t work
 33  mediaPlayPause: 179,
 34  // instead you can use kebab-case with double quotation marks
 35  "media-play-pause": 179,
 36  up: [38, 87]
 37}
 38
 39// Assign a handler for uncaught errors during component render function and watchers. 
 40Vue.config.errorHandler = function (err, vm, info) {
 41  // handle error
 42  // `info` is a Vue-specific error info, e.g. which lifecycle hook
 43  // the error was found in. Only available in 2.2.0+
 44}
 45
 46// Define custom merging strategies for options
 47Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
 48  return child + 1
 49}
 50
 51// Assign a custom handler for runtime Vue warnings.
 52// Note this only works during development and is ignored in production.
 53Vue.config.warnHandler = function (msg, vm, trace) {
 54  // `trace` is the component hierarchy trace
 55}
 56
 57
 58/* *******************************************************************************************
 59 * GLOBAL API
 60 * https://vuejs.org/v2/api/#Global-API
 61 * ******************************************************************************************* */
 62
 63
 64Vue.version                        // Provides the installed version of Vue as a string.
 65
 66Vue.extend(options)                // Create a “subclass” of the base Vue constructor.
 67Vue.mixin( mixin )                 // Apply a mixin globally, which affects every Vue instance created afterwards.
 68Vue.nextTick([callback, context])  // Defer the callback to be executed after the next DOM update cycle.
 69Vue.use(plugin)                    // Install a Vue.js plugin. If the plugin is an Object, it must expose an install method.
 70
 71Vue.set(target, key, value)        // Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates.
 72Vue.delete(target, key)            // Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates.
 73
 74// Register or retrieve a global directive.
 75Vue.directive('my-directive', {
 76  bind: function () {},
 77  inserted: function () {},
 78  update: function () {},
 79  componentUpdated: function () {},
 80  unbind: function () {}
 81})
 82
 83// Register (function directive)
 84Vue.directive('my-directive', function () {
 85  // This will be called as `bind` and `update`
 86})
 87
 88// Getter, return the directive definition if registered
 89var myDirective = Vue.directive('my-directive')
 90
 91// Register a global filter
 92Vue.filter('my-filter', function (value) { })
 93
 94// Getter, return the filter if registered
 95var myFilter = Vue.filter('my-filter')
 96
 97// Register an extended constructor
 98Vue.component('my-component', Vue.extend({ }))
 99
100// Register an options object (automatically call Vue.extend)
101Vue.component('my-component', { })
102
103// Retrieve a registered component (always return constructor)
104var MyComponent = Vue.component('my-component')
105
106Vue.compile(template)  // Compiles a template string into a render function
107
108
109/* *******************************************************************************************
110 * OPTIONS > DATA
111 * https://vuejs.org/v2/api/#Options-Data
112 * ******************************************************************************************* */
113
114
115new Vue({
116  // A list/hash of attributes that are exposed to accept data from the parent component.
117  // It has an Array-based simple syntax and an alternative Object-based syntax that allows
118  // advanced configurations such as type checking, custom validation and default values.
119  props: {
120    height: Number,
121    age: {
122      type: Number,
123      default: 0,
124      required: true,
125      validator: function (value) {
126        return value >= 0
127      }
128    }
129  },
130
131  // Primarily intended to make unit testing easier
132  propsData: {
133    age: 12
134  },
135
136  // The data object for the Vue instance.
137  // Vue will recursively convert its properties into getter/setters to make it “reactive”. 
138  // Note: you should not use an arrow function with the data property
139  data () {
140    return {
141      a: 1,
142      b: 2
143    }
144  },
145
146  // Computed properties to be mixed into the Vue instance.
147  // All getters and setters have their this context automatically bound to the Vue instance.
148  // Computed properties are cached, and only re-computed on reactive dependency changes.
149  // Note that if a certain dependency is out of the instance’s scope (i.e. not reactive),
150  // the computed property will not be updated.
151  computed: {
152    // Note: you should not use an arrow function to define a computed property.
153    aDouble: function () {
154      return this.a * 2
155    },
156    aPlus: {
157      get: function () {
158        return this.a + 1
159      },
160      set: function (v) {
161        this.a = v - 1
162      }
163    }
164  },
165
166  // An object where keys are expressions to watch and values are the corresponding callbacks.
167  // The value can also be a string of a method name, or an Object that contains additional options.
168  // The Vue instance will call $watch() for each entry in the object at instantiation.
169  watch: {
170    // Note: you should not use an arrow function to define a watcher.
171    a: function (val, oldVal) {
172      console.log('new: %s, old: %s', val, oldVal)
173    },
174    // String method name
175    b: 'someMethod',
176    // Deep watcher
177    c: {
178      handler: function (val, oldVal) { /* ... */ },
179      deep: true
180    },
181    // The callback will be called immediately after the start of the observation
182    d: {
183      handler: function (val, oldVal) { /* ... */ },
184      immediate: true
185    }
186  },
187
188  // Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance,
189  // or use them in directive expressions. All methods will have their this context automatically bound to
190  // the Vue instance.
191  methods: {
192    // Note: you should not use an arrow function to define a method.
193    plus () {
194      this.a++
195    }
196  }
197})
198
199
200/* *******************************************************************************************
201 * OPTIONS > DOM
202 * https://vuejs.org/v2/api/#Options-DOM
203 * ******************************************************************************************* */
204
205
206new Vue({
207  // Provide the Vue instance an existing DOM element to mount on.
208  // It can be a CSS selector string or an actual HTMLElement.
209  // After the instance is mounted, the resolved element will be accessible as vm.$el.
210  el: '#example',
211
212  // A string template to be used as the markup for the Vue instance.
213  // The template will replace the mounted element.
214  // Any existing markup inside the mounted element will be ignored,
215  // unless content distribution slots are present in the template.
216  // If the string starts with # it will be used as a querySelector and
217  // use the selected element’s innerHTML as the template string. This
218  // allows the use of the common <script type="x-template"> trick to include templates.
219  template: `
220    <div class="checkbox-wrapper" @click="check">
221      <div :class="{ checkbox: true, checked: checked }"></div>
222      <div class="title">{{ title }}</div>
223    </div>
224  `,
225
226  // An alternative to string templates allowing you to leverage the full programmatic power of JavaScript.
227  // The render function receives a createElement method as it’s first argument used to create VNodes.
228  // If the component is a functional component, the render function also receives an extra argument context,
229  // which provides access to contextual data since functional components are instance-less.
230  render (createElement) {
231    // create kebabCase id
232    var headingId = getChildrenTextContent(this.$slots.default)
233    .toLowerCase()
234    .replace(/\W+/g, '-')
235    .replace(/(^\-|\-$)/g, '')
236
237    return createElement(
238      'h' + this.level,
239      [
240        createElement('a', {
241          attrs: {
242            name: headingId,
243            href: '#' + headingId
244          }
245        }, this.$slots.default)
246      ]
247    )
248  },
249
250  // Provide an alternative render output when the default render function encounters an error.
251  // The error will be passed to renderError as the second argument.
252  // This is particularly useful when used together with hot-reload.
253  renderError (createElement, err) {
254    return createElement('pre', { style: { color: 'red' }}, err.stack)
255  }
256})
257
258
259/* *******************************************************************************************
260 * OPTIONS > LIFECYCLE HOOKS
261 * https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
262 * ******************************************************************************************* */
263
264
265// All lifecycle hooks automatically have their this context bound to the instance,
266// so that you can access data, computed properties, and methods. This means you should not
267// use an arrow function to define a lifecycle method (e.g. created: () => this.fetchTodos()).
268// The reason is arrow functions bind the parent context, so this will not be the Vue instance as
269// you expect and this.fetchTodos will be undefined.
270
271new Vue({
272  // Called synchronously immediately after the instance has been initialized,
273  // before data observation and event/watcher setup.
274  beforeCreate () {
275    console.log('The instance has been initialized')
276  },
277
278  // Called synchronously after the instance is created. At this stage, the instance has
279  // finished processing the options which means the following have been set up: data observation,
280  // computed properties, methods, watch/event callbacks. However, the mounting phase has not been
281  // started, and the $el property will not be available yet.
282  created () {
283    console.log('The instance has been created')
284  },
285
286  // Called right before the mounting begins: the render function
287  // is about to be called for the first time.
288  beforeMount () {
289    console.log('The instance is about to be mounted')
290  },
291
292  // Called after the instance has been mounted, where el is replaced by the newly created vm.$el.
293  // If the root instance is mounted to an in-document element, vm.$el will also be in-document when
294  // mounted is called.
295  mounted () {
296    console.log('The instance has been mounted')
297
298    // Note that mounted does not guarantee that all child components have also been mounted.
299    // If you want to wait until the entire view has been rendered, you can use vm.$nextTick
300    // inside of mounted:
301    this.$nextTick(function () {
302      // Code that will run only after the
303      // entire view has been rendered
304    })
305  },
306
307  // Called when the data changes, before the virtual DOM is re-rendered and patched.
308  // You can perform further state changes in this hook and they will not trigger additional re-renders.
309  // This hook is not called during server-side rendering.  
310  beforeUpdate () {
311    console.log('The instance is about to be re-rendered and patched')
312  },
313
314  // The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent
315  // operations here. However, in most cases you should avoid changing state inside the hook. To react
316  // to state changes, it’s usually better to use a computed property or watcher instead.
317  updated () {
318    console.log('The instance has been re-rendered and patched')
319
320    // Note that updated does not guarantee that all child components have also been re-rendered.
321    // If you want to wait until the entire view has been re-rendered, you can use vm.$nextTick
322    // inside of updated:
323    this.$nextTick(function () {
324      // Code that will run only after the
325      // entire view has been re-rendered
326    })
327  },
328
329  // Called when a kept-alive component is activated.
330  activated () {
331    console.log('Component activated')
332  },
333
334  // Called when a kept-alive component is deactivated.  
335  deactivated () {
336    console.log('Component deactivated')
337  },
338
339  // Called right before a Vue instance is destroyed.
340  // At this stage the instance is still fully functional.
341  beforeDestroy () {
342    console.log('The instance is about to be destroyed')
343  },
344
345  // Called after a Vue instance has been destroyed.
346  // When this hook is called, all directives of the Vue instance have been unbound,
347  // all event listeners have been removed, and all child Vue instances have also been destroyed.  
348  destroyed () {
349    console.log('The instance has been destroyed')
350  },
351
352  // Called when an error from any descendent component is captured.
353  // The hook receives three arguments: the error, the component instance that triggered the error,
354  // and a string containing information on where the error was captured.
355  // The hook can return false to stop the error from propagating further.
356  errorCaptured (error, vm, info) {
357    console.log(`The error (${error}) has been captured for ${vm}: ${info}`)
358
359    // An errorCaptured hook can return false to prevent the error from propagating further.
360    // This is essentially saying “this error has been handled and should be ignored.”
361    // It will prevent any additional errorCaptured hooks or the global config.errorHandler
362    // from being invoked for this error.
363    return false
364  },
365})
366
367
368/* *******************************************************************************************
369 * OPTIONS > ASSETS
370 * https://vuejs.org/v2/api/#Options-Assets
371 * ******************************************************************************************* */
372
373
374new Vue({
375  // A hash of directives to be made available to the Vue instance.
376  directives: {
377    myDirective: {
378      // Called only once, when the directive is first bound to the element.
379      // This is where you can do one-time setup work.
380      bind: function (el, binding, vnode, oldVnode) {
381        console.log('The directive is first bound to the element.')
382      },
383
384      // Called when the bound element has been inserted into its parent node
385      // (this only guarantees parent node presence, not necessarily in-document).
386      inserted: function (el, binding, vnode, oldVnode) {
387        console.log('The bound element has been inserted into its parent node.')
388      },
389
390      // Called after the containing component’s VNode has updated, but possibly before its
391      // children have updated. The directive’s value may or may not have changed, but you can
392      // skip unnecessary updates by comparing the binding’s current and old values (see below
393      // on hook arguments).
394      update: function (el, binding, vnode, oldVnode) {
395        console.log('The component VNode has updated.')
396      },
397
398      // Called after the containing component’s VNode and the VNodes of its children have updated.
399      componentUpdated: function (el, binding, vnode, oldVnode) {
400        console.log('The component’s VNode and the VNodes of its children have updated.')
401      },
402      
403      // Called only once, when the directive is unbound from the element.
404      unbind: function (el, binding, vnode, oldVnode) {
405        console.log('The directive is unbound from the element.')
406      },
407    }
408  },
409
410  // A hash of filters to be made available to the Vue instance.
411  filters: {
412    myFilter: function (value) {
413      console.log('Do your computations and return something to display.')
414    }
415  }
416})
417
418
419/* *******************************************************************************************
420 * OPTIONS > COMPOSITION
421 * https://vuejs.org/v2/api/#Options-Composition
422 * ******************************************************************************************* */
423
424
425new Vue({
426  // Specify the parent instance for the instance to be created. Establishes a parent-child
427  // relationship between the two. The parent will be accessible as this.$parent for the child,
428  // and the child will be pushed into the parent’s $children array.
429  parent: vueInstance,
430
431  // The mixins option accepts an array of mixin objects. These mixin objects can contain instance
432  // options like normal instance objects, and they will be merged against the eventual options
433  // using the same option merging logic in Vue.extend(). e.g. If your mixin contains a created
434  // hook and the component itself also has one, both functions will be called.
435  // Mixin hooks are called in the order they are provided, and called before the component’s own hooks.
436  mixins: [mixin],
437
438  // Allows declaratively extending another component (could be either a plain options object or a
439  // constructor) without having to use Vue.extend. This is primarily intended to make it easier to
440  // extend between single file components. This is similar to mixins, the difference being that
441  // the component’s own options takes higher priority than the source component being extended.
442  extends: ObjectOrFunction,
443})
444
445
446/* *******************************************************************************************
447 * OPTIONS > MISC
448 * https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
449 * ******************************************************************************************* */
450
451
452new Vue({
453  // Allow the component to recursively invoke itself in its template.
454  // Note that when a component is registered globally with Vue.component(), the global ID is
455  // automatically set as its name.
456  // Another benefit of specifying a name option is debugging. Named components result in more
457  // helpful warning messages. Also, when inspecting an app in the vue-devtools, unnamed components
458  // will show up as <AnonymousComponent>, which isn’t very informative. By providing the name
459  // option, you will get a much more informative component tree.
460  name: 'myComponent',
461
462  // Change the plain text interpolation delimiters.
463  delimiters: ['${', '}'],
464
465  // Causes a component to be stateless (no data) and instanceless (no this context). They are
466  // only a render function that returns virtual nodes making them much cheaper to render.
467  functional: true,
468
469  // By default, parent scope attribute bindings that are not recognized as props will
470  // “fallthrough” and be applied to the root element of the child component as normal HTML
471  // attributes. When authoring a component that wraps a target element or another component,
472  // this may not always be the desired behavior. By setting inheritAttrs to false, this default
473  // behavior can be disabled. The attributes are available via the $attrs instance property
474  // (also new in 2.4) and can be explicitly bound to a non-root element using v-bind.
475  // Note: this option does not affect class and style bindings.  
476  inheritAttrs: true,
477
478  // When set to true, will preserve and render HTML comments found in templates. The default
479  // behavior is discarding them.
480  comments: true,
481})
482
483
484/* *******************************************************************************************
485 * INSTANCE PROPERTIES
486 * https://vuejs.org/v2/api/#Instance-Properties
487 * ******************************************************************************************* */
488
489
490// The data object that the Vue instance is observing.
491// The Vue instance proxies access to the properties on its data object.
492vm.$data
493
494// An object representing the current props a component has received.
495// The Vue instance proxies access to the properties on its props object.
496vm.$props
497
498// The root DOM element that the Vue instance is managing.
499vm.$el
500
501// The instantiation options used for the current Vue instance.
502// This is useful when you want to include custom properties in the options:
503vm.$options
504
505// The parent instance, if the current instance has one.
506vm.$parent
507
508// The root Vue instance of the current component tree.
509// If the current instance has no parents this value will be itself.
510vm.$root
511
512// The direct child components of the current instance.
513// Note there’s no order guarantee for $children, and it is not reactive.
514// If you find yourself trying to use $children for data binding,
515// consider using an Array and v-for to generate child components,
516// and use the Array as the source of truth.
517vm.$children
518
519// Used to programmatically access content distributed by slots.
520// Each named slot has its own corresponding property (e.g. the contents of slot="foo" will
521// be found at vm.$slots.foo). The default property contains any nodes not included in a named slot.
522// Accessing vm.$slots is most useful when writing a component with a render function.
523vm.$slots
524
525// Used to programmatically access scoped slots. For each slot, including the default one, the
526// object contains a corresponding function that returns VNodes.
527// Accessing vm.$scopedSlots is most useful when writing a component with a render function.
528vm.$scopedSlots
529
530// An object that holds child components that have ref registered.
531vm.$refs
532
533// Whether the current Vue instance is running on the server.
534vm.$isServer
535
536// Contains parent-scope attribute bindings (except for class and style) that are not recognized
537// (and extracted) as props. When a component doesn’t have any declared props, this essentially
538// contains all parent-scope bindings (except for class and style), and can be passed down to an
539// inner component via v-bind="$attrs" - useful when creating higher-order components.
540vm.$attrs
541
542// Contains parent-scope v-on event listeners (without .native modifiers).
543// This can be passed down to an inner component via v-on="$listeners" - useful when creating
544// higher-order components.
545vm.$listeners
546
547
548/* *******************************************************************************************
549 * INSTANCE METHODS > DATA
550 * https://vuejs.org/v2/api/#Instance-Methods-Data
551 * ******************************************************************************************* */
552
553
554// Watch an expression or a computed function on the Vue instance for changes.
555// The callback gets called with the new value and the old value.
556// The expression only accepts dot-delimited paths.
557// For more complex expressions, use a function instead.
558var unwatch = vm.$watch('a.b.c', function (newVal, oldVal) {
559  // do something
560}, {
561  // To also detect nested value changes inside Objects, you need to pass in deep: true
562  // in the options argument. Note that you don’t need to do so to listen for Array mutations.
563  deep: true,
564
565  // Passing in immediate: true in the option will trigger the callback immediately with the
566  // current value of the expression:
567  immediate: true
568})
569
570// later, teardown the watcher
571unwatch()
572
573// This is the alias of the global Vue.set.
574vm.$set(target,key, value)
575
576// This is the alias of the global Vue.delete.
577vm.$delete(target, key)
578
579
580/* *******************************************************************************************
581 * INSTANCE METHODS > EVENTS
582 * https://vuejs.org/v2/api/#Instance-Methods-Events
583 * ******************************************************************************************* */
584
585
586// Listen for a custom event on the current vm. Events can be triggered by vm.$emit.
587// The callback will receive all the additional arguments passed into these event-triggering methods.
588vm.$on(event, callback)
589
590// Listen for a custom event, but only once.
591// The listener will be removed once it triggers for the first time.
592vm.$once(event, callback)
593
594// Remove custom event listener(s).
595// If no arguments are provided, remove all event listeners;
596// If only the event is provided, remove all listeners for that event;
597// If both event and callback are given, remove the listener for that specific callback only.
598vm.$off([event, callback])
599
600// Trigger an event on the current instance.
601// Any additional arguments will be passed into the listener’s callback function.
602vm.$emit(event, [args])
603
604
605/* *******************************************************************************************
606 * INSTANCE METHODS > LIFECYCLE
607 * https://vuejs.org/v2/api/#Instance-Methods-Lifecycle
608 * ******************************************************************************************* */
609
610
611// If a Vue instance didn’t receive the el option at instantiation, it will be in “unmounted”
612// state, without an associated DOM element. vm.$mount() can be used to manually start the mounting
613// of an unmounted Vue instance.
614vm.$mount([elementOrSelector])
615
616// Force the Vue instance to re-render. Note it does not affect all child components,
617// only the instance itself and child components with inserted slot content.
618vm.$forceUpdate()
619
620// Defer the callback to be executed after the next DOM update cycle.
621// Use it immediately after you’ve changed some data to wait for the DOM update.
622// This is the same as the global Vue.nextTick, except that the callback’s this context is
623// automatically bound to the instance calling this method.
624vm.$nextTick([callback])
625
626// Completely destroy a vm. Clean up its connections with other existing vms, unbind all its
627// directives, turn off all event listeners.
628// Triggers the beforeDestroy and destroyed hooks.
629vm.$destroy()
630
631
632/* *******************************************************************************************
633 * DIRECTIVES
634 * https://vuejs.org/v2/api/#Directives
635 * ******************************************************************************************* */
636
637
638// <!-- Updates the element’s textContent. -->
639// <!-- If you need to update the part of textContent, you should use {{ Mustache }} interpolations. -->
640
641// <span v-text="msg"></span>
642
643
644// <!-- Updates the element’s innerHTML. Note that the contents are inserted as plain HTML -->
645// <!-- they will not be compiled as Vue templates. If you find yourself trying to compose templates -->
646// <!-- using v-html, try to rethink the solution by using components instead. -->
647
648// <div v-html="html"></div>
649
650
651// <!-- Toggle’s the element’s display CSS property based on the truthy-ness of the expression value. -->
652// <!-- This directive triggers transitions when its condition changes. -->
653
654// <div v-show="condition"></div>
655
656
657// <!-- Conditionally render the element based on the truthy-ness of the expression value. -->
658// <!-- The element and its contained directives / components are destroyed and re-constructed -->
659// <!-- during toggles. If the element is a <template> element, its content will be extracted as -->
660// <!-- the conditional block. This directive triggers transitions when its condition changes. -->
661
662// <div v-if="condition"></div>
663// <div v-else-if="anotherCondition"></div>
664// <div v-else></div>
665
666
667// <!-- Render the element or template block multiple times based on the source data. -->
668// <!-- The directive’s value must use the special syntax alias in expression to provide an alias -->
669// <!-- for the current element being iterated on: -->
670
671// <div v-for="item in items">{{ item.text }}</div>
672
673
674// <!-- Alternatively, you can also specify an alias for the index (or the key if used on an Object): -->
675
676// <div v-for="(item, index) in items"></div>
677// <div v-for="(val, key) in object"></div>
678// <div v-for="(val, key, index) in object"></div>
679
680
681// <!-- Attaches an event listener to the element. The event type is denoted by the argument. -->
682// <!-- The expression can be a method name, an inline statement, or omitted if there are modifiers present. -->
683
684// .stop:                                           Call event.stopPropagation().
685// .prevent:                                        Call event.preventDefault().
686// .capture:                                        Add event listener in capture mode.
687// .self:                                           Only trigger handler if event was dispatched from this element.
688// .{keyCode | keyAlias}:                           Only trigger handler on certain keys.
689// .native:                                         Listen for a native event on the root element of component.
690// .once:                                           Trigger handler at most once.
691// .left:                                           (2.2.0+) only trigger handler for left button mouse events.
692// .right:                                          (2.2.0+) only trigger handler for right button mouse events.
693// .middle:                                         (2.2.0+) only trigger handler for middle button mouse events.
694// .passive:                                        (2.3.0+) attaches a DOM event with { passive: true }.
695
696// Method handler:                                  <button v-on:click="doThis"></button>
697// Object syntax (2.4.0+):                          <button v-on="{ mousedown: onMouseDown, mouseup: onMouseUp }"></button>
698// Inline statement:                                <button v-on:click="doThat('hello', $event)"></button>
699// Shorthand:                                       <button @click="doThis"></button>
700// Stop propagation:                                <button @click.stop="doThis"></button>
701// Prevent default:                                 <button @click.prevent="doThis"></button>
702// Prevent default without expression:              <form @submit.prevent></form>
703// Chain modifiers:                                 <button @click.stop.prevent="doThis"></button>
704// Key modifier using keyAlias:                     <input @keyup.enter="onEnter">
705// Key modifier using keyCode:                      <input @keyup.13="onEnter">
706// The click event will be triggered at most once:  <button v-on:click.once="doThis"></button>
707
708
709// <!-- Dynamically bind one or more attributes, or a component prop to an expression. -->
710// <!-- When used to bind the class or style attribute, it supports additional value types such as -->
711// <!-- Array or Objects. See linked guide section below for more details. -->
712
713// .prop:                                                    Bind as a DOM property instead of an attribute.
714// .camel:                                                   (2.1.0+) transform the kebab-case attribute name into camelCase.
715// .sync:                                                    (2.3.0+) a syntax sugar that expands into a v-on handler for updating the bound value.
716
717// Bind an attribute:                                        <img v-bind:src="imageSrc">
718// Shorthand:                                                <img :src="imageSrc">
719// With inline string concatenation:                         <img :src="'/path/to/images/' + fileName">
720// Class binding:                                            <div :class="{ red: isRed }"></div>
721// Style binding:                                            <div :style="{ fontSize: size + 'px' }"></div>
722// Binding an object of attributes                           <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
723// DOM attribute binding with prop modifier:                 <div v-bind:text-content.prop="text"></div>
724// Prop binding. "prop" must be declared in my-component:    <my-component :prop="someThing"></my-component>
725// Pass down parent props in common with a child component:  <child-component v-bind="$props"></child-component>
726// XLink:                                                    <svg><a :xlink:special="foo"></a></svg>
727
728
729// <!-- Create a two-way binding on a form input element or a component. -->
730// <!-- For detailed usage and other notes, see the Guide section linked below. -->
731
732// .lazy:    Listen to change events instead of input
733// .number:  Cast input string to numbers
734// .trim:    Trim input
735
736// <input v-model="message" placeholder="edit me">
737// <textarea v-model="message" placeholder="add multiple lines"></textarea>
738// <input type="checkbox" id="checkbox" v-model="checked">
739
740
741// <!-- Skip compilation for this element and all its children. -->
742// <!-- You can use this for displaying raw mustache tags. -->
743// <!-- Skipping large numbers of nodes with no directives on them can also speed up compilation. -->
744
745// <span v-pre>{{ this will not be compiled }}</span>
746
747
748// <!-- This directive will remain on the element until the associated Vue instance finishes -->
749// <!-- compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive -->
750// <!-- can be used to hide un-compiled mustache bindings until the Vue instance is ready. -->
751
752// <div v-cloak>{{ message }}</div>
753// [v-cloak] { display: none; }
754
755
756// <!-- Render the element and component once only. On subsequent re-renders, the element/component -->
757// <!-- and all its children will be treated as static content and skipped. This can be used to -->
758// <!-- optimize update performance. -->
759
760// <span v-once>This will never change: {{msg}}</span>
761// <my-component v-once :comment="msg"></my-component>
762
763
764/* *******************************************************************************************
765 * SPECIAL ATTRIBUTES
766 * https://vuejs.org/v2/api/#Special-Attributes
767 * ******************************************************************************************* */
768
769
770// <!-- The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to -->
771// <!-- identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses -->
772// <!-- an algorithm that minimizes element movement and tries to patch/reuse elements of the same type -->
773// <!-- in-place as much as possible. With keys, it will reorder elements based on the order change of -->
774// <!-- keys, and elements with keys that are no longer present will always be removed/destroyed. -->
775
776// <ul><li v-for="item in items" :key="item.id">...</li></ul>
777// <transition><span :key="text">{{ text }}</span></transition>
778
779
780// <!-- ref is used to register a reference to an element or a child component. The reference will be -->
781// <!-- registered under the parent component’s $refs object. If used on a plain DOM element, the -->
782// <!-- reference will be that element; if used on a child component, the reference will be component instance: -->
783
784// <!-- vm.$refs.p will be the DOM node -->
785// <p ref="p">hello</p>
786
787// <!-- vm.$refs.child will be the child comp instance -->
788// <child-comp ref="child"></child-comp>
789
790
791// <!-- Used on content inserted into child components to indicate which named slot the content belongs to. -->
792// <!-- Child markup: -->
793// <header><slot name="header"></slot></header>
794// <!-- Parent markup: -->
795// <app-layout><h1 slot="header">Here might be a page title</h1></app-layout>
796
797
798// <!-- Used for dynamic components and to work around limitations of in-DOM templates. -->
799// <component :is="currentView"></component>
800
801

Cheat Sheet for K8s
Cheat Sheet for Golang