各种浏览器网站大全,做白酒的网站,怎么建设免费网站,国外 优秀网站设计1.开发工具 vscode地址 :https://code.visualstudio.com/download, 下载对应系统的版本windows一般都是64位的 安装可以自选目录#xff0c;也可以使用默认目录 插件#xff1a; 输入 Chinese#xff0c;中文插件 安装#xff1a; open in browser#xff0c;直接右键文件…1.开发工具 vscode地址 :https://code.visualstudio.com/download, 下载对应系统的版本windows一般都是64位的 安装可以自选目录也可以使用默认目录 插件 输入 Chinese中文插件 安装 open in browser直接右键文件选择 F12打开控制台就能看到 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconsole.log(人依远戍须看火);/script
/body
/html2.基本数据类型1️⃣
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconsole.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
/html3.基本数据类型2️⃣
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 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){mxyconsole.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
/html4.函数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//函数function getweb(){let web wwww.baidu.comreturn web}console.log(getweb());// 传参,有默认值function add(number5){return number10}console.log(add(7));// 匿名函数let subfunction(x,y){return x-y}console.log(sub(7,2));// 箭头函数把function换成箭头并放后面let plus (a,b){return ab}console.log(plus(11,7));// 隐式函数箭头函数去掉{}跟returnlet cheng (m,n)m*nconsole.log(cheng(11,7));/script
/body
/html5.数组
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 数组定义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()方法的排序顺序// 若 ab 则 a-b 是一个负数表示a应该在b前面// 若 ab 则 a-b 是0位置保持不变// 若 ab 则 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
/html6.Set
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 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.comlet 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
/html7. map
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 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
/html8.对象
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 对象let user {name:曹操,gender:男,web:www.baidu.com}console.log(user);user.height 175console.log(user);// 修改user.web www.bilibili.comconsole.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
/html9.私有属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptclass 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.#webvalue}}let person new Person(刘备,www.liubei.com)console.log(person.web);person.web sunquan.comconsole.log(person.web);// 使用拼接方式, 模版字符串console.log(person.info());/script
/body
/html10. 继承extends
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 父类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
/html11.解构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 数组结构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,y2200] [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
/html12.Promise
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 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
/html13.Fetch
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//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 请求postjsonfetch(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
/html14.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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/axios.min.js/script
/headbodyscript/*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/htmlt532y10432525qingdaomedia.com 086137 Live Server扩展模块化开发 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue.global.js/script
/head
bodydiv idapp{{msg}}h2{{web.title}}/h2h2{{web.url}}/h2/divscript// 解构const{createApp,reactive} VuecreateApp({//setup选项用于设置响应式数据和方法等setup(){const web reactive({title:主题,url:www.baidu.com})return{msg:success,web}}}).mount(#app)/script
/body
/html安装插件ResharperLive ServerChineseopen in browser !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srcvue.global.js/script --
/head
bodydiv idapp{{msg}}h2{{web.title}}/h2h2{{web.url}}/h2{{number}}/divscript typemoduleimport {createApp,reactive,ref} from ./vue.esm-browser.jscreateApp({//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.comreturn{msg:success,web,number}}}).mount(#app)/script
/body
/html
