web知识体系
根据上图的知识体系结构图，我们大概可以知道前端的学习的大方向可以是：先学Vue，再到webpack项目模块维护、最后是前端web小程序，三个大的方向，当然学习的过程是痛苦的大家一步步来，千里之行始于足下。
上图的GIF动态图可以大概了解到，每一个学习的方向有很多的小分支，因为总结归纳的时候用的是百度脑图，所以该知识体系的架构图不能上传到C站当中，感兴趣的朋友可以私聊，本文只能是用文章的方式对思维导图进行总结，文章内容很多，我尽量做到句句是重点！
一、vue学习路线
1、Vue的使用
1.1 学会模板插值、指令
学会使用插值、什么是表达式、了解什么是指令、什么是动态属性已经v-html标签（注意：v-html这个标签会有XSS风险，它会将我们的子组件覆盖掉）
1.2watch属性
要注意的一点是，在watch这个属性下，它是不会进行深度监听的，如果监听是为了引用流就会拿不到oldval,因为这个时候的指针是一样的，但是已经指向了新的val;另外一点要注意的是应用类型的话需要对watch+一个deep：这样true属性才能实现深度的监听。
1.3computed属性
computed属性会缓存，所以就需要data有变化的时候才会进行重新计算！
1.4 class和style
学会掌握class和style使用动态属性以及驼峰式写法。
<div id="app"> <p :class="(black:isBalck,red:isRed)">使用class</p> <p :class="[black,yellow]">使用class 数组</p> <p :class="styleData">使用style</p> </div> data(){ return { isBlack:true, idRed:true, black:'black', red:'red', styleData:{ fontSize:'20px', //转换为驼峰式 color:'blue', backgroundColor:'#ccc' //转换为驼峰式 } } },
1.5 v-if和v-show属性
学会什么是v-if和什么是v-show。v-if是判断出来什么就显示什么，其他的练DOM节点都不给渲染；v-show则是判断什么就显示什么，其他的就是用display：node给隐藏起来，但是还是要进行渲染的。
<div id="app"> <p v-if="type === 'qbt'">QBT</p> <p v-else-if="type === 'cfl'">CFL</p> <p v-else>显示其他</p> <p v-show="type === 'qbt'">show显示</p> <p v-show="type === 'cfl'">show显示cfl</p> </div> <script> export default{ data(){ return { type:'a' } } } </script>
1.6 v-for属性
学会什么是v-for循环属性，还要注意的是在使用v-for属性的时候要，key需要和业务相关的id,不可以随意的写。
<body> <div id="app"> <p>遍历数组</p> <ul> <li v-for="{ite,index} in listarr" :key="item.id"> {{index}}--{{itemid}}--{{item.title}} </li> </ul> <p>遍历对象</p> <ul> <li v-for="(val,key,index) in list1" :key="key"> {{index}}--{{key}}--{{val.title}} </li> </ul> </div> </body> export default{ data(){ return { listarr:{ { id:'a',title:'主题一'}, { id:'b',title:'主题二'}, }, listobj:{ a:{title:'主题一'}, b:{title:'主题二'}, } } } }
1.7 事件 event参数
学会什么是event事件参数，注意：如果函数不需要传递参数的话可以直接在定义直接在定义的时候获取event。如果需要传递参数就需要通过￥event带引用过来。event的构造函数是MouseEvent，target是时间监听的地方也是时间挂载的地方，currentTarget是时间触发的地方。
<body> <div id="app"> <p>{{num}}</p> <button @click="increnent1">加一</button> <button @click="increnent2(2,$event)">加二</button> </div> </body> <script> export default{ data(){ return { num:0 } } }
1.8事件修饰符
熟悉掌握什么是时间修饰符，熟练掌握，下面罗列了一系列事件修饰符的案例：
<body> <div id="app"> <!-- 阻止单击事件继续传输 --> <p v-on:click.stop="dothis"></p> <!-- 提交事件不再重置啊页面 --> <p v-on:submit.prevent="onsubmit"></p> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="dothat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器的时候使用事件捕获模式 --> <!-- 内部元素触发的时间先在这里处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="dothis">完成这个</div> <!-- 只当在event.target是当前元素自身触发的时候处理函数 --> <!-- 简单而言，就是时间不是从内部元素触发的 --> <div v-on:click.self="dothat">完成那个</div> </div> </body>
1.9按键修饰符
熟悉掌握什么是按键修饰符，熟练掌握，下面罗列了一系列按键修饰符的案例：
<body> <div id="app"> <!-- 即使年下alt或者shift，呗一同按下的时候也会触发 --> <button @click.ctrl="onclick">按下</button> <!-- 有且只有CTRL被按下的时候才能触发 --> <button @click.ctrl.exact="onCtrlCLick">按下</button> <!-- 没有任何系统修饰符按下的时候才能被触发 --> <button @click.exact="onclick">按下</button> </div> </body>
1.10表单
1、了解使用v-model标签；
2、熟悉掌握常见的表单项textarea、CheckBox、radio、select；
3、学会使用常见的修饰符lazy、number、trim.
<body> <div id="app"> <p>输入框{{name}}</p> <input type="text" v-model.trim="name"/> <input type="text" v-model.lazy="name"/> <input type="text" v-model.number="name"/> <p>多行文本{{desc}}</p> <textarea v-model="desc"></textarea> <!-- 注意：这样的写法是错误的：<textarea>{{desc}}</textarea> --> <p>复选框 {{check@name}}</p> <input type="checkbox" id="1" value="1" v-model="checkbox"> <label for="1">no1</label> <input type="checkbox" id="2" value="2" v-model="checkbox"> <label for="2">no2</label> </div> </body>
2、组件
2.1 生命周期
- 了解生命周期的三个阶段：挂载、更新、销毁阶段；
- 了解父子组件是要等子组件完成才能完成父组件。
2.2 props（类型与默认值）
掌握了解其定义，当父组件将数据传递到子组件的时候，这里是list；props可以直接写数组，但是写成对象的形式的话就可以定义米欧认知和类型。了解到父组件到子组件之间是数据的传递，子组件到父组件是事件的调用。
<body> <div id="app"> <input @add="addhand"/> <List :list="list" @delete="deletehand"></List> </div> </body> <script> import input from './input' import List from './List' export default{ components: { input, List }, data(){ return { List:[ { id:'11', title:'主体1' } ] } } }
<body> <div> <ul> <li v-for="item in list" :key="item.id">{{item.title}} <button @click="deleteitem(item.id)">删掉ID</button> </li> </ul> </div> </body> <script> import event from './event' export default{ props:{ list:{ type:Array, default(){ return [] } } }, methods:{ addtitle(){ // 调用父组件事件 this.$emit('add',this.title) // 调用自己定义的时间 event.$emit('onAddtitle',this.title) this.title = '' } }
2.3 自定义事件
理解自定义事件是什么：就是组件之间的通讯不仅仅是props+$emit,还有我们的自定义的时间；自定义事件是为了处理除了父子组件之间的通讯。
调用自己定义的事件：
event.$emit('onAddtitle',this.title)
及时销毁，不然会有可能造成内存泄漏
beforeDestory(){ event.$off('onAddtitle',this.addtitlehander) }
3、高级特性
3.1自定义v-model
第一步，我们要先接受一个props，并且要定义好model，注意的是命名名字要保持一致，然后再定义一个event作为触发事件，这个也要一致，再然后可以去标签当中去绑定变量和事件。
<body> <div> <p>高级特效</p> </hr> <!-- 自定义 v-model --> <p>{{name}}</p> <MyVNodel v-model="name"></MyVNodel> </div> </body> <script> import MyVNodel from './MyVNodel' export default{ components: { MyVNodel },
3.2 $nextTick
记住以下三点：1、vue是异步渲染得；2、data数据改变之后，DOM是不会立即渲染的；3、$nextTick会在DOM渲染之后会触发，以获取最新的DOM节点。
// 异步渲染 $nextTick待DOM渲染玩再回调 //页面渲染的时候会将data的修改做整合，多次data修改智慧渲染一次 this.$nextTick(){ // 获取DOM元素 const ulElem = thsi.$refs.ul1 console.log(ulElem.childNodes.length) } }
要注意的是操作DOM的时候需要拿到DOM才能用到。多次改变data就会渲染一次，nextTick就会只执行一次。
3.3 slot插槽
slot插槽的使用大家可以翻博主往期的博客，比这边总结的更加详细。注意的是slot插槽就是接收外部莹莹的子节点，组件什么的都可以插入，当啊人不传的话就会显示slot的默认内容。
<body> <div> <a href="url"> <slot>你写的内容，没有写的话 就会显示默认的内容</slot> <!-- 简单地说，默认内容的话，急速父组件没有设置内容，就会在这里显示 --> </a> </div> </body> <script> export default{ props:['url'], data(){ return {} },
3.4作用域插槽
总结：这个是使用slot的子组件中多了一个data，如果不传内容的话，就会显示我们data里面的内容，那么把这个子组件的data给到哪里使用？这个就会给到我们的作用域插槽，scoped，需要在子组件随意定义一个属性绑定到我们的data里面的数据，父组件调用就不能直接写，需要写template，指定v-slot，然后就可以使用子组件中的slot的值了。
<body> <div> <a href="url"> <slot>{{myweb}}</slot> </a> </div> </body> <script> export default{ myweb:['http://xxxxxx.com'],//仅仅是个例子 title:'博客没人看！！！', }
3.5 具名插槽
除了以上罗列出来的插槽，当然还有更加简单粗暴的，那就是我们的具体名字的插槽，我们称其为具名插槽，顾名思义就是那一些含有名字的插槽。
<body> <!-- 使用具名插槽 --> <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot></slot> </footer> </div> </body>
3.6 动态组件
了解什么是动态组件？知道其用法：is=“组件名”的这个用法.再者，要注意的是那些比较常见的页面，需要根据数据来确定具体渲染什么；注意的还有data中组件的名字，nextTick要和注册和引入的组件的名字要一样的，简单而言，急速需要根据数据动态的渲染的场景，组件的类型不能确定。
<component :is="NextTickname"></component> <script> export default{ data(){ return { name:'xxx', myweb:{ url:'http://xxxxx.com', title:'xxxx', }, NextTickname:"NextTick" } }
3.7 keep-alive
学会知道什么是keep-alive.再者，要注意的是不需要我们频繁的渲染比如tab页、按钮点击显示的内容；还要了解的是keep-alive和v-show的区别，v-show是直接修改css当中的display，简单粗暴，但是keep-alive是在vue的层级框架爱对js的对象渲染控制。
<body> <div> <keep-alive> <KeepAliveStageA v-if="state === 'A'"/> <KeepAliveStageB v-if="state === 'B'"/> <KeepAliveStageC v-if="state === 'C'"/> </keep-alive> </div> </body>
二、vue周边工具
1、Vuex
1.1用于Vuex的配置选项
了解的是Vuex里面包含有的配置选项分别有什么，这里可以一一的罗列出来，分别有：state、getters、action、mutation。
1.2用于vue的配置选项
了解的是用于vue的配置选项都有哪些、以及应该怎么使用这一些配置选项，这里还是罗列一下，分别有：dispatch、commit、mapstate、mapGeeters、mapActions、mapMutations.
小结：只要了解这一些配置选项即可，对于我来说没必要要死记硬背，只要你会用就可以了，这里为什么没有罗列实例代码，是因为之前写了相关的博文，比这里更加的详细，大家可以移步到相关的博文浏览，这里小编贴心的把相关的链接给大家放出来：
2、vue-router
2.1 动态路由
了解并掌握vue-router路由的配置已经什么是动态路由。
const User = { // 获取参数 template: '<div>User {{ $router.params.id}}<div/>' } const router = new VueRouter({ router:[ // 动态路径参数 以：开头 { path:'/user:id',component:User } ] })
2.2 懒加载
了解掌握什么是懒加载以及懒加载应该怎么使用（配合动态组件使用），我们的路由懒加载其实就是利用import函数去异步加载组件而已。
<script> export default new VueRouter({ router:[ { path:'/', component:()=>import({ './../component/myadd' }) }, { path:'/feedback', component:()=>import({ './../component/mydelete' }) } ] }) </script>
2.3 剩下的工具（统一放在一起）
突然发现剩下的组件一个个写的话，文章太长了，才想起这是个归纳思维导图的，没必要全部一一写下来，大家用到什么就去学什么就好了，学习是自己的。
- to 配置选项
- push 配置选项
- history 配置选项
- hash 配置选项
