.gitignore
把不需要存入git仓库的文件或目录写入该文件
git过滤清单
babel.config
配置es6 解析的loader
webpack 打包工具 vue脚手架 @vue/cli
vue 脚手架是用 webpack封装的
package
配置文件
README
项目说明书
安装依赖
1.GUI里的安装
2.命令行安装 npm i
学习目录
1.布局篇
flex
rem
2.js
数组常用方法
ajax和jsonp
对象，原型，原型链
闭包，不污染全局，容易造成内存溢出
递归，树形菜单，函数自我调用：1.结束的判断 2.数据的格式一致 3.数据嵌套层数不定
异步，
异步代码： 宏 定时器， 微 promise， 微 动画对象。
同步，
宏任务，全局的 异步
微任务，局部的，先执行
dom，
document
- body document.body
- html document.documentElement
bom
window
- window.history
- window.location.hash
- window.fetch 下一代ajax，基于promise封装的
bom包含dom
3.es6
变量
let const 不能提升，不能重复声明
let 变量的值可以重复声明
const常量，不能重复赋值
var 提升，重复赋值，重复声明
解决异步方法
promise async await
回调地狱--典型的异步回调
示例:用户登录，第一个接口请求到用户的id，第二个接口用id请求用户的金钱，第三个接口用户id和金钱请求用户的等级...
class类
4.性能优化
压缩代码， 删除冗余的注释， 雪碧图/精灵图===将若干个小图合并成一个大图，使用背景定位复用该图
script必须放在body结束标签前面
5.webpack + git
git：代码管理工具
git常用命令：
- git status 查看当前仓库的状态
- git add -a 把当前仓库的所有更改存入本地暂存区
- git commit -m "日志"
- git pull 拉取远程代码到本地
- git push 上传代码到远程
- git checkout 分支名：切换分支
- git merge 合并
6.jq的核心
操作dom的类库，其底层还是操作dom
- jq对象和原生对象的互换？
答：转原生` $('el').get(0) ` 或者` $('el')[0]` ; 原生转jq：` $(obj) `
- jq的扩展方法: ` $.fn() ` , ` $.extends() ` 基于jq开发插件
- ui 库bootstrap 栅格系统12列
7.vue
- vue
-以数据驱动视图的渐进式 MVVM 框架
-渐进式：循序渐进的使用vue，可选择性强，可以只要是vue其中的一个小功能，不必完全使用vue，不强制的意思
-MVVM：m-model 模型数据，v-view 视图；数据是双向绑定的，使用数据改变导致视图改变
-MVC：m：model V：view c：控制器 数据改变控制页面也改变
- vue底层原理和vue描述
-原理：Object.defineProperty
-vue：
优点：虚拟dom，数据驱动，双向响应，模块化开发，浏览器统一兼容。
缺点：由于是js生成的虚拟dom，不利于seo爬虫爬取，首屏加载相对于静态页面慢
- data为什么函数
-因为组件的data会提升，而根实例上的data是对象，会导致一个合并，把data变成函数，以调用的方式来使用，避免了覆盖和冲突。
- 什么是虚拟dom
-使用js算法动态生成的dom叫虚拟dom，虚拟dom不会回流和重绘。性能更好，
-不同框架不一定要虚拟dom，关键是看是否要频繁的引发大面积的dim操作
- diff算法和key关系
-同层对比，只有发现不一致的节点，就用新的dom替换旧的dom。
-正是因为diff算出来的虚拟没有跟踪标识，当一个循环出来的虚拟dom列表中任意一个元素被修改，diff算法没法找到它，只能重新渲染一份新的dom，加了key之后，每个dom有了自己的唯一标识，这样修改的时候可以精准的找到并修改，从而省了性能，所以，key的值必须是唯一，而且不可以用随机数，用时间，不建议用下标。
- 生命周期
四个阶段八个函数，其中最大的问题是自动发起ajax请求问题，如果是在浏览器中运行，则应该在mounted发起，如果是服务器端渲染，应该在created发起
beforeCreate:骨架屏占位,日志上传
created:发起ajax请求.可以，但是不推荐。因为ajax异步，生命周期同步
beforeMount:可以对一些数据进行格式化
mounted:发起ajax【推荐】前端项目多大部分都是运行在浏览器，极少是服务器端渲染
beforeUpdate:可以二次对更新的数据修改
updated:只能是观察到更新的数据
beforeDestroy:清除常驻内容的垃圾.对用户的离开行为进行提示
destroyed
- 内置组件
- slot 插槽
自定义组件的高级形式，多用于模板复用，动态渲染传入的内容或组件。
使用场景：插件的封装，网站结构布局等
匿名插槽
插槽组件中传入的散内容被slot标签接收
具名插槽
使用template标签，用v-slot指令绑定名字，插槽组件中slot组件使用name属性给插槽取名字。
插槽传参
slot组件传递参数，上游组件的template接收
v-slot的缩写: ` # `
- keep-alive 缓存组件
语法：
<keep-alive>
<MyDom/>
</keep-alive>
凡是被它包裹的组件，都会被缓存，
属性：includes 只缓存被指定的组件 excludes不缓存指定的组件
生命周期：
-activated 缓存的组件被激活了
-deactivated 缓存的组件被停用了
- component 动态加载组件
必须使用is属性动态加载组件的名称，解放了大量书写v-if或v-show的问题
- transition 动画组件
使用name属性控制动画类名的前缀，从而可以产生不同的动画效果。一般用于嵌套在路由视图组件或动态组件
- template 模板
第一种作为vue模板标签使用，
第二个作为插槽的模板
- nextTick
不常用，但很重要。
保证所有dom全部更新完毕才会触发，用于获取dom更新后的获取dom节点数据
在watch监听中，获取color值。这个值呢在被修改时不能同步到视图，就要用nextTick获取更新后的dom节点
- ref
- 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素。
- ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。
- 比如用在表单，获取form表单实例。 之后用ref方法清空所有表单 。也可以修改dom元素的样式
可以减少获取dom节点的消耗了
- 指令
html：专门渲染字符串dom片段的，底层做了防止注入攻击，将js内容转义 .xss
text：只能渲染文本内容
for：字符串，数字，对象，数组 ;
遍历数组和对象区别：对象有三个参数，值，键，小标。。 数组只有值和键
model：数据双向绑定指令，专门用在表单元素上。
on：缩写`@`，两种用法绑定原生事件，自定义事件
bind：
可以绑定原生的属性，
也可以绑定自定义的属性。
绑定给自定义组件上是传参方式。
动态绑定属性
` v-bind:[name]='data `
动态绑定属性值
` v-bind:checked = 'state' `
绑定class
v-bind:class = '{active : true/false }'
绑定style
v-bind:style = '{color : red}'
once：让元素的值永远保持第一次渲染，还是优化性能的一个手段，比如给固定写死的静态dom加上之后，这里的dom将不会再更新了，不参与diff计算
pre：不会使用vue解析里面的内容，当字符串渲染
clock：防止闪烁，当一个值在页面使用时，如果该值是ajax的返回值，那么值初始化的时候为空，则会导致页面闪烁 css的display：none
show：控制元素的显示与隐藏，css的display：none
if：控制元素的加载与销毁，如果频繁切换应该优先使用v-show
slot：插槽的指令，属性 #
- 监听和计算属性
都可以监听数据的变化
计算属性监听一个值，返回一个新值，如果这个值不用的话则监听不会触发；- 没有数据类型的限制；- 是立即执行，不能执行异步，只要写了受观察的数据，立即对数据监听；- 默认只读的，想修改必须是对象写法，在set函数中修改被监听的数据
watch专门监听一个值的改变。如果监听数组或对象；- 需要开启深度监听deep为true；- 可以执行异步操作；- 只能监听一个数据
- 修饰符
事件的：
once 事件只执行一次
native 绑定原生事件，当给子组件绑的时候
stop 阻止冒泡
prevent 阻止默认事件
属性的：
v-bind.sync 伪双向数据绑定
v-bind.prop 把属性转成不可见的属性
指令
v-model.lazy 当用户失去焦点后触发
v-model.number 尝试转成数字
v-model.trim 去掉首尾空字符串
按键
13 和 enter 监听回车
鼠标
right 右击
left 左击
- 订阅发布模式
-订阅者：派发事物接收的对象，比如dom元素
-发布者：事物委托对象，比如proxy
- 骨架屏优化
当页面基于数据渲染，数据尚未获取的时，使用骨架屏占位
- 动态绑定指令
v-bind:[name] name是变量，赋予任意值。
- 组件通信
父传子：
父v-bind传递，子组件props接收
子传父：
父组件v-on函数，子组件$emit调用
父子双向：
v-model 自动注入value值和input函数
.sync 伪数据双向绑定
provider,indect
兄弟之间：
让父组件当中间人
` $parent ` 获取到父组件实例
` $children ` 获取到所有的子组件
跨级
` $root ` 获取根实例对象
` $on 和 $event ` 使用同一个父级，子用on发送，父用event监听
vue1.0 bus 中央事件池 。new一个vue让它作为中间人，基于on和event来处理
- vue项目优化
-按需加载-组件的的懒加载，只有当用户访问该组件时才加载。
-打包的时候关闭源码映射，可以提高打包速度
-模块化代码复用
-使用动态加载组件component
-频繁切换的元素优先使用v-show
-使用循环渲染的时候避免使用v-if
-给大量子元素绑定事件的时候优先使用事件委托
-使用精灵图优化加载小图标
-使用骨架屏优化首屏加载慢的问题
-防抖，input框，搜索。节流下拉加载，滚动
- 自定义系列(指令，过滤器，)插件
- 自定义指令directive
扩展vue没有的指令功能，举例：当页面打开后让input获取焦点
语法：
`
directives:{
focus:{
insert(el,binding,olnode){
// el是绑定的元素对象，binding是options，里面有value。olnode旧的虚拟dom
}
}
}
`
- 自定义过滤器filter
在不修改原数据情况下，对数据进行处理，返回新的数据。
语法：
`
声明
filters:{
add(value){
return value + 666
}
}
使用
{{ n | add }}
`
- 对象.install 方法
vue插件是一个综合性的功能封装
`
声明plugin.js
export default {
install(value,option){
// vue.filters
}
}
使用
Vue.use(plugin,{ lg:true })
`
- v-model原型
Object.defineProperty
- mixins 混入
减少当前组件的代码体积的，把一些无关紧要的代码提取到外面，可以给其他组件进行复用
混入是js代码复用
但是，它不要和全局使用，否则会出现冲突
如果混入里的值或函数和组件的重复了，一定要用组件的
如果混入里的声明周期和组件的复用了，先混入后组件，会合并掉
- spa单页面应用
项目中只有一个html文件。
- el 和 $mount 区别
el是配置，mount是方法
el比mount挂载的速度快
- Vue.set 方法
因为Object.defineProperty方法的缺陷，导致动态添加或删除的属性不能被监听响应。所有才用这个方法
-------------------------------
- 路由底层原理
history
window.history
和
hash
window.location.hash
- 路由传参方式
query 用 ? 类似get请求方式传参
params 动态路由的动态字段
hash 非hash模式下使用#传参，会被 hash 接收
meta 元数据、元信息，路由配置时写死的
rooter-view 属性传参，凡是被它渲染出来的路由组件都会接收props属性
- 路由拦截器
全局守卫
beforeEach 进入前的守卫【做全局的路由权鉴】
afterEach 进入后的守卫没有next，上报日志
路由独享
beforeEnter 确认进入前
组件守卫
beforeRouteUpdate 更新 获取动态组件的字段
beforeRouteLeave 离开 确认用户离开行为，用于表单页面
- 路由模式
history,hash是地址栏有`#`的
- route 和 router区别
router是new的vueRouter的示例对象，拥有路由的全部功能
route仅表示当前路由的信息
router包含route
- 跳转方式
push： 向历史记录中添加一条记录
go： 在历史记录中前进后退，值是数字
back ：后退
forward： 前进
replace： 用当前地址替换历史记录中最后一条
- 路由配置方式
动态路由 使用 `/:name `
嵌套路由 使用children
别名 alias可以设置多个，用数组包裹
重定向 name属性
- 路由组成部分
导航，视图，配置
- 路由组件懒加载
一个函数返回import函数加载组件
` ()=> import('./component) `
- 监听滚动事件
scrollBehavior 方法可以设置滚动条初始位置，当路由跳转时候它会执行
- 声明式导航和编程式导航
声明式：` <router-link> `
编程式：` this.$router.push `
--------------------------------
- vuex工作原理
1.store里的state在组件中使用
2.组件使用dispatch调用action派发业务
3.action使用commit调用mutation
4.mutation调用state进行修改
5.当state改变后，store通知组件修改
- vuex组成部分
state，
getters，
mutations，
actions，
modules
- 严格与非严格模式区别
严格模式：mutations只能运行同步代码，且只能在这里修改state
非严格模式：state可以在任何地方修改，mutations可以执行异步
- 辅助函数
mapState
mapGetters
mapMutations
mapActions
- mutation 和 action区别
mutation是唯一修改state的，且只能运行同步代码。action专门用于处理异步操作，只能通过调用mutation修改state
- state 和 getters关系
state相当于组件里的data，getters相当于组件里的computed
getters是基于state计算的
- vuex模块化
modules 用于大型项目开发，主要赋值独立模块的独享状态管理。
默认state和getters是归属于当前模块作用域的，但是mutation和action函数会自动提升到根store对象下
所以需要开启命名空间，每个模块使用namespaced 属性开启
--------------------------------
- axios 封装
1.必须使用axios.create()：创建一个单独的实例。
2.BaseUrl： 设置公共的服务器地址
3.timeOut： 设置访问超时时间，默认5000sm
4.前置请求拦截器： axios.interceptors.request.use
5.后置请求拉拦截器： axios.interceptors.response.use
请求拦截:: axios.interceptors.resquest.use(config => {
为请求头对象添加token验证的 字段
这样就可以对有`Authorization`接口权限的请求 都可
config.headers.Suthorization = window.sessionStorage.getItem('token')
return config
})
- ui库的使用
Pc: element-ui 最常用组件，api，指令
` el-from ` ` el-table `
` v-loading `
移动：vant
- node js是什么
是一个 JavaScript 运行时环境，有了它我们才可以使用npm的命令什么的来开启我们的服务
vue中data的属性可以和methods中的方法同名吗？
答：“不可以。methods 里面的方法会覆盖掉data里面的
vue中方法用箭头函数会怎样？
答：不能使用箭头函数，会报错。箭头函数没有this。所以它的this指向不是vue实例，使用箭头函数打印this是undefined。而普通函数的this指向运行时的作用域，可以修改
vue中 e.Target和 e.currentTarget 区别
e.currentTarget获取对象时指向事件所绑定的元素。e.Target始终指向事件所发生的的元素。
currentTarget 点击a或a中的任何元素，获取到的对象都为绑定事件的a
target，点击a就传a元素，点击到a中的某个子级元素就传a之中的某个元素
vue为什么要求组件模板只有一个根元素
有一个根元素就是 数据结构需要一个根作为遍历的起始点
如果有很多个跟，查找和遍历的效率会很低
而且diff算法不支撑多入口结构，为了保证计算机的性能也就只需要仅有一个节点入口
vue 哪些可以监听数组的变化，为什么
vue内部源码对array的中间代理
对push shift pop等做了代理。它对中转的数据做了监听
保存草稿功能
在input框中，监听，点击时判断它为开启true状态。点击保存时就保存内容并让它的状态为false，取消就清空，状态为false。 当跳转路由时就可以判断它的状态。提示是否保存。保存后false状态跳转
