图南zzz

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实例

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


    {
    {message}}

6.基础语法

v-bind

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

v-if系列

v-if
v-else-if
v-else

v-for

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


    
        {
    {item.message}}

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-title的待办标题组件和todo-items的待办内容组件

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

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

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

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

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

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的方法中

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文件，放在项目的根目录下
测试代码
```
   title      名称：{
      {info.name}}
 地址：{
      {info.address.country}}-{
      {info.address.city}}- {
      {info.address.street}}
 链接：{
      {info.url}} 
 
     
```
1. 在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
2. 使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
3. 我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！
4. 在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们
5. 用自己注册的 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

    Hello APP
            首页        会员管理

编写js

13.Vue-Cli

脚手架

主要的功能:

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

安装vue-cli

cnpm install vue-cli -gvue list

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

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