前端学习Vue入门复盘笔记

一、邂逅Vue.js

二、Vue基础语法

三、组件化开发

四、Webpack

五、VueCLI详解

六、Vue-router

七、Vuex详解

八、网络封装

九、项目实战

-------------------------------------------------------------------------------------------------------------------

一、邂逅Vue.js

1.Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试，Vue3 请参阅 Vue3 教程。

除此还有1.解耦视图和数据 2.可复用的组件 3.前端路由技术 4.状态管理 5.虚拟DOM等特点

2.、安装Vue.js

方式一：直接CDN引入（开发环境、生产环境）

方法二：官网下载和引入

方法三：NPM安装

3.拓展

1.响应式编程：就是基于reactor的思想，当你做一个带有一定延迟的才能够返回的io操作时，不会阻塞，而是立刻返回一个流，并且订阅这个流，当这个流上产生了返回数据，可以立刻得到通知并调用回调函数处理数据。

2.MVVM框架：MVVM是Model-View-ViewModel的简写。 即模型-视图-视图模型。 模型 指的是后端传递的数据。 视图 指的是所看到的页面。

4.附图 

原声Vue引入、创建、配置、使用的过程

二、Vue基础语法

1.Mustache语法：Mustache是一个logic-less（轻逻辑）模板解析引擎，. 它是为了使用户界面与业务数据（内容）分离而产生的，用{{ }}表示。

2.常用插值指令：

v-once：只显示第一次{{xxx}}中渲染的数据，当{{xxx}}对应的值改变也不会跟着改变

v-html：完全更新标签之间的内容,可以直接指定数据

v-text：完全更新标签之间的内容,可以解析网页结构

v-bind：动态地绑定一个或多个 attribute，如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令

v-for：基于源数据多次渲染元素或模板块,说白了，对数据进行遍历

v-mode：可以实现数据与元素的双向绑定，常用表单双向绑定：input、radio、checkbox、selec

v-on：为元素绑定事件。表达式可以是一个方法的名字或一个内联语句

v-show：通过为元素设置display样式实现元素的显示和隐藏

v-if：根据所指定的表达式的值有条件地渲染元素

3.部分指令的修饰符：

4.拓展

冒泡事件：在一个对象上触发某类事件，这个事件会向这个对象的的父级传播，从里到外，直至它被处理或者到达了对象层次的最顶层，即document对象。这个过程就是JavaScript的事件冒泡。

 计算属性：

1.computed：计算属性 ，依赖其他计算值，并且 computed 的值有缓存，只有当 计算 值变化才会返回内容（ computed 的值在 getter 执行后是会缓存的，只有在它依赖的 属性 值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来 计算 ）

2.computed传参：没有传参的计算属性返回的是最终的计算结果，而通过闭包传参之后返回的是一个函数，这个函数执行之后再得到结果，那么这个和使用methods仿佛已经没了区别。可以说，传参之后的计算属性已经不能称为计算属性，它甚至不能缓存数据，而使用计算属性的目的之一，就是缓存数据。

3.computed与methods、watch：

3.1 computed和methods、watch最大的区别在于只有在当前的属性发生变化之后才会被触发。所以computed可以很大程度上提高优化的程度。
3.2 变化频率高，比如样式、搜索更适合用computed
3.3 computed中每一个方法都必须有return，因为computed中包含的每一个方法最后一定会返回一个属性，也就是某一个值（对象、number、String等），methods中的方法不是必须要返回一个值。
3.4 对于computed和methods的用法，基本一样。
3.5 对于methods中的函数，不管运行结果是否变化，都会把函数执行一遍；对于computed中的函数，只执行值有改变的函数。

Computed特点：
需要主动调用，具有缓存能力只有数据再次改变才会重新渲染，
否则就会直接拿取缓存中的数据。

Watch特点：
无论在哪只要被绑定数据发生变化Watch就会响应，
这个特点很适合在异步操作时用上。

4.代码片段

 5.拓展

Vue中的watch:watch它可以用来监测Vue实例上的数据变动,watch可以理解为响应式侦听全局变量,watch里绑定全局变量，被绑定全局变量发生改变vue就自动触发watch里面对应的函数

数组常用的方法：

push ：向数组的末尾添加新元素
pop()：删除数组的最后一项
shift()：删除数组的第一项
unshift()：向数组首位添加新元素
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
join()：用指定的分隔符将数组每一项拼接为字符串
concat()：用于连接两个或多个数组
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
includes()：判断一个数组是否包含一个指定的值
sort()：对数组的元素进行排序
reverse()：对数组进行倒序
forEach()：ES5及以下循环遍历数组每一项
map：ES6循环遍历数组每一项

Vue数组方法中哪个不是响应式的：直接根据数组下标索引修改数组值的不是响应式。

三、Vue组件化开发

1.组件化开发：Vue是单页面开发，Vue的单页面开发其实很简单又很抽象，单页面是指唯一的Vue示例，也就是main.js里的new Vue({})；那么多页面的效果是怎么实现的呢？这就依赖于组件化开发，每一个子页面都由多个组件构成，在url改变时刷新并渲染不同的组件群，这就达到了多页面的效果。组件化开发是为了提高代码的可复用性，以及方便团队分工协作开发。

2.组件化开发的基本使用：

2.1 创建组件构造器对象   Vue.extend

2.2.注册组件  Vue.component

2.3使用组件  <my-cpn></my-cpn>

 3.父子组件

 4.组件中的数据存放

       组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据 

 5.组件之间的通讯

父子组件之间的通信：通过props向子组件传递数据，通过事件（$emil event)向父组件发送消息

 

 

 6.组件之间的访问

 

 7.组件插槽

 组件插槽可以分为匿名插槽、具名插槽、作用域插槽

<slot>标签内可以设置默认数据，展示插槽未激活状态：<slot>默认数据</slot>

插槽可以指定名称，未指定的称为匿名插槽，指定name的称为具名插槽

作用域插槽：子组件提供数据，父组件决定展示方式

 8.拓展

编译作用域：官方准则：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译

闭包函数：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

（因为作用域的原因，在函数外部就无法拿到函数中的变量和内部函数。通常我们需要使用函数中的变量时，才去将变量返回的办法。同理，在使用内部函数时，我们也可以将函数名作为返回值返回。 这是闭包最常用的方式。）

接口模块化：仅仅使用闭包函数，代码复用性差，定义接口模块是目前前端开发的雏形，目前已经有很多成熟的模块化规范：CommonJS(node.js)、AMD、ES6的Modules

 commenJS:导出（exports)、导入（require)--------------------需要导入底层代码支撑

（问问题：1.https://github.com2.https://stackoverflow.com ）

四、Webpack(https://www.webpackjs.com/)

1.wabpack:Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。(静态资源打包工具）

 2.wabpack起步

创建文件夹：mkdir dist

打包main.js: webpack src/main.js dist/bundle.js

3.webpack配置

打包文件路径配置：创建 webpack.config.js 文件，模块入口及出口配置，自动获取出口绝对路径，接下来直接执行webpack命令即可打包bundle.js

 

 Loader配置:在webpack.condig.js中的module关键字下进行配置，将Typescriptz转成ES5代码、将scss、less转成css,将高级的ES6转成ES5代码，将jsx、.vue文件转成js文件等等

 Vue配置：自动解析.js/.css/.vue文件，此类文件在引用时后缀名可以省略

 Vue插件配置：

版权声明插件插件：webpack.BannerPlugin

index.html打包插件：html-webpack-plugin

bundle压缩插件：uglifyjswebpackplugin

 Vue配置文件分离：开发文件与生产文件相分离，开发时base+dev

五、Vue-CLI详解(Vue CLI (vuejs.org))

Vue-cli： 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板

 安装：

 创建项目：

 目录结构：

 

 Vue-cli2与Vue-cl3的区别：

CLI 2和CLI 3第一个区别是npm包的包名，CLI 3并没有沿用CLI 2的vue-cli，而是另起为@vue/cli,文件目录结构也有所不同，文件配置也有所不同

 CLI2：

安装：npm install -g vue-cli

创建：vue init webpack vue-test

运行：npm run dev

watch:使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行

CLI3:

安装：npm install -g @vue/cli

创建：vue create < project-name> / vue ui

运行：npm run serve

watch:只有依赖那个属性的 watcher 才会重新运行 ，这样使得变更通知更加精准

 六、Vue-router

Vue Router： 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由用于设定访问路径，并将路径和组件映射起来。 （传统页面切换是用超链接a标签进行切换）包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

基本使用：

1.导入并创建router实例

 2.创建并配置router对象

 3.创建路由组件

4.导入路由组件

5.component配置路由映射关系

6.使用路由

7.获取活跃路由对象this.$route

 

 8.挂载到Vue实例上

9.拓展

异步编程Promise：

Promise是一部编程的一种解决方案,ajax网络请求可能会遇到回调地狱，难看不易于维护,一般情况下有异步操作时使用Promise进行封装,请求与数据处理模块分离，优雅易读,

promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）

 Promise的链式编程：

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

 Promise.all函数:

promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列之后，我们可以把他作为一个变量传递到其他地方。

 七、Vuex详解

Vuex： 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（需要安装网页插件DevTools，做代码调试使用）

 1.下载安装并引入

2.创建对象

Vuex 依赖 Promise，state响应式存储全局状态

3.mutations

state数据只能通过mutations修改,mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。并且它会接受 state 作为第一个参数，在此做的是同步操作，这样devtools可以追踪数据

 

通过this.$store.commit("mutatinos事件");触发

 4.getters

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

getters可以通过属性或方法的方式访问，这取决于他的返回值形式,接受 state 作为第一个参数

通过$store.getters.计算属性；调用

5.actions

Action 提交的是 mutation，而不是直接变更状态,我们可以在 action 内部执行异步操作,接受一个context作为参数

 通过this.$store.dispatch("actions事件");触发

6.module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

 7.辅助函数

mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

引入：

import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'

映射：

...mapState([函数1，函数2])
...mapGetters([函数1，函数2])
...mapMutations([函数1，函数2])
...mapActions([函数1，函数2])

八、网络封装

1.AJAX

AJAX就是异步的JS和XML(JSON)可以在浏览器中向服务器发生异步请求，最大优势：无刷新获取数据,AJAX不是新的编程语言，而是将现有的标准组合到一起使用的新方式

AJAX优点：

1、最大的一点是页面无刷新，给用户的体验非常好。
2、具有更加迅速的响应能力。
3、减轻服务器和带宽的负担，节约空间和宽带租用成本。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

AJAX缺点：

1.没有浏览记录，不能返回

2.存在同源跨域问题

3.SEO不友好（爬虫无法爬取到）

exprese:

 AJAX有多种实现方式：jQuery、axios、全局fetch()、原=原生ajax，其中axios是最常用的方式

引入：

 使用：

 

 2.跨域：

       同源策略是浏览器的一种安全机制/策略，协议、域名、端口三者必须保持一致，AJAX默认遵循同源策略，而违背同源策略就是跨域，增设多台服务器就会涉及跨域问题，跨域的第一个解决方案---JSONP，JSONP是非官方的跨域解决方案，只支持GET请求，在网页中有一些标签天生具有跨域的能力---比如：img link iframe script，JSONP 就是利用script标签来实现跨域的。

       官方解决跨域问题的办法是：CORS，CORS就是跨域资源共享，是官方解决跨域方案，CORS的特点就是不需要客户端做任何特殊的操作，完全在服务器中进行处理，CORS支持get和post请求，CORS设置了一组HTTP响应头设置

 <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js">

 

 3.HTTP协议

 注：个人前端vue入门复盘笔记，就读bilibili大学，师从coderwhy老师。（项目实战另写一篇）