ES6
let keyword
<script>
// es6 defines variables
// js definition: var has no scope, the same variable can be declared multiple times
// es6: let scope code is fast, the same variable can only be declared once
{
var a = 1
let b = 2
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
</script>
const
<script>
// Define constants: must be initialized and cannot be changed
const PI = 3.14
PI = 3 // Uncaught TypeError: Assignment to constant variable.
const C // Unvaught SyntaxError: Missing initializer in const declaration
</script>
Create Deconstruction Assignment
Deconstruction assignment is an extension of assignment operators that match and assign values to arrays/objects.
<script>
//array
// tradition
let a = 1, b = 2, c = 3
console.log(a, b, c)
//es6
let [x, y ,z] = [10, 20, 30]
console.log(x, y ,z)
// object
let user = {name: 'a', age: 18}
// tradition
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// es6
let{name, age} = user // Note: The variable of the node must be a property in user
console.log(name, age)
</script>
Template String
Template string, which can define ordinary string, multi-line string, add variables and expressions, call functions;
<script>
// Multiline string
let str1 = `hello,
es6`
console.log(str1)
// String Insert Variable/Expression
let name = "Zhang San"
let age = 18
let str2 = `You are? ${name},This year ${age + 10}year`
console.log(str2)
// Call function in string
function f(){
return "have function"
}
let str3 = `str3 = ${f()}`
console.log(str3)
</script>
object
<script>
const name = "Zhang San"
const age = 18
// Traditional way
const p1 ={name: name, age: age}
console.log(p1)
// es6
const p2 = {name, age}
console.log(p2)
</script>
Method abbreviation
<script>
// tradition
const person1 = {
sayHi:function(){
console.log("traditional method")
}
}
// es6
const person2 = {
sayHi(){
console.log("es6")
}
}
person1.sayHi()
person2.sayHi()
</script>
Object Extension Operator
<script>
// 1. Copy Object
let person1 = {"name": "Zhang San", age: 18}
let person2 = {...person1}
console.log(person2)
// 2. Merge Objects
let name = {"name": "Zhang San"}
let age = {age: 18}
let person3 = {...name, ...age}
console.log(person3)
</script>
Arrow function
<script>
// tradition
var f1 = function(a, b){
let sum = a + b
return sum
}
console.log(f1(1, 2))
// es6
var f2 = (a, b) => a+b
console.log(f2(3, 4))
</script>
Vue
Introduction
1. Create html pages to generate base code
2. Introducing vue.js dependency
3. Create div Tags
4. Write vue code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- Development Environment Version with helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// Create a vue object
new Vue({
el: '#Scope of role of app', //bind vue
data: { // Define the model data displayed on the page
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Decimation code fragment
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
Basic Grammar-Instructions
1. One-way data binding v-bind
The v-bind attribute is called an instruction. Instruction with prefix v-
Either use the interpolation {{}} expression for data rendering or use the v-bind directive, which is abbreviated as a colon. 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-bind One-way data binding -->
<h1 v-bind:title="message">
{{conent}}
</h1>
<!-- Abbreviation -->
<h2 :title="message">
{{conent}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
conent: 'I'm the title',
message: 'Page loaded in' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
2. Bidirectional data binding v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="aObject.keyword"/>
<input type="text" v-model:value="aObject.keyword"/>
<p>{{aObject.keyword}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
aObject:{
keyword: 'Key Value'
}
}
})
</script>
</body>
</html>
condition
v-if/v-else
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Import Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="message==='A'">yes A</h1>
<h1 v-else>No A</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:'A'
}
})
</script>
</body>
</html>
loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--Take Object from Array -->
<li v-for="(array, index) in arrays">
{{array.messages}}--{{index}}
</li>
</div>
<!-- Import Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
arrays:[
{messages:'aa'},
{messages:'bb'}
]
}
})
</script>
</body>
</html>
vue7 big attribute
JavaScript
Summary
JavaScript is a weakly typed scripting language; JavaScript is designed to run in a browser.
Environment: IDEA Configuration ES6;
principle
Everything in javascript is an object, there is only one global scope window object, and the global variables are in the window object.
Format:
Object: {}
Array: []
Key-value pairs: key:value
External introduction of JavaScript.js
//External introductiondata type
Numeric, Text, Graphics, Audio, Video...
var variable
var a = 1;
let a = 1; // local variable
number
123 //Integer
12.3 //Decimal
1.12e //Scientific Counting
-99 //Complex
NAN // not a number is not a numeric value
Infinity//Infinity
Character string
'abc' "abc"
Boolean Value
true false
Logical operators
&And
|| or
! wrong
Comparison operator
=assignment
==equal (different types, same values)
===Absolutely equal (same type, same value)
null and undefind
null empty
Undefined undefind
array
//Don't need the same object, report undefind across boundaries
var arr = [1, 2, "sda", null, true];
object
//Braces, separated by commas between each property, last not needed
var person = {
name:"123",
tage:[1, 2, 3]
}
Character string
String is immutable
//Multiline string
var m =
Hello sda as sd
//Template String
let name = "zui";
let msg ='Hello, &{name}'
str.length //string length
str.substring(1)//string interception, 1 to last
str.substring(1,3)//string interception
array
// Array can contain any type
//If arrlength is assigned, the size of the array changes and small elements are lost;
arr.indexof()//Get subscript index on first occurrence from element
arr.slice()//intercepts part of a string and returns a new array
arr.push()//press into tail
arr.pop()//eject tail element
arr.unshift()//press into head
arr.shift()//pop-up head element
arr.sort()//sort
arr.reverse()//element inversion
arr.concat()//stitch, returning a new array
arr.join('-')//Print stitch array, using a specific string to connect
//Multidimensional Array
arr = [[1, 2], [3, 4]];
arr[1, 1]; // Visit
object
//Several key-value pairs
// {...} represents an object with key-value pairs describing the attribute xxx:xxx, multiple attribute commas separated, and the last one unused.
//All keys are strings and values are arbitrary objects!
var object name = {
Property name: Property value,
Property name: Property value,
Property name: Property value
}
var person = {
name:'zui',
age:20,
email:'123@.163.com'
}
delete.person.name //dynamic deletion
person.aa ='Add'//Add dynamically
'age'in person//Determine if element/method person owns
person.hasOwnProperty('toString')//Determine if an attribute is owned by the object itself
Process Control
// if judgment
let age = 3;
if(age < 3){
alert("haha");
}else if(age < 5){
alert("less than 5");
}else{
alert("otherwise");
}
// while loop
while(age<100){
console.log(age);
}
// for loop
for(let i = 0; i < 100; i++){
console.log(i);
}
// forEach loop
var age = ['1', '2', '3'];
age.forEach(function(value)){
console.log(value);
}
// for in take subscript
for(var num in age){
console.log(age[num]);
}
// for of value
for(var num of age){
console.log(num);
}
Map and Set
ES6 New Features
var map = new Map([['a', 100], ['b', 90], ['c', 80]]);
var name = map.get('a'); // Value by key
console.log(name);
// Set Unordered Non-repeating Collection
var set = new Set([1, 3, 2, 1, 1]);
console.log(set);
API Method
The alert() //method is used to display a warning box with a specified message and an OK button
console.log()//output
isNaN()//Determine if this value is NaN
function
Function Definition
//If the function does not perform return, the result returns undefind
function hanshu(x){
if(x > 0){
return x;
}else{
return -x;
}
}
hanshu(10);
// function(x){} This is an anonymous function that gives a result
var a = function(x){
if(x > 0){
return x;
}else{
return -x;
}
}
a(10);
// Javascript has no parameters and can have multiple parameters. The parameter problem needs to be addressed.
//No parameters exist, exception avoidance can be customized
var a = function(x){
if(typeof x!== 'number'){
throw 'Not a number';
}
if(x > 0){
return x;
}else{
return -x;
}
}
//There are multiple arguments, and all arguments passed in by arguments are an array
var hanshu(x){
if(aguments.length>2){
thow '>2'
}
}
Scope of variables
//Nested functions are accessible within variable scope functions within functions. Internal and external functions have the same name, starting with themselves.
//There is only one global scope window object, all global variables are bound under the global object window
//If other files bind the same global variables, they will conflict. Solve, define a unique global variable, and put all your code in.
//Unique global variable
var zui = {};
//Define global variables
zui.name = 'zuimeng';
zui.add = hanshu(){
retrun 0;
}
// let local scope resolves local variable conflicts: out-of-the-box code blocks can also be used
// const constant
// this points to the one calling it
// apply can specify this to point to
Internal Objects
Date
// Date
var now = new Date();
now.getTime(); // time stamp
JSON
// JSON Lightweight Data Exchange Format
var user ={
namem:zui,
age:1
};
//Object converted to JSON string
var jsonUser = JSON.stringify(user);
// json string to object
var ovj = JSON.parse('value of jsonUser');
ajax
Different object-oriented javascript
Each function has a prototype property that points to the prototype object of the function.
Prototype Inheritance
var student = {
name:'aa',
age:3,
run:(){
console.log(this.name + 'run...');
}
var zui = {
name:'zui'
}
// The prototype of zui is student
zui.__proto__ = student;
class Inheritance
class Student{
constructor(name){
this.name = name;
};
hello(){
console.log('aa');
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new Student('xiaohong');
class XiaoStudent extends Student{
constructor(name,age){
super(name);
this.age;
}
}
Operating on BOM objects
BOM: Browser Object Model
Window object//on behalf of browser window
navigator object//encapsulates browser information
Screen // for screen size
location //URL information representing the current page
location.assign('')//Set a new address
document //Current Page HTML, DOM Tree
Document. Cookies; // Get cookie s
History //browser history
The principle of hijacking cookie s,
Through documgo. Cookie acquisition, ajax upload
Server-side cookie setting: httpOnly masking
Operating on DOM objects
DOM: Document Object Model
A browser web page is a Dom tree structure
Update Dom Node
Traversing Dom Nodes: Getting Dom Nodes
Remove Dom Node
Getting Dom Nodes using the documents object method
1. Get Nodes
document.getElementById(id); //Return access to the first object with the specified ID
document.getElementsByName(name); //Return a set of nodes with the specified name Note the spelling:Elements
document.getElementsByTagName(tagname); //Returns a collection of objects with the specified tag name Note the spelling:Elements
document.getElementsByClassName(classname); // Returns a collection of objects with the specified class name Note the spelling:Elements
2. Modification
var a = document.getElementById(id);
a.innerText ='Updated Text'; // Modify Text
a.style.color ='#ff0000'; // modify style
3. Delete
a.removechild('Need to get child nodes'); // Delete child nodes through parent nodes
4. Insert Node
If the Dom node is empty, elements can be added through innerHtml. Dom is not empty and can be overwritten.
a.appendchiled('node');
document.insertBefore(newNode,referenceNode); //Insert a node before a node
a.parentNode.appendChild(newNode); //Add child nodes to a node
5. Create Nodes
var b = document.createElement('p'); // Fill in the label name
b.id ='idname'; // Add attributes to labels
Action Form
Form:
Text box text
Drop-down box
Radio radio
Multi-checkbox
Hidden field hidden
Password box password
...
a.value //Get node, get value
MD5 encryption requires external introduction of MD5 js files first
a.value = md5(a.value); // Front-end bits are encrypted when submitted, so you can see the code you are using.
Mad P25, not understood.
jQuery
There are a lot of JavaScript functions in the jQuery Library
Environment: Get jQuery, introduce js file of jQuery
Get Elements
$(). clock(); // css selector + event;
// Selector in css
$('p'). clock(); // tag chooser
$('#id'). clock(); // id selector
$('.class'). clock();// class selector
Event, operation DOM; You can check the documentation.
Document Tool Station: https://jquery.cuishifeng.cn/
How to consolidate Js
See the game source, pick websites directly
Layer Pop-up Component
Element-UI
Ant Design