Notes from: Vue quick start https://www.bilibili.com/video/BV18E411a7mC Video sorting
1. css
- Less Chinese network
- Quick start to Less
- webpack packaging
2. JavaScript
2.1. Commissioning
// Print variables in the browser console console. log(num);
2.2. Data type
Number
// js does not distinguish between decimal and integer Number 123 // integer 123.1 // Floating point number 1.123e3 // Scientific counting method -99 // negative NAN // not a number Infinity // infinity
character string
'abc' "abc" // Escape character \t \n \u4e2d // \U###### Unicode characters \x41 // Ascll character // Multiline string let msg = `I love you! China!` // Template string (must be inside quotation marks of multiline string) <script> 'use strict' let name = "Zhang San" let msg = `How do you do, ${name}` console. log(msg) </script>
Boolean value
true false
Logical operation
&& || !
Comparison operator
= // assignment == // Equal to (if the type is different and the value is the same, it will also be judged as true) === // Absolutely equal to (same type, same value, same result) true) NaN === NaN // false isNaN( NaN) // true
null and undefined
null // empty undefined // Undefined
array
let arr = [ 1, 2, 'a', "hello", null, true] // When the array is out of bounds, it is undefined arr.length // Array length arr.indexOf( 2) // Subscript index arr.slice() // section arr.push() // Press in to the rear arr.pop() // Pop up an element at the end arr.shift() // Press into the head arr.unshift() // Pop up an element in the header arr.sort() // sort arr. join() // Use a specific number of character splices to form a string arr.concat() // Splice array ...
object
All keys in JavaScript are strings and values are arbitrary objects!
var person = { name: "xiaofan", age: 3, tags: [ 'js', 'java', 'web', '...'] } // Object Assignment person. sex = 'nv' // Use non-existent object properties person. hobby undefined // Dynamic deletion attribute delete person. name // Add attributes dynamically person. info = 'info'; // Judge whether the attribute value is' xxx 'in XXX in this object! 'age' in person (person. hasOwnProperty( 'age'))
2.3. Strict inspection mode
2.4. Process control
let arr = [ 100, 200, 'a', 'b', true] for ( let i = 0; i < arr. length; i++) { console. log(arr[i]) } console. log( "============") for ( let i in arr) { console. log(arr[i]) } console. log( "============") for ( let arrElement of arr) { console. log(arrElement) } console. log( "============") arr. forEach( function ( e){ console. log(e) })
2.5. Map and Set
<script> "use strict" let map = new Map([[ 'tom', 1000],[ 'jack', 999],[ 'Bob', 888]]) let score = map. get( 'tom') console. log(score) map. set( 'admin', 123456) map. delete( "tom") let set = new Set([ 1, 2, 3, 4, 5]) set. delete( 1) console. log(set. has( 3)) console. log( "======") for ( let number of set) { console. log(number) } </script>
- Note: the difference between for.. in and for.. of when traversing arr
2.6. Function
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script> // Definition method 1 function f1( x) { console. log( typeof x) if (x >= 0) { return x } else { return -x } } // Definition mode 2 // typeof detects the type of the variable let f2 = function ( x) { // Throw exception manually if ( typeof x !== "number") { throw "Not a num!" } if (x >= 0) { return x } else { return -x } }; // arguments gets all parameters function f3( x) { console. log(x) console. log( typeof x) console. log( "=====") console. log( arguments) } // ... rest ID to get the remaining parameters function f4( x, ...rest1) { console. log(x) console. log( typeof x) console. log( "=====") console. log(rest1) } </script> </head> <body> </body> </html>
2.7. Scope of variable
JQuery. ===> $()
2.8. Method
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script> 'use strict' // Method 1 let xf1 = { name: 'Xiao Fan', birth: 1991, // method age: function ( ) { let now = new Date(). getFullYear(); // this points to the object that calls it return now - this. birth; } } // Method 2 function getAge( ) { let now = new Date(). getFullYear(); // this points to the object that calls it return now - this. birth; } let xf2 = { name: 'Xiao faner', birth: 2000, age: getAge } // xf2.age() ok // getAge() error // apply changes the direction of this in the getAge method let result1 = getAge. apply(xf1, []); let result2 = getAge. apply(xf2, []); console. log(result1, result2) </script> </head> <body> </body> </html>
2.9. Internal objects
// Standard object typeof 123 "number" typeof '123' "string" typeof true "boolean" typeof NaN "number" typeof [] "object" typeof {} "object" typeof Math. abs "function" typeof undefined "undefined"
2.9.1. Date
// Date <script> let now = new Date(); now. getFullYear(); now. getMonth(); // 0 ~ November now. getDate(); // day now. getDay(); now. getHours(); now. getMinutes(); now. getSeconds(); now. getTime(); // Get timestamp now. toLocaleString() now. toUTCString() </script>
2.9.2. JSON
<script> 'use strict' let user = { name: "xiaofan", age: 3, set: 'male' } // Object to json string let jsonUser = JSON. stringify(user); // Convert Json string to object let userBean = JSON. parse( '{"name":"xiaofaner","age":28,"set":"male"}'); </script>
2.9.3. Ajax
- Native js writing, xhr asynchronous request
- jQuery encapsulated method $("#name").ajax("")
- axios request
2.10 object oriented programming
- Object oriented prototype inheritance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script> 'use strict' let student = { name: "qinjiang", age: 3, run: function ( ) { console. log( this. name + " run...") } }; let xf = { name: "xiaofan" } // The prototype object of xf is student xf. __proto__ = student // Add a new method to ss function ss( name) { this. name = name; } ss. prototype. hello = function ( ) { alert( "hello") } </script> </head> <body> </body> </html>
- Class oriented inheritance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script> 'use strict' class Student { constructor( name) { this. name = name; } hello( ) { alert( 'hello student..'); } } class SmallStudent extends Student { constructor( name, grade) { super(name); this. grade = grade; } myGrade( ) { alert( "I'm a pupil.."); } } let student = new Student( "xiaofan") let smallStudent = new SmallStudent( "xiaofaner", 22) </script> </head> <body> </body> </html>
Essence: or prototype
2.11. Operating BOM object
BOM (browser object model): Browser Object Model
Window browser window
navigator encapsulates browser information
Screen screen size
location represents the URL information of the current page
host: "www.baidu.com" hostname: "www.baidu.com" href: "https://www.baidu.com/" origin: "https://www.baidu.com" pathname: "/" port: "" protocol: "https:" reload() //Reload page location.assign( 'https: //jd.com ') / / set a new address
document represents the current page
history
history.back() // back off history.forward() // forward
2.12. Operating DOM objects (core)
-
DOM: Document Object Model
-
Get node
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> </head> <body> <div id="father"> <h1>Title 1 </h1> <p id="p1">p1 </p> <p class="p2">p2 </p> </div> <script> let h1 = document. getElementsByTagName( "h1"); let p1 = document. getElementById( "p1"); let p2 = document. getElementsByClassName( "p2"); let father = document. getElementById( "father"); let children = father. children // Gets all child nodes under the parent node father. lastChild father. firstChild </script> </body> </html>
- Update node
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> </head> <body> <div id="id1"> </div> <script> let div = document. getElementById( "id1") // Operation text div. innerText = "123"; div. innerHTML = "<strong>123</strong>" // Operation JS div. style. color= 'red' div. style. fontSize= '22px' div. style. padding= '2em' </script> </body> </html>
- Delete Vertex
- Insert Knot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> </head> <body> <p id="js">JavaScript </p> <div id="list"> <p id="se">JavaSE </p> <p id="ee">JavaEE </p> <p id="me">JavaME </p> </div> <script> let js = document. getElementById( 'js'); let list = document. getElementById( 'list'); // Append node // list.appendChild(js) let newP = document. createElement( 'p'); newP. id= 'newP'; newP. innerText = 'Hello xiaofan!'; list. appendChild(newP) // Set background color let body = document. getElementsByTagName( "body")[ 0]; body. style. backgroundColor = "#ff00f0" // Insert a new node in front of a node let ee = document. getElementById( "ee"); list. insertBefore(js, ee); </script> </body> </html>
2.13. Operation form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> </head> <body> <form method="post"> <p> <span>user name: </span> <input type="text" id="username"/> </p> <p> <span>Gender: </span> <input type="radio" name="sex" value="1" id="boy" checked /> male <input type="radio" name="sex" value="2" id="girl" /> female </p> </form> <script> let input_text = document. getElementById( "username"); let boy = document. getElementById( "boy"); let girl = document. getElementById( "girl"); console. log(boy. checked); boy. checked = true </script> </body> </html>
- Hide the field form submission verification and encrypt the password
// MD5 remote library https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--md5 Tool class--> <script src="myMd5.js"> </script> </head> <body> <form method="post" onsubmit="return check();"> <p> <span>user name: </span> <input type="text" id="username" name="username"/> </p> <p> <span>dense Code: </span> <input type="password" id="input-password"/> </p> <input type="hidden" id="md5-password" name="password"/> <input type="submit"> </form> <script> function check( ) { let name = document. getElementById( "username"); let inputPwd = document. getElementById( "input-password"); let md5Pwd = document. getElementById( "md5-password"); // password.value = md5(password.value) md5Pwd. value = md5(inputPwd. value); console. log(name. value) console. log(inputPwd. value) console. log(md5Pwd. value) return false } </script> </body> </html>
be careful:
1. You can copy the remote library to the original!
2.onsubmit binds a submission detection function. When this function returns false, the form request will be intercepted. When this function returns true, the form will be submitted normally
3. JQuery
3.1. The first Jquery program
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"> </script> </head> <body> <a href="" id="test-jquery">Point me </a> <script> // Formula $(selector). Action (method) $( "#test-jquery"). click( function ( ) { alert( "hello jquery!") }) </script> </body> </html>
3.2. Selector
3.3. Events
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"> </script> <style> #divMove{ width: 500px; height: 500px; border: 1px solid red; } </style> </head> <body> <!--Requirement: obtain the current coordinate of the mouse--> mouse: <span id="mouseMove"> </span> <div id="divMove"> Move around here </div> <script> $( "#divMove"). mousemove( function ( e) { $( "#mouseMove"). text( `x: ${e.pageX}, y: ${e.pageY}`) }) </script> </body> </html>
3.4. JQuery operation DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"> </script> </head> <body> <ul id="test-ul"> <li class="js">JavaScript </li> <li name="python">Python </li> </ul> <script> // Get value let text1 = $( "#test-ul li[name=python]"). text(); let text2 = $( "#test-ul li[class=js]"). text(); console. log(text1) console. log(text2) // Set value $( "#test-ul li[class=js]"). text( "JS"); // Set css Style $( "#test-ul li[name=python]"). css({ "color": "#ff0011", "background": "blue" }) // Display and hiding of elements $( "#test-ul li[name=python]"). show() $( "#test-ul li[name=python]"). hide() // More view documents // https://jquery.cuishifeng.cn/ </script> </body> </html>
- Source code house
- Element UI
- Ant Design
- Bootstrap
3.5. Ajax
- AJAX = Asynchronous JavaScript and XML.
- Ajax is not a new programming language, but a technology for creating better, faster and more interactive Web applications.
- jQuery is not a producer, but a nature porter.
- The essence of jQuery Ajax is XMLHttpRequest, which is encapsulated and easy to call!
3.5.1. Fake Ajax
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>xiaofan </title> </head> <body> <script type="text/javascript"> 'use strict' window. onload = function( ){ let myDate = new Date(); document. getElementById( 'currentTime'). innerText = myDate. toLocaleString() }; function LoadPage( ){ let targetUrl = document. getElementById( 'url'). value; console. log(targetUrl); document. getElementById( "iframePosition"). src = targetUrl; } </script> <div> <p>Please enter the address to load: <span id="currentTime"> </span> </p> <p> <input id="url" type="text" value="https://www.baidu.com/"/> <input type="button" value="Submit" onclick="LoadPage()"> </p> </div> <div> <h3>Load page location: </h3> <iframe id="iframePosition" style="width: 100%;height: 500px;"> </iframe> </div> </body> </html>
3.5.2. Ajax format
jQuery.ajax(...) Some parameters: url: Request address type: Request method, GET,POST(1.9.0 Later use method) headers: Request header data: Data to send contentType: The content encoding type of the message to be sent to the server(default: "application/x-www-form-urlencoded; charset=UTF-8") async: Asynchronous timeout: Set request timeout (MS) beforeSend: Function executed before sending the request(overall situation) complete: Callback function executed after completion(overall situation) success: Callback function executed after success(overall situation) error: Callback function executed after failure(overall situation) accepts: Send the request to the server and tell the server the data type acceptable to the current client dataType: Converts the data returned by the server to the specified type "xml": Convert the content returned by the server into xml format "text": Convert the content returned by the server to normal text format "html": Convert the content returned by the server into normal text format and insert DOM If it contains JavaScript Tag, it will try to execute. "script": Try to treat the return value as JavaScript To execute, and then convert the content returned by the server into normal text format "json": Convert the content returned by the server into the corresponding JavaScript object "jsonp": JSONP Format use JSONP When calling a function as "myurl?callback=?" jQuery Will automatically replace ? Give the correct function name to execute the callback function
4. Vue
4.1. First Vue program
- idea install vue plug-in
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> {{message}} </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { message: 'hello vue!' } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <span v-bind:title="message">Hover the mouse for a few seconds to view the prompt information of dynamic binding here! </span> </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { message: 'hello vue!' } }) </script> </body> </html>
4.2. Basic grammar
- if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <h1 v-if="type==='A'">A </h1> <h1 v-else-if="type==='B'">B </h1> <h1 v-else="type==='C'">C </h1> </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { message: 'hello vue!', type: 'A' } }) </script> </body> </html>
- for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <p style='color:blue' v-for="item in items">{{item.message}} </p> </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { message: 'hello vue!', type: 'A', items: [{ message: 'Xiao Fan'},{ message: 'Trabecula'},{ message: 'Xiao Hong'}] } }) </script> </body> </html>
- event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <button v-on:click="sayHi">Point me </button> </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { message: 'hello vue!', type: 'A', items: [{ message: 'Xiao Fan'},{ message: 'Trabecula'},{ message: 'Xiao Hong'}] }, methods: { sayHi: function ( ) { alert( this. message) } } }) </script> </body> </html>
- Bidirectional binding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <input type="text" v-model="message"/> {{message}} </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { message: "" } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <select v-model="selected"> <option value="" disabled>---Please select--- </option> <option>A </option> <option>B </option> <option>C </option> </select> {{selected}} </div> <script> 'use strict' /*Model data*/ let vue = new Vue({ el: "#app", data: { selected: "" } }) </script> </body> </html>
4.3. vue components
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <!--Import vue--> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script> </head> <body> <!--view Layer template--> <div id="app"> <xiaofan v-for="item in items" v-bind:xf="item"> </xiaofan> </div> <script> 'use strict' Vue. component( "xiaofan", { // props is required to pass data to components props: [ 'xf'], template: '<h1>{{xf}}</h1>' }) /*Model data*/ let vue = new Vue({ el: "#app", data: { items: [ 'java', 'linux', 'python'] } }) </script> </body> </html>