跨域
什么是跨域
由于浏览器的同源策略限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时，需要跨域才能成功访问；
同源策略是浏览器的行为，是浏览器最核心也最基本的安全功能；
前端解决跨域方法
其实跨域问题都是找后端解决的；
误区：前端通过jsonp解决跨域原生写法123456789101.创建一个script标签 var os=document.createElement("script")2.给script一个src,src就是地址 os.src="http://suggestion.baidu.com/su?cb=qwer&wd=123"3.将script插入到页面 document.body.appendChild(os)4.回调函数处理数据 function qwer(d){ //d就是后端返回的数据 }
ajax请求12345678910111213141516$.ajax({ url:"http://suggestion.baidu.com ...
Vue3 Suspense
Suspense
等待异步组件时渲染一些额外内容，让应用有更好的用户体验(内置组件，不需要引入)
其实和2.x中的路由懒加载差不多
传统写法：效果就是 只要 子组件 还没有 引入成功，整个父组件都不会进行渲染，即所有DOM一起渲染，父组件于子组件视图一起展示 (网络慢的时候明显)
缺点：页面加载慢，加载的快慢取决于 最慢的那个加载的速度 (木桶原理既视感…)
1234567891011121314<template><!-- 父组件 --> <h1>this is parent</h1> <i-son></i-son></template><script>import iSon from "./injectSon.vue";export default { components: {iSon},};</script><style></style>
123456789101112< ...
Vue3 provide与inject
provide与inject
作用： 实现祖孙组件的通信(其实 所有的后代都能接受到数据，隔了多少代都可以，一代也不搁的也可以)
用法：父组件有一个provide来提供数据，后代组件有一个inject来接收数据；
12345678910111213141516171819202122232425262728293031<template><!-- 爷爷组件 --> <h1>this is grandParent</h1> <h3>{{name}}</h3> <h3>{{price}}</h3> <i-son></i-son></template><script>import { provide, reactive, toRefs } from "vue";import iSon from "./inject ...
Vue3 watch
watch
监听响应式数据的变化，才能够被watch所监听到；
vue2.xvue3.0vue2中的watch函数
vue2中的响应式数据是写在data、computed或者props接收的数据；才能够被watch所监听到
基本写法123456789101112131415161718192021222324<template> <div> <h2>{{ sum }}</h2> <button @click="sum++">点我加一</button> </div></template><script>export default { data() { return { sum: 1, }; }, watch: { sum(newValue, oldValue) { console.log( ...
Vue3 hook
自定义hook
本质是一个函数，把setup函数中使用的 Composition API 进行了封装；
类似于2.x中 的mixin；
自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂；
实现一个获取坐标位置的功能
123456789101112131415161718192021222324252627282930313233343536<template> <h2>点前点击的鼠标的坐标为x:{{ point.x }},y:{{ point.y }}</h2></template><script>// 获取鼠标的点击的坐标import { reactive, onMounted,onBeforeUnmount } from "vue";export default { setup() { // 数据 let point = reactive({ ...
Vue3 setup参数
setupVue2中的组件传值
父传子 $attrs
1234567891011121314151617//父组件<template> <v-child msg="hello" school="vue2父传子"></v-child></template><script>import vChild from "./theChild.vue"export default { components:{ vChild }}</script><style></style>
子组件
123456789101112131415<template> <h2>this is child</h2></template><script>export default { props:["msg& ...
Vue2与3响应式原理
vue2响应式原理
通过Object.defineProperty()对属性的读取，修改进行数据劫持；
get捕获 获取的数据；set捕获 修改的数据；但是添加和删除属性是捕获不到的；
12345// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperties(p,"name",{get(){},set(){}})
1234567891011121314151617181920212223242526272829// 源数据let person={ name:"张三", age:20};// 模拟vue2实现响应式// 1.准备一个空对象let p = {};// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperty(p,"name",{ get(){//有人读取name时使用 ...
Vue2与3 v-model
vue2.xvue3.xv-model其实做了两个事情：
v-bind绑定value属性的值；
v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；
在原生表单元素中1<input v-model="serchText">
等价于：
1<input :value="serchText" @input="serchText = $event.target.value">
在自定义组件中在 Vue 2 中，自定义组件的 v-model 是一种常用的父子组件双向数据绑定方式。它的本质是对 value prop 和 input 事件的语法糖封装。
工作原理
v-model 默认会绑定到子组件的 value prop 上。
当子组件需要修改这个值时，需要通过 $emit('input', newValue) 事件通知父组件更新。
子组件定义：
123456789101112131415<!-- child.vue --><template ...
Vue3
Vue3Vue3介绍
Vue.JS 3.0兼容2.0的大多数语法。
性能提升
项目打包体积更小；
需要的运行内存更小；
初次渲染更快，更新渲染更快；
使用Proxy代替Object.defineProperty实现数据响应式；
重写虚拟Dom的实现和Tree-Shaking；(提升模板编译的速度；摇树操作–>减少项目打包的体积)
更好的支持TypeScript；
获取Vue3.0
cdn方式
创建实例对象的方式不一样；
挂载应用实例的方式不一样；
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i ...
Echarts
Echarts一个基于 JavaScript 的开源可视化图表库。
安装方式12345npm init -y //初始化项目 npm install echarts --save //下载echarts//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;//原生可以在官网-->入门篇-->获取Echarts-->从 CDN 获取-->最上面的/dist/echarts.min.js-->打开之后右键-->另存为<script src="./echarts.min.js"></script>
快速上手参考echarts官网上的快速上手
引入js文件
创建一个div来做dom容器；容器必须设置宽高，不然不会出来；
逻辑处理
1<div id="box" style="width:500px;height:500px"></div>
123456789101112131415161718192021222 ...