1.开发工具
vscode地址 :https://code.visualstudio.com/download, 下载对应系统的版本windows一般都是64位的
安装可以自选目录，也可以使用默认目录
插件：
输入 Chinese，中文插件
安装： open in browser，直接右键文件，选择
F12打开控制台就能看到
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log("人依远戍须看火");</script>
</body>
</html>
2.基本数据类型1️⃣
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log("人依远戍须看火");// 变量let name = "张三"console.log(name)// stringconsole.log(typeof name)// numberlet balance = 100console.log("余额", balance);console.log(typeof balance);// 常量const PI = 3.14console.log("PI", PI);// booleanlet tv = trueconsole.log(tv);console.log(typeof tv);// 对象let person = {name:"王五",age:18,weight:62.5}console.log(person);console.log(typeof person);// Map// Map相对干对象提供了更灵活、有序、高效的键值对存储和操作方式，当需要在大量键值对中快速查找或删除特定键值对时，Map比对象更高效// Map提供了一些便捷的方法来操作键值对，如：get()、set()、delete()// Map提供了一些便捷的迭代方法，如：forEach()、keys()、values()、entries()let boy = new Map([["name","李四"],["age","20"]])console.log(boy);console.log(typeof boy); </script>
</body>
</html>
3.基本数据类型2️⃣
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Set() 集合let number666 = new Set([1,2,3,4,1,2])console.log(number666);let string666 = new Set([1,2,3,4,'1','2'])console.log(string666);// arr 数组let arr = ["a","b","c",1,"a"]console.log(arr);// function 函数function add(x,y){m=x+yconsole.log(m); }add(5,7)// 类 class Person{constructor(name, age){this.name = namethis.age = age}info(){console.log("name",this.name,"age",this.age);}}let person1 = new Person("秦始皇", 999)person1.info()let person2 = new Person("汉武帝", 888)person2.info()</script>
</body>
</html>
4.函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//函数function getweb(){let web = "wwww.baidu.com"return web}console.log(getweb());// 传参,有默认值function add(number=5){return number+10}console.log(add(7));// 匿名函数let sub=function(x,y){return x-y}console.log(sub(7,2));// 箭头函数，把function换成箭头，并放（）后面let plus = (a,b)=>{return a+b}console.log(plus(11,7));// 隐式函数，箭头函数去掉{}跟returnlet cheng = (m,n)=>m*nconsole.log(cheng(11,7));</script>
</body>
</html>
5.数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 数组定义let arr = [10,11]console.log(arr);// push 向数组末尾添加一个或多个元素，并返回修改后数组的长度let arrlength = arr.push(12,13,14)console.log("arr",arr);console.log("length",arrlength);// unshift 想数组开头添加一个或 多个元素，并返回数组的长度let arrunshift = arr.unshift(8,9)console.log("arr",arr);console.log("unshift",arrunshift);// shift 删除数组中第一个元素，并返回被删除的元素let delement = arr.shift()console.log("arr",arr);console.log("shift",delement);// pop 删除数组中 最后一个元素，并返回被删除的元素let popement = arr.pop()console.log("arr",arr);console.log("pop",delement);// 删除指定元素，splice, 第一个参数-删除元素的索引位置，第二个参数-删除元素的数量，返回删除后的数组let delArr = arr.splice(2,2)console.log("arr",arr);console.log("delArr",delArr);// reverse, 颠倒数组中元素的顺序arr.reverse()console.log(arr);// 数组中元素按照首字母顺序排序let arr2 = ["banana","apple","","orange"]arr2.sort()console.log(arr2);// 比较函数(a,b)=>a-b,接收两个参数a,b用于比较两个元素的大小，返回a-b的结果决定了sort()方法的排序顺序// 若 a<b 则 a-b 是一个负数，表示a应该在b前面// 若 a=b 则 a-b 是0，位置保持不变// 若 a>b 则 a-b 是一个正数，表示a应该在b后面let arr3 = [5,20,13,14]arr3.sort((a,b)=>a-b)console.log(arr3);// 筛选符合条件的元素，返回一个新数组let arr4 = [10,11,12,13,14,15]let newArr = arr4.filter((value)=>{return value > 12})console.log("newArr",newArr);// 使用for循环便利循环数组let arr6 = ["一行白鹭上青天","鹅鹅鹅曲项向天歌",99,"杜甫"]for(let value of arr6){console.log("for...of",value);}// forEacharr6.forEach((value)=>{console.log("forEach",value);})arr6.forEach((value,index)=>{console.log("forEach",index,value);}) </script>
</body>
</html>
6.Set
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Set集合{}let fruits = new Set(["apple","orange","banana"])console.log(fruits);// 增加fruits.add("mango")console.log(fruits);// 删除fruits.delete("banana")console.log(fruits);// 判断是否存在console.log(fruits.has("apple"));// 大小console.log(fruits.size);// set -> 数组let arr = Array.from(fruits)console.log("arr",arr);let arr2 = [...fruits]console.log("arr2",arr2);// 扩展运算符：展开可迭代对象let net = "www.baidu.com"let netAll = [...net]console.log(netAll);console.log([..."一行白鹭上青天"])// forfor(let f of fruits){console.log("for-of",f);}// forEachfruits.forEach((value,index)=>{console.log(value,"index",index);})// 去重let numberArr = [1,2,3,4,3,2]let nuberSet = new Set(numberArr)console.log(nuberSet);</script>
</body>
</html>
7. map
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Maplet student = new Map([["name","朱元璋"],["gender","男"],["age",1000]])console.log(student);// 增加student.set("height",180)console.log(student);// 删除student.delete("gender")console.log(student);// 判断是否存在console.log(student.has("gender"));// 键 唯一性,新增相同键名的会替换掉value值student.set("age",11111)console.log(student);// 大小console.log(student.size);// Map集合转换成 数组let arrMap = Array.from(student)console.log(arrMap);let arr = [...student]console.log(arr);// 循环 for(let i of student){console.log("for...of",i);}// 解构for (let [key,value] of student) {console.log("key",key,"value",value);}student.forEach((value,key) => {console.log("forEach key",key,"value",value);});student.clear()console.log(student);</script>
</body>
</html>
8.对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 对象let user ={name:"曹操",gender:"男",web:"www.baidu.com"}console.log(user);user.height = 175console.log(user);// 修改user.web = "www.bilibili.com"console.log(user);// 删除delete user.genderconsole.log(user);// 是否存在let has = "name" in userconsole.log(has);// 属性数量,Object.keys(user).lengthconsole.log(Object.keys(user).length);// for in 循环遍历对象// for of 用于遍历可迭代对象[如数组/Set/Map/字符串等]// for in 用于遍历对象的可枚举属性for(let key in user){console.log("for...in",key,user[key]);}console.log(Object.entries(user));Object.entries(user).forEach(([key,value])=>{console.log("forEach",key,"value",value);})// 清空对象user = {}console.log(user);</script>
</body>
</html>
9.私有属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>class Person {name #web //私有属性,是指仅在类的内部可以访问和操作的属性,外部无法直接访问和修改constructor(name,web){this.name = namethis.#web = web}info(){// return "姓名:" + this.name + " 个人网站:" +this.web// `` esc下面符号return `姓名:${this.name} 个人网站:${this.#web}`}// 固定写法,存取器getter获取私有属性get web(){return this.#web}// 使用存取器setter设置私有属性set web(value){this.#web=value}}let person = new Person("刘备","www.liubei.com")console.log(person.web);person.web = "sunquan.com"console.log(person.web);// 使用拼接方式, 模版字符串console.log(person.info());</script>
</body>
</html>
10. 继承extends
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 父类class Person{name genderconstructor(name,gender){this.name = namethis.gender = gender}sleep(){return `${this.name},休息中...`}}// 子类class 赵匡胤 extends Person{webconstructor(name, gender, web){super(name,gender)//调用父类构造函数this.web = web}eat(){return `${this.name} 正在吃饭...`}}let zky = new 赵匡胤("赵光义","男","www.dasong.com")// 调用子类方法console.log(zky.web);console.log(zky.eat());// 调用父类方法console.log(zky.gender);console.log(zky.sleep());</script>
</body>
</html>
11.解构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 数组结构let [x, y] = [1,2]console.log("x",x, "y",y);let [,,c] = [10,20,30]console.log("c:",c);let [A, ...B] =[1,2,3,4,5,6]console.log("A:",A, "B:",B);let [x2,y2=200] = [100]console.log("x2:",x2,"y2:",y2);// 两数交换let x3 = 10let y3 = 20; //不加分好会报错[x3,y3] = [y3,x3]console.log("x3:",x3,"y3:",y3);let person = {name:"刘邦",gender:"男",web:"www.liubang.com"}let {name} = personconsole.log("name:",name);let {name:userName,gender,web} = personconsole.log("userName:",userName,"gender:",gender,"web:",web);</script>
</body>
</html>
12.Promise
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// promise,// 当创建一个promise对象时，它的初始状态为pending，表示异步执行未完成// 当异步执行成功时，会调用resolve函数把promise对象状态改变为fulfilled，可通过then方法获取异步操作结果// 当异步执行异常时，会调用reject函数把promise对象的状态改为rejected，可通过catch方法处理错误let promise = new Promise((resolve,reject)=>{// resolve("还钱了")reject("未还")})console.log("promise:",promise);//pending// 获取结果promise.then(result =>{console.log("result:",result);}).catch(result2 =>{console.log("result:",result2);}).finally(()=>{console.log("异步执行结束！");})// 以上也可以let promise10 = new Promise((resolve,reject)=>{resolve("回家了")// reject("未回家")}).then(result11 =>{console.log("result11:",result11);}).catch(result12 =>{console.log("result12:",result12);}).finally(()=>{console.log("异步执行结束！222");})</script>
</body>
</html>
13.Fetch
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//fetch是基于Promise的api，它可以发送http请求，并接受服务器返回的响应数据//fetch返回的是一个Promise对象//get 请求fetch("http://127.0.0.1/get").then(response =>{//返回解析后的json数据，会传递给下一个then()方法中的回调函数return response.json() //response.json()用于将响应数据解析为json格式数据}).then(data=>{//data解析后的json数据console.log("get.data:",data);}).catch(error=>{console.log("get.error:",error.message);}).finally(()=>{console.log("finally");})// post 请求post，表单fetch('http://127.0.0.1/post',{method:"post",headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams({//URLSearchParams用于处理键值对类型的数据，并将其编码为url查询字符串name:'毛泽东',web:'wwww.maozedong.com'}),}).then(response=>{return response.json()}).then(data=>{console.log("post.data:",data);}).catch(error=>{console.log("post.error:",error.message);}).finally(()=>{console.log("finally");})// post 请求post，jsonfetch('http://127.0.0.1/post',{method:"post",headers:{'Content-Type':'application/json'},body:JSON.stringify({// JSON.stringify用于将对象转换成json字符串name:'毛泽东',web:'wwww.maozedong.com'}),}).then(response=>{return response.json()}).then(data=>{console.log("post.data:",data);}).catch(error=>{console.log("post.error:",error.message);}).finally(()=>{console.log("finally");})</script>
</body>
</html>
14.Axios
npm安装，并设置淘宝镜像源
设置淘宝镜像源
npm config set registry https:/registry.npmmirror.com/
npm get registry
npm install axios
https:/unpkg.com/axios/dist/axios.min.js
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/axios.min.js"></script>
</head><body><script>/*Axios 是基于 Promise 的网络请求库，它可以发送http请求并接收服务器返回的响应数据Axios 返回的是一个 Promise 对象Axios 不仅可以用于浏览器，也可以用于 Node.js,而 Fetch 主要用于浏览器*///get请求axios.get('http:/127.0.0.1/get').then(response => {console.log("get.data:", response.data)}).catch(error => {console.log("get.error:", error)}).finally(() => {console.log("get.finally")})//post请求 postlet data = { //参数name: '邓小平',web: 'dengcode.com',}axios.post('http:/127.0.0.1/post', data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(response => {console.log("post.data:", response.data)}).catch(error=>{console.log("post.error:",error.message);}).finally(()=>{console.log("finally");})// post 请求postJson【axios的默认请求头，application/json】axios.post('http:/127.0.0.1/post', data).then(response => {console.log("post.data:", response.data)}).catch(error=>{console.log("post.error:",error.message); }).finally(()=>{console.log("finally");})</script>
</body></html>
t532y10432525@qingdaomedia.com
086137
Live Server扩展，模块化开发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head>
<body><div id="app">{{msg}}<h2>{{web.title}}</h2><h2>{{web.url}}</h2></div><script>// 解构const{createApp,reactive} = VuecreateApp({//setup选项，用于设置响应式数据和方法等setup(){const web = reactive({title:"主题",url:"www.baidu.com"})return{msg:"success",web}}}).mount("#app")</script>
</body>
</html>
安装插件：Resharper，Live Server，Chinese，open in browser
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> -->
</head>
<body><div id="app">{{msg}}<h2>{{web.title}}</h2><h2>{{web.url}}</h2>{{number}}</div><script type="module">import {createApp,reactive,ref} from './vue.esm-browser.js'createApp({//setup选项，用于设置响应式数据和方法等setup(){const number = ref(10) //ref 用于存储耽搁基本类型的数据，如：数字、字符串等number.value = 20 // 使用ref创建的响应式对象，需要通过.value属性来访问和修改其值const web = reactive({title:"主题",url:"www.baidu.com"})// 使用reactive创建响应式对象，可以直接通过属性名来访问和修改值web.url = "www.bilibili.com"return{msg:"success",web,number}}}).mount("#app")</script>
</body>
</html>
