笔者说：如果你刷到这篇文章，那你真的巨**幸运了，赶紧收藏吧👉。
起了一个奇怪的名字，应该会很难有人刷到吧。本来想着自己过目不忘的，但是随着学的东西变多，慢慢很多都模糊了，于是就花了点时间整理了一下自己残存的笔记。。。
文章都是思维，基本没啥代码，也没写怎么做，这篇文章会慢慢增加的，所以可能巨长，建议收藏慢慢观看聂(￣▽￣)*。
Vue小结
ES6小结
1.node.js遵循了CommonJS的模块化规范：
导入其他模块使用require()方法
模块对外共享成员使用module.exports对象
2.导入其他模块成员使用import关键字
向外共享模块成员使用export
3.Promise.prototype上包含一个.then()方法
通过原型链的方式访问到.then()方法
距离p.then(result=>{},error=>{})
Vue快速上手开发
基础概念
vue-router：路由方案
vuex：状态管理方案
vetur(vscode插件：提供语法高亮和智能提示)
MVVN-数据驱动视图和双向数据绑定的核心原理
View–当前页面所渲染的DOM结构
Model–当前页面渲染时所依赖的数据源
ViewModel–vue实例，MVVN的核心
{{}}语法
用于插值
<p>{{username}}</p>
属性绑定指令v-bind
简写形式：“:”
事件绑定指令v-on
v-on:click,v-on:input,v-on:keyup
监听键盘：@keyup.enter，@keyup.esc
简写形式：“@”
双向绑定指令v-model（表单）
常用：v-model.number(输入值转数值),v-model.trim(自动过滤首位空白字符),v-model.lazy(change时更新，而非input时更新)
条件渲染指令
用于div的显示与隐藏：v-if（可以与v-else配合使用），v-show（适合频繁切换）
这里如果在echarts这种用这两个东西，需要重新渲染页面，要不就不显示了。
列表渲染指令v-for
<li v-for="item in list" :key="content.id">{{item.content}}</li>
<li v-for="(item,index) in list" :key="content.id">{{index}}{{item.content}}</li>
Vue初级概念
Vue组件组成介绍
template–组件的模板结构
script–组件的JavaScript行为
style–组件样式
data():vue组件渲染期间需要用到的数据
组件的注册
组件注册分为全局注册和局部注册
想组件化开发就去研究下
全局注册是在main.js里面注册
app.component("a",A)
局部注册就是在组件内component里声明
Vue组件间的数据流动
组件之间的关系
1.父子关系
2.兄弟关系
3.后代关系
父组件向子组件共享数据据v-bind
//父组件
<my-component :msg="msg"></my-component>
data(){
return{
msg:"hello world"
}
}
//子组件
export default{
props:['msg'] //接收
}
子组件向父组件共享数据
方法：使用自定义事件。过程略过了。
兄弟组件之间的数据共享
插件EventBus
后代关系组件数据共享
使用provide和inject。需要的话百度。
Vue组件高级知识
ref
作用：在不依赖jQuery的情况下，获取DOM实例
比如
this.$refs.input.focus() //获取焦点
this.$nextTick(cb)方法
等组件DOM异步重新渲染完成后，再执行cb回调函数。保证了在这中间的方法，操作一定是最新的DOM元素。（一般用于重新渲染页面，比如echarts只再开始的时候渲染一次）
Slot插槽
理解：在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。
补充：可以把他当作组件封装期间，为用户预留的内容占位符
具名插槽–就是带name的插槽
v-slot缩写：”#“
使用方法：使用slot占位
<slot name="asd"></slot>
<template v-slot:asd>这里的内容就到插槽那里去了</template>
作用域插槽
建议看官网，太抽象了。。写还费劲
自定义指令（挺好玩的，但是估计用不到了）
//定义过程directives：{ focus：{ //自定义指令名 mounted(el){ el.focus() } }}
使用：
<input v-focus /> <!-- V+指令名就行-->
Vue路由
快速上手
方法一：
<router-link to="/shift">相当于A标签</router-link>//传参<router-link to="{name='home',params:{id:1}}">相当于A标签</router-link>
方法二：
this.$router.push('hash地址')
方法三：
this.$router.go(数值n) //实现导航历史的前进后退
Vue全局，组件与组件之间传值–全局事件总线
功能：任意组件间通信
安装全局总线
//在main.js文件中
//创建vm
new Vue({
el:'#app',
render:h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
//挂在了vue的原型上
}
})
这里的$bus其实是一个傀儡。
傀儡可以挂在在vc上，也可以像这种挂在vm上，但是挂在vm上最标准。
挂载之后，全局就都可以看到他了。
挂在在vc上的写法如下：
const Demo = Vue.extend({}); //这里创建了一个傀儡组件
const d = new Demo();
Vue.prototype.$bus = d;
接收数据组件回调
//这里用了vue的自定义事件
this.$bus.$on('eventName',(data)=>{
console.log('接收到的数据:',data)
})
"发射"数据
//写在methods里面哈
this.$bus.$emit('eventName',666)
//说明：这里用到了$emit，我们称他为发射！主要用于，子组件向夫组件传等，就是下向上传
//触发的方式就是触发这个eventName的自定义事件
总结
在使用这种方式的时候，还有其他注意事项
第一个：就是vue生命周期的运用，在vm上写beforeCreate这个生命周期，向vm原型中加一个事件总线
第二个：使用完要使用vue生命周期的beforeDestroy中解绑自定义事件
this.$bus.$off('eventName');
//必须！必须指定自定义事件的名字
Vue配置代理
配置代理是为了什么：解决浏览器不支持跨域请求！
fetch致命的问题
1.他会把返回值包两层promise
2.兼容问题，IE浏览器一个都发不出去
Vue推荐axios发送请求，axios也是对xhr进行封装。
axios请求
axios.get('地址').then( //返回来的是一个promise值
response => {
console.log('请求成功了',response.data)
},
error =>{
console.log('请求失败了',error。message)
}
)
解决跨域问题
1.cors解决(响应头)
2.jsonp
3.开发中常用—配置代理服务器
零散知识点：代理服务器最厉害的地方就是，跟你所处的位置是一样的。(始终保持一致)
零散知识点：服务器和服务器之间传数据，不使用ajax。
配置代理的方式一
1.nginx反向开启代理服务器(了解后端之后回来再学)
2.借助Vue-cli开启代理服务器（缺陷：不灵活，不能控制是否走代理）
//再vue.config.js文件中写
//开启代理服务器
devServer:{
//只写到端口号，不能继续往下写了
proxy:'http://localhost:5000'
}
当请求的资源8080本身就有的时候，就不会把请求转发给5000。
public文件夹里面有的东西，都是属于8080直接有的。
优点：配置简单
缺点：只能配置一个代理
配置代理的方式二
同样在vue.config.js文件中去写
devServer:{
proxy:{
'/api':{ //'/api'叫做请求前缀 ，如果请求前缀的/api就走代理，否则就不走代理
target:'<url>',
pathRewrite{'^/api':''},
// ws:true, //websocket用于支持websocket
// changeOrigin:true //不写默认也为true，用于控制请求中的host值
},
'/foo':{
target:'<other_url>'
}
}
}
了解：vue-resource
常用于vue-1.0（过气插件）
Vue插槽
为什么插槽用template(其实是代替了div)
节约了一层结构。
因为slot写法已经被弃用了。
新写法：v-slot：footer（具名插槽）
重点：v-slot只能卸载template上
作用域插槽：
感觉：数据逆向流动
如果想拿到作用域插槽传递的数据，就必须使用template
<template scope="mName"> //这里也可以写成scope={games} 或者 slot-scope="{games}"
{{mName.games}}
</template>
//组件插槽
<slot :games="games"></slot>
因为games是一个变量所以需要"："绑定
如果只是传递一个字符串，则不需要绑定。
Vuex–集中式状态管理插件
因为Vuex是一个插件，所以使用也一定是vue.use(vuex);
也是一种组件间通信的方式，而且适用于任何组件。
什么时候使用Vuex？
1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态
关键词：其实就是共享
Vue 编程式路由导航
目的;不写router-link实现跳转
router-link主要可以做tab导航，也可以传参–（query和params）
路由只是一个规则！
路由器是vue-router的实例
this.$router,push({
name:'dd',
query:{
...
}
}) //指定路由name
this.$router.forward //前进
this.$router.back //后退
this.$router.go() //需要传入一个数字，传入一个3，连续进3次，传一个-2，连续退两步
缓存路由组件
作用：让不展示的路由保持挂载，不被销毁。
<keep-alive>
<router-view></router-view>
</keep-alive>
keep-alive代表缓存出现在标签内的所有组件。
<keep-alive include="ConpontentName">
<router-view></router-view>
</keep-alive>
代表只缓存ConpontentName组件。
<keep-alive :include="["ConpontentName","News"]">
<router-view></router-view>
</keep-alive>
两个新的生命周期
激活：
activated(){
}
不被激活：
deactivated(){
}
以上两个生命周期与keep-alive缓存挂钩
其实nextTick也是一个生命周期钩子
这三个生命周期是未在生命周期图里面体现的生命周期。
Vue 路由守卫
意义：保护路由的安全（权限）。
//在每一次路由切换之前被调用+初始化被调用
//全局前置路由守卫
router.beforeEach((to,from,next)=>{
if(to.path === '/home/mews' || to.path === '/home/messages'){
if(localStorage.getItem('school') === 'mPath'){
next(); //放行
}
}
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
