前端学习记录

Es6学习

let

1. let声明变量，没有变量提升
2. 是一个作用块域
3. 不可以重复声明

const

不可重复声明

模板字符串

使用`,插入变量$(对应变量)

• 字符串插值

• 多行字符串

• 标记模板

带默认值的函数

a = a || 10

剩余参数

function pick(obj,...keys) {

}

扩展运算符——...

将数组分割，将各个项作为分离参数传给函数

const arr = [10,20,30]
Math.max(...arr)

箭头函数

使用=>定义function(){} 等于()=>{}

let add = (a,b)=>{
	return a + b;
}

let add = val =>val; // 返回val

没有内部指向，内部this的值只能通过查找作用域链，一旦使用箭头函数，当前就不存在作用域

function函数也是一个对象，但箭头函数不是一个对象，实际是一个语法糖

结构赋值

针对代码和对象进行操作

let {type, name } = node

可以不完全结构，忽略某些属性，但必须变量名和内部相同

可以使用剩余运算符

扩展的对象功能

• is() ，和 ===相同，严格相同

• assign，对象合并

  • let o = Object.assign(target, obj1, obj2….)，将对象的属性合并到target并返回，但注意这里是浅拷贝

Symbol数据类型

表示对是独一无二的值，用于定义对象的私有变量

使用Symbol中对象取值时一定要用变量名作为对象的key

集合set

和java很像！！！

set中的对象无法没释放

obj = null

weakset

• 不可传入非对象类型参数
• 不可迭代
• 没有foreach（）
• 没有size属性

数组转换

• from——let arr = Array.from(arguments)
• of()——将任意的数据类型转换为数组
• copywithin()——复制数组内部元素赋值到其他位置
• find(),findIndex()

生成器

function* func(a) {
	yield a;//挂起函数，使用next恢复执行
}

有点类似于同步化操作

promise

相当于一个保存未来才会结束事件的容器

• 对象状态不受外界影响，处理异步操作的三个状态
  • Pending（进行）Resolved（成功） Rejected（失败）

then

• 第一个参数时resolve回调函数，第二个参数可选，时reject的状态回调函数
• then返回一个promise实例，可以采用链式编程

resolve

可以将现有对象转换为promise对象

race

设置超时时间并在超时后执行相应操作

async（是Generator的语法糖）

返回一个Promise对象，内部使用await

await的作用之一就是获取后面Promise对象成功状态传递出来的参数传给 then 函数。

then中如果有多个await则then会等待全部await

遇到错误就不往下执行了只能使用try和catch解决

模块化编程

export和import

Vue框架学习

• 选项式API
• 组合式API

$ cd <your-project-name>
$ npm install
$ npm run dev

文本插值

Mustache语法——双大括号语法

但是必须插入可以求值的结果

使用原始html必须用v-html

属性绑定

通过v-bind:给其绑定上某些属性——使其上下保持一致

可以简写为:

• 动态绑定多个值——v-bind =

条件渲染

• v-if ：返回真值时才会渲染
• v-else ：结合上面
• v-else-if ：结合上面
• v-show：和if类似，但是v-if是惰性的，v-show有着更高的初始渲染开销

列表渲染

• v-for基于一个数组来渲染一个列表

  • 需要写成v-for = item in xxx或者v-for = item of xxx的形式

• 网络请求一般都是json文件

  //json文件
  result:[
  	{
  		"id":12
  		"title":"dass"
  		"avator":"https://dsaf"
  	}
  ]
  
  //.vue文件
  <div v-for= "(item, index) in result">
  <img :src = "item.avator">
  </div>

• 遍历对象：v-for = “(value, key, index) of obj”，别改顺序

通过key索引

推荐使用key = "item.id"进行索引而不是index

事件处理器

• 内联事件——简单场景

v-on添加事件处理器，如下例子

<button v-on:click = "count++"> ADD </botton>

<button @click = "count++"> ADD </botton>

• 方法事件

<button @click = "addCount“> ADD </botton>`

在default中增加methods下的addCount()

事件参数

事件可以直接在方法中传参 ，需要传递event时需要使用$event

事件修饰符

也可以在函数中执行

• @click.prevent()
• @click.stopPropagation()阻止事件冒泡

数组变更与替换

• 变更——会引UI变化
• 更新——不会引起UI变化，但是可以通过重新赋值解决
  • filter()
  • concat()
  • slice()

this.name = this.names.concat(["sakaru"]);

计算属性

优化下面的

<p>{{content.length > 0 ? "yes" : "No"}}</p>

计算属性：

computed:{
        func() {
        return this.content.length > 0 ? "yes" : "No"
    }
}

和方法很类似，但是计算属性会基于其响应式被缓存

Class绑定

<p :class = "{'active' : isActive,'text-danger':hasError}">class样式绑定</p>

//修饰
.active{
	font-size: 30px;
}

.text-danger{
	color:red;
}

//绑定对象
<p :class = "classObj">class样式绑定</p>

//也可以绑定数组

数组和对象嵌套只能是数组嵌套对象

style绑定

和class绑定类似

监听

在default中添加watch

watch的方法名要与data中相同

watch: {
	message(newValue, oldValue) {
		//数据发生变化自动执行的函数
	}
}

表单输入绑定

v-model = “message”不断读取输入表单

• .lazy
• .number
• .trim

模板引用

通过this.$ref.item.value获取DOM

组件学习

先引入组件——注入组件—— 显示组件

scoped限制作用域在当前组件

全局注册

app.component("Header",Header)

app.mount('#app')

但是较为臃肿

组件传递数据

组件之间是可以通过props传递数据的

props和data同级

但是只能从父级传递到子集

可以传递任何形式的数据

可以校验

警告：pros是只读的

组件事件

使用$emit方法触发事件传递

综上：

• 父传子（props）
• 子传父（$emit）

函数方法也可以子传父

插槽slots

组件之中添加各种东西

<slot> <\slot>是一个插槽出口

v-slot实现具名插槽简写为#

插槽其实就是在写 slot 的地方挖个坑，等着组件的使用者，即父组件，进行填充。子组件中使用插槽 slot 后，父组件可以在这个占位符中填充内容，包括数据、html代码、组件等，也就是说，当子组件的某部分内容是根父组件填充的不同而变化的，那我们就可以使用插槽slot，具体填充什么，由父组件而定。

子组件中，使用 指明使用什么数据，并将数据传给插槽的使用者

生命周期

组件周期切换组件会被卸载

可以通过keep-alive实现组件存活

异步加载组件：

const Compnont = defineAsyncComponent(() => 
import("./component/Component.vue")
)

依赖注入

provide、inject实现

只能由上而下注入

路由对象

实现页面跳转

通过createApp(App).use来使用其功能

引入页面——引入路由到项目——指定路由显示入口——指定路由跳转

Vue配置——vue-router的详细配置_vue router配置参数-CSDN博客

Ajax

无刷新获取数据

• 没有浏览历史，没能回退
• 存在跨域
• SEO不友好

HTTP协议

请求报文

• 行
  • GET /s?ie=utf8(url路径) HTTP/1.1
• 头
  • Host : at.com
  • Cookie: name - guigu
  • Content-Type:
  • User-Agent: chrome 83
• 空行
• 体 （GET时可以为空）

响应报文

• 行
  • HTTP/1.1 200 OK
• 头
  • Content-Type: text/html;charset = utf8
  • Content-length:2048
  • Content-encoding: gzip
• 空行
• 体
  • html源码

GET请求

//创建对象
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/serve?a=100&b=200');//?后面进行参数传递
xhr.send();
//事件绑定,处理服务端返回结果
xhr.onreadystatechange = function() {
	//状态有0,1,2,3,4此时表示返回了所有结果
	if (xhr.readystate == 4) {
		//判断响应状态码200,404,403,401,500
		if (xhr.status >= 200 && xhr.status < 300) {
            //处理结果
            console.log(xhr.status);
            console.log(xhr.statustext);
            console.log(xhr.getAllResponseHeader);
            console.log(xhr.response);
		} else {
            
        }
	}
}	

POST请求

app.post('/server', (request, response)=> {

})

//传递参数
xhr.send('a = 100 & b =100')

设置请求头

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

响应json数据

xhr.responseType = ‘json’可以自动将结果转换为json

nodemon

实现不需要自己重复重启服务

nodemon serve.js代替原来的即可

IE缓存问题

通过加上参数Data.now()实现

请求超时处理

xhr.ontimeout = function {

}

请求取消

调用abort()方法即可

重复发送请求

增加isSending变量,当状态为4结束时将其标记

if (isSending) x.abort() // 保证只有一个请求

Jquery发送ajax请求

$.ajax{
	url: 'http://127.0.0.1:8000/server',
    data: {a : 100},
    type: 'GET',
    success:function(data) {
		console.log(data);
    }
    dataType: 'json'
    timeout: 2000,
    error: function() {
        console.log('出错了');
    }
}

较为复杂和个性化

$.post和$.get请求直接发送较为简单

axios

//GET请求
axios.get('http://127.0.0.1:8000/server',{
    //url参数
    params: {
		id : 100,
        vip : 7
    }
    headers: {
    	name: 'atg',
    	age: 20
	}
}).then(value => {
    console.log(value);
});


//POST请求
axios.post('http://127.0.0.1:8000/server',{
    //url参数
    params: {
		id : 100,
        vip : 7
    }
    headers: {
    	name: 'atg',
    	age: 20
	}
    data: {
          name: 'admin' 
    }
}).then(value => {
    console.log(value);
});

fetch发送请求

fetch('http://127.0.0.1:8000/server',{
    //url参数
    method: 'POST'
    headers: {
    	name: 'atg',
    	age: 20
	}
    data: {
          name: 'admin' 
    }
	body: 'username=admin'
}).then( response => {
    console.log(response.json());
});

跨域请求

script标签本身具备跨域

response.end(`handle(${str})`);

设置CORS响应头实现跨域

Promise

axios