Vue---巩固笔记

Vue

1.前端三要素

HTML（结构）
CSS（表现）
JavaScript（行为）：弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页行为

CSS预处理器

简介：

定义了一种新的语言，用于进行CSS的编码工作，进行Web界面样式设计，再通过编译器转化成正常的CSS文件，以供项目使用。

常用的CSS预处理器：

SASS：基于Ruby，荣国服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高
LESS：基于Node JS，通过客户端处理，使用简单。功能比SASS简单，效率比SASS低，可满足一般需求。

JavaScript框架

jQuery库

优点在于简化了DOM操作，缺点是DOM操作太频繁，影响性能。

Angular库

特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript，对前端程序有不太友好。

React库

Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中虚拟DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言。

Vue

一套渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点。

Axios

前端通信框架，因为Vue的边界很明确，就是为了处理DOM，所以并不具有通信能力，此时就需要额外使用一个通信框架与服务器交互，当然也可以直接选择使用jQuery提供你的AJAX通信功能

2.JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

3.前端所需后端计数

NodeJS框架及项目管理工具如下：

Express：Node JS框架
Koa：Express简化版
NPM：项目综合管理工具，类似于Maven
YARN：NPM的替代方案，类似Maven和Gradle的关系

4.UI框架

常用

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的一种用于前端开发的开源工具包
AmazeUI：一款HTML5跨屏前端框架
Layui：轻量级框架

iView

一个强大的基于Vue的框架，基础组件比elementui的组件更丰富，主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式，基于npm + webpack + babel开发，支持ES6高质量、功能丰富友好的API，自由灵活地使用空间

特点：移动端支持较多

ElementUI

基本涵盖后端所需的所有组件，文档讲解详细，主要用于PC端开发，是质量比较高的Vue UI组件古

特点：桌面端支持多

ICE

以React为主，对Vue的支持不太完善

CubeUI

轻量灵活，拓展性强，方便二次开发

Flutter

Google出品，特点是快速构建原生APP应用程序，如果做混合应用该框架必选

5.MVVM模式

介绍

MVVM是一种软件架构设计模式，是一种简化用户界面的实践驱动编程方式。

MVVM源于经典的MVC。MVVM的核心是View Model层，负责转换Model中数据对象来让数据更加容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

MVVM已经相当成熟了，当下流行的MVVM框架由Vue.js，Angularjs等。

为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：

低耦合：试图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：测试可以针对ViewModel来写。

MVVM的组成部分

View：

View是视图层，也就是用户界面。前端主要由HTML和CSS构建，各大MVVM框架如：Vue.js，AngularJS，EJS等都有自己用来构建用户界面的内置模板语言。

Model：

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操纵，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。

ViewModel：

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的试图数据模型。

需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的。

比如页面这一块展示什么，那一块展示什么这些都属于视图状态
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）

双向绑定：ViewModel可以完整去描述View层，View层的内容也会实时展示在ViewModel层中。

View层展现的不是Model层的数据，而是viewModel的数据，由ViewModel负责与Model层交互，这就完全耦合了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM(HTML操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

因此Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

Vue的优势

轻量级，体积比Angular和React小
移动优先，更加适合移动端
容易上手
吸收了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能
开源，社区的活跃度高

上手案例

//创建一个Vue实例
<script type = "text/javascript">var vm = new vue({el:'#vue',		//绑定元素的IDdata:{message:'hello vue!'	//数据对象中有一个名为message的属性};})
</script>

将数据绑定到页面元素（视图层）

<div id = "vue">{{message}}
</div>

6.基础语法

v-bind

v-bind可以简写为冒号（：）

v-if系列

v-if
v-else-if
v-else

<body><div id="app"><h1 v-if="type === 'A'">A</h1><h1 v-else-if="type === 'B'">B</h1><h1 v-else="type === 'C'">C</h1></div><script>var vm = new Vue({el:'#app',data:{type:'A'}})</script>       
</body>

v-for

主要用于读取数组元素，如items是一个数组元素迭代的别名

<div id = 'app'><li v-for="item in items">{{item.message}}</li>
</div>

v-on

用于监听事件，v-on可以简写为@，比如v-on:click可以简写为@click，用法：@click=“函数名(methods)”

v-model

与v-bind不同的是，它是双向绑定的，当数据发生变化的时候，视图会发生变化，当视图发生变化的时候，数据也会发生变化。

在用v-model处理表单、之类的元素时，可以实时更新，并且对一些极端场景进行一些特殊处理。

7.组件

组件就是可服用的Vue实例，有点像自定义标签。

组件之间一般也会存在各种关系。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HrCx8a9-1633504457821)(C:\Users\86135\AppData\Roaming\Typora\typora-user-images\image-20210929145455844.png)]

说明：

Vue.component()：注册组件
my-component-li:自定义组件的姓名
template：组件的模板

如果需要传递参数到组件的话，就需要使props属性了！

8.属性计算computed

计算属性的重点突出在属性两个字上，计算指的是函数，属性可以理解为缓存

methods和computed的区别

说明：

methods：定义方法，调用方法使用方法名（），需要带括号
computed：定义计算属性，调用属性，不需要带括号，一般是对data中的数据进行一定处理之后返回到view中
两者不能重名

结论：

调用方法时，每次都需要进行计算，每次都会产生开销，如果这个结果不是经常变化的，就可以考虑缓存起来。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销

9.插槽slot

在Vue中使用元素，作为承载分发内容的出口，作者称其为查早，可以应用在组合组件的场景中；

比如准备制作一个待办事项组件（todo），该组件由代办标题（todo-title）和代办内容（todo-items）组成，但这三个组件又是相互独立的。

第一步：定义一个待办事项的组件，留出插槽slot

<todo></todo>
<script type="text/javascript">
//定义一个待办事项的组件Vue.component('todo',{template:'<div>\<slot name ="todo-title"></slot>\<ui>\<slot name="todo-items"></slot>\</ui>\</div>'});
</script>

第二步：定义一个名为todo-title的待办标题组件和todo-items的待办内容组件

Vue.component('todo-title',{props:['title'],template:'<div>{{title}}</div>'
});

Vue.component('todo-items',{props:['item','index'],template:'<li>{{index + 1}}.{{item}}</li>'
});

第三步：实例化Vue并初始化数据

new Vue({el : '#APP',data:{todoItems:['A','B','C']}
})

第四步：将这些值通过插槽插入

<div id="app">    <todo>    	<todo-title slot="todo-title" title="...."></todo-title>        <todo-items slot="todo-items" v-for="(item,index) in todoItems"                    :item="item" :index="index"></todo-items>    </todo></div>

10.自定义事件

数据项在Vue的实例中，但删除操作要在组件中完成。为了删除操作更好进行，涉及到参数传递和事件分发，Vue为我们提供了自定义事件的功能很好地帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’，参数)

在vue实例中，增加了methods对象并定义了一个名为removeTodoItems的方法

new vue({	el:'#app',	deta{		todoItems:['A','B','C']	},	methods:{		//该方法可以被模板中自定义事件出发        removeTodoItems：function(index){            this.todoItems.splice(index,1);        }	}})

修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法中

<todo-items slot="todo-items" v-for="(item,index) in todoItems"            :item="item"	:index="index"            v-on:remove="removeTodoItems(index)"></todo-items>

11.Axios

简介

Axios是一个开源的，可以在浏览器端和NodeJS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

优势

由于Vue.JS是一个视图层框架，并且坐着严格遵守关注度分离原则，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为DOM操作太频繁！

案例

创建一个JSON文件，放在项目的根目录下
测试代码

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"> <title>title</title> <!--v-cloak 解决闪烁问题--> <style> [v-cloak] { 	display: none; }</style> </head> <body> <div id="vue" v-cloak> <div>名称：{{info.name}}</div> <div>地址：{{info.address.country}}-{{info.address.city}}- {{info.address.street}}</div> <div>链接：<a :href="info.url" target="_blank">{{info.url}}</a> </div> </div> <!--引入 JS 文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data(){ 	return { 		info: { 			name: null, 			address: { 			country: null, 			city: null, 			street: null 			},		url: null 		} },mounted() { //钩子函数 	axios   	 	.get('data.json') 		.then(response => (this.info = response.data)); } }); </script> </body></html>

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！
在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们
用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

Vue的生命周期函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UbS1wJ1q-1633504457824)(C:\Users\86135\Desktop\files\vue\资料（含课件）\02_原理图\生命周期.png)]

12.认识路由

Vue.js路由允许我们通过不同的URL访问不同的内容通过Vue.js可以实现多视图的单页Web应用

创建router文件夹
npm下载资源
```
npm install vuenpm install vue-router
```
新建一个lib目录，将资源复制出来
创建一个路由.html
引入vue-router.min.js

编写html

<div id = "app">    <h1>Hello APP</h1>    <p>        <router-link to="/">首页</router-link>        <router-link to="/student">会员管理</router-link>    </p>    <router-view></router-view></div>

编写js

<script>    //1.定义路由组件    const welcome = { template:'<div>欢迎</div>' }    const Student = { template:'<div>student list</div>' }    //2.定义路由    //每个路由应该映射一共组件    const routes=[         { path:'/',redirect:'/welcome' },         { path:'/welcome', component:welcome },         { path:'/student', component:student },    ]    //3.创建router实例，然后传'router'配置    const router = new VueRouter({        routes:routes    })    //4.创建和挂在根实例    //从而让整个应用都有路由功能    new Vue({        el:'#app',        router    })</script>

13.Vue-Cli

脚手架

主要的功能:

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

安装vue-cli

cnpm install vue-cli -gvue list

创建第一个vue-cli的应用程序

新建一个文件夹vue-cli
创建一个基于webpack模板的vue应用程序
```
vue init webpack myvue
```