Two way binding principle of VUE and its application
vue implements data hijacking through Object.defineProperty(). It mainly uses its set and get properties. If you are not familiar with it, Please click here for more usage.
You can see how to use it clearly in the following examples:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&l ...
Posted by tjohnson_nb on Sat, 30 Nov 2019 16:41:27 -0800
Handwritten vue source-bidirectional data binding (simple implementation)
We've been asking vue about the principle of two-way data binding. Today, I'm just handwriting a two-way data binding and I'll get a better understanding of it.
Because the current vue technology is also constantly updated, now updated to 3.0, the internal method logic has also changed a lot, so as the development of us, in fact, we master the ...
Posted by kbrij on Tue, 26 Nov 2019 19:32:36 -0800
JavaScript implementation back to top effect
Copy Taobao back to top effect
Requirement: when the scroll bar reaches a certain position, the sidebar is fixed at a certain position, and then when it slides down to a certain position, the back to top button will be displayed. After clicking the button, the page will slide to the top dynamically, from fast to slow.
Train of thought:
1. js co ...
Posted by rowanparker on Tue, 26 Nov 2019 12:59:23 -0800
Electronic Vue silent printing 2019 latest solution (including source code)
Project environment
node 10.15.3yarn 1.15.2win10Code completion time: April 18, 2019
Don't talk too much, put the source code first
GitHub
https://github.com/951477037/electron-print
git clone https://github.com/951477037/electron-print.git
//Installation dependency
yarn
//Operation item
yarn run dev
//Packing project
yarn run build
directory ...
Posted by mrwowza on Mon, 25 Nov 2019 10:05:56 -0800
Understanding of event mechanism
Capture phase - > target phase - > bubbling phase - > default behavior
Non IE:
IE:
Block event default behavior
wrong IE: event.preventDefault()
IE: event.returnValue=false;
Stop bubbles
wrong IE: event.stopPropagation ()
IE: event.cancelBubble=true;
Bubble phase registration event
Non IE:
event.addEventLis ...
Posted by yakabod on Mon, 25 Nov 2019 08:00:33 -0800
addEventListener custom event in JavaScript
addEventListener custom event in JavaScript
In js events, we first think of the common events such as click, dblclick, mouseover, mouseout, mouseenter, mouseleave, mousedown, mouseup, mousemove, wheel, context menu (when we click the right mouse button). Sometimes these predefined events can not meet our needs when we provide sdk for the third ...
Posted by jack5100nv on Sun, 24 Nov 2019 07:56:54 -0800
JavaScript Design pattern part 1: Singleton pattern
What is singleton mode
Singleton Pattern ensures that a class has only one instance and provides a global access point to access it
Singleton pattern is a simple and easy to understand design pattern, but its usage scenarios are very wide, including the famous Vuex also uses singleton pattern.
This article introduces two implementation methods ...
Posted by ztealmax on Sun, 24 Nov 2019 07:24:59 -0800
High performance javascript -- programming practice
-setTimeout() and settimeInterval() pass functions instead of strings as arguments
Extension:What's the difference between setInterval() and setInterval() using the setTimeout() method?
Accuracy problem?
Micro task and macro task problems?
Macro task: including overall code script, setTimeout, setInterval
Micro-task (micro task):Promise, proces ...
Posted by Johntron on Thu, 21 Nov 2019 23:13:32 -0800
Error writing js to html page Uncaught TypeError: Cannot set property 'innerHTML' of null
An error occurred while getting the label and modifying the value of the label through * * * getElementById() * * * in js:Uncaught TypeError: Cannot set property 'innerHTML' of null
Because the tag is obtained according to the id, just change the class to id
Of course, it can also be modified directly according to the method of ...
Posted by troinfo on Wed, 20 Nov 2019 12:55:32 -0800
A simple slider component
Let's take a look at a picture:
There are many ways to achieve this effect, such as directly using < input type = "range" / > to modify the style, or using the following methods to modify
style
HTML code:
<div class="slider">
<button class="slider-track"></button>
<button class="slider-thumb">&l ...
Posted by Daegalus on Wed, 20 Nov 2019 11:32:15 -0800