Day1
数据的更新
token收尾
echarts使用
富文本的底层原理
contenteditable
document.execCommand
场景的跨域有哪些?
服务器代理 http-proxy-middleware
nginx反向代理
cors
jsonp
聊天功能
群聊:
1、创建一个群
2、将用户拉到这个群里
3、连接共同的服务器
4、发送消息的时候将消息发送给服务器,服务器转发给所有的用户(包括我自己)
socket:持久化通信
(底层也是用到了TCP但是对TCP做一个一次二次的封装来实现持久通信)
ajax:非持久化通信
http:--->TCP
WebSocket H5新增的一个方法 即时聊天 兼容xing
面试题:
1、前后端数据交互的方式有哪些?
ajax socket
Day2
socket webSocket socket.io
持久通信
即时聊天
Vue
渐进式
尤雨溪
MVVM
特点:
数据驱动视图
虚拟DOM
Object.definedPorperty
new Vue({
el:"Vue作用的范围",
data:"当前Vue所需要的一些属性"
methos:当前Vue所有的一些方法
})
v-text {{}}
v-html
v-show
v-if
v-else
v-else-if
v-bind
v-for
v-on
v-pre
v-once
v-cloak
修饰符
stop
prevent
once
enter
$event
Day3
v-model:
双数据绑定
Object.defindProperty
表单如何使用v-model
如何不使用v-model实现双数据绑定
Vue.directive(指令的名称,指令实现的函数)
computed 计算属性
watch 属性监听
过滤器 Vue.filter
1、初始化项目
npm init -y
2、安装webpack
cnpm install webpack webpack-cli -D
3、创建src文件夹 创建dist文件夹
4、创建webpack.config.js文件
5、在src中创建入口文件 main.js
6、初始打包
npx webpack
7、安装解析JS的babel文件
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
8、安装解析CSS的loader文件
cnpm install --save-dev style-loader css-loader sass-loader node-sass
9、安装html插件
cnpm install -D html-webpack-plugin
10、安装处理图片的loader
cnpm install url-loader file-loader -D
11 、安装处理vue的文件loader
cnpm install -D vue-loader vue-template-compiler
12、安装vue.js
cnpm install vue -S
13、安装服务器环境
cnpm install webpack-dev-server -D
Day4
vm实例身上的一些方法
$mount()
$forceUpdate()
$destroy()
$on
$emit
$off
$once
手动封装事件订阅
生命周期
beforeCreate
created
beforeMount
mounted ref
beforeUpdate
updated
beforeDestroy
detroyed
组件
页面上的任何一个部分都是组件
模块是包含组件
Vue.component
components
参数1 组件名称
参数2 组件的配置项
data不在是一个对象 而是一个函数返回一个对象
组件:css JS HTML
单文件组件
.vue文件
template
script
style
webpack: 模块化打包机
entry
output
module
plugins
devServer
resolve
Day5
组件传值:
父传子
props
数组
对象
type
required
default
子传父
自定义事件 this.$emit
插槽作用域
非父子
1、公共的vue实例对象
2、手动封装Observer(事件订阅)
3、EventBus
4、Vuex
动态组件
component is
keep-alive
include
exclude
max
活跃状态
缓存状态
axios
promise http 浏览器 node
axios.get(url,{
params:{
}
}).then(()=>{})
axios.post(url,{
}).then(()=>{})
axios({
method:"请求的方式"
url:请求的地址
data:post提交数据
headers:
withCredentials:true
timeout:
baseUrl:""
}).then()