# vue-study

**Repository Path**: salute83/vue2-study

## Basic Information

- **Project Name**: vue-study
- **Description**: 学习前端框架 Vue
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-19
- **Last Updated**: 2022-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1 参考资料

1. [Diff算法](https://zhuanlan.zhihu.com/p/361244148)
2. [MVVM模型](http://t.csdn.cn/zaEHx)

## 2 Vue 介绍

### 2.1 Vue 是什么
Vue是 用于 `构建用户界面` 的 `渐进式` JavaScript 框架
-  渐进式：Vue可以自底向上逐层的应用
   -  简单应用：只需要一个轻量小巧的核心库
   -  复杂应用：可以引入各式各样的插件


### 2.2 Vue 的特点
1. 采用`组件式`模式。提高代码复用率、且让代码更好维护
   一个 `.vue` 文件就是一个组件，`.vue` 包含 `html,css,js` 代码
2. `声明式`编码，让编码人员无需直接操作DOM,提高开发效率
   - 原生的 js 采用 `命令式` 编码,需要一步一步说明。（需要喝水：拿水杯，开瓶子，喝水）
   - 与`命令式编码`相对的就是`声明式编码`，采用 vue 指令。（需要喝水：口渴喝水）
3. 使用虚拟DOM + 优秀的Diff 算法，尽量复用 DOM 节点。
   - 原生 js 中的真实DOM：原有的数据有：张三，李四，王五。第二次获取的数据有：张三，李四，王五，赵六。用第二次的数据直接整体替换第一次的数据。
   - 虚拟DOM：虚拟DOM在 数据 和 真实DOM 之间，原有的数据有：张三，李四，王五。第二次获取的数据有：张三，李四，王五，赵六。第一次的数据不变，新增一个赵六的数据。（类似于内存）
   - Diff 算法：Diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。
   
     **具体流程：**
   
     1. 真实 DOM 与虚拟 DOM 之间存在一个映射关系。这个映射关系依靠初始化时的 JSX 建立完成；
     2. 当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等；
     3. 最后再根据 patch 去更新真实的 DOM，反馈到用户的界面上。
   
     ![img](https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208192235350.jpeg)

### 2.3 基础知识
1. ES6 语法规范 和 ES6 模块化
2. 包管理器
3. 原型，原型链
4. 数组常用方法
5. axios 和 promise
8. ……

### 2.4 MVVM 模型

MVVM 模型 全称： `Model View ViewModel`

- M：模型([Model](https://so.csdn.net/so/search?q=Model&spm=1001.2101.3001.7020)) ：对应 data 中的数据
- V：视图(View) ：模板
- VM：视图模型(ViewModel) ： Vue 实例对象

MVVM 模型的核心的就是 `ViewModel` 。`ViewModel` 包含 `DOM Listeners` 和 `Data Bindings`。

![MVVM模型](https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208192243493.png)

### 2.5 MVC 和 MVVM 的区别
MVC - Model View Controller( controller: 控制器 )，M 和 V 和 MVVM 中的 M 和 V 意思一样，C 指页面业务逻辑。使用 MVC 的目的就是将 M 和 V 的代码分离，但 MVC 是单向通信，也就是将 Model 渲染到 View 上，必须通过 Controller 来承上启下。

MVC 和 MVVM 的区别(关系)并不是 ViewModel 完全取代了 Controller 。

ViewModel 目的在于抽离 Controller 中的数据渲染功能，而不是替代。其他操作业务等还是应该放在 Controller 中实现，这样就实现了业务逻辑组件的复用。

### 2.6 Vue 官网
1. [Vue2 官网](https://v2.cn.vuejs.org/)
2. [Vue2 教程](https://v2.cn.vuejs.org/v2/guide/)
3. [Vue2 API](https://v2.cn.vuejs.org/v2/api/)
4. [Vue2 风格指南](https://v2.cn.vuejs.org/v2/style-guide/)
5. [Vue 官网推荐插件](https://v2.cn.vuejs.org/v2/style-guide/)


## 3 安装 Vue

### 3.1 安装 Vue 开发者工具
1. 下载扩展文件
   - [点击下载Vue2_dev_tools](http://qiniu.83start.xyz/Tools/Vue/dev_tools/vue_dev_tools.crx)
   - [点击下载Vue3_dev_tools](http://qiniu.83start.xyz/Tools/Vue/dev_tools/vue_dev_tools.crx)

2. 打开`Chrome 扩展程序`

![image-20220819185547622](https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208191855850.png)

![image-20220819185930337](https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208191859434.png)

### 3.2 直接用 \<script> 标签引入

1. 下载版本
   - [开发版本 "包含完整的警告和调试模式"](https://v2.cn.vuejs.org/js/vue.js)
   - [生产版本 "删除了警告，37.32KB min+gzip"](https://v2.cn.vuejs.org/js/vue.min.js)

2. CDN 引入

```html
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
```

```html
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```

## 4 Vue 的基本语法

### 4.1 模板语法
> Vue 的模板语法有两种：
> - 插值语法（双大括号表达式）：`{{message}}`
> - 指令语法（以 v- 开头）：`v-bind`

#### 4.1.1 插值语法
1. 功能：用于解析标签体内容
2. 语法：{{xxxx}}，xxxx会作为js表达式解析。
3. 代码：
   ```html
    <div id="app">
        {{message}}
    </div>
   
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue'
            }
        })
    </script>
   ```

#### 4.1.2 指令语法
1. 功能：解析标签属性，解析标签体内容，绑定事件
2. 举例：v-bind:href="xxxx",xxxx会作为js表达式解析
3. 说明：Vue 中有很多的指令，此处只是用 v-bind 举个例子
4. 代码：
   ```html
       <div id="app2">
        <span v-bind:title="message">
            鼠标悬停几秒查看此处动态绑定的提示信息！！！
        </span>
    </div>
   
    <script>
        var app2  = new Vue({
            el:'#app2',
            data:{
                message:"页面加载于" + new Date().toLocaleString(),
            }
        })
    </script>
   ```

### 4.2 数据绑定

#### 4.2.1 单向绑定
1. 语法：`v-bind:href = "xxxx"`,简写为`:href = "xxxx"`
2. 特点：只能从 `data` 流向页面
3. 代码：

   ```html
       <!-- ===================== 单向绑定 ====================== -->
       <h1>单向绑定</h1>
       <div id="app_1">
           <span>{{name}}</span>
           <div>全写：<input type="text" v-bind:value = "name"></div>
           <div>简写：<input type="text" :value = "name"></div>
       </div>
   
       <script>
           new Vue({
               el: '#app_1',
               data: {
                   name:"jia you er nv"
               }
           })
       </script>
   ```

4. 演示：

   <img src="https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208192324057.gif" alt="单向绑定" style="zoom:200%;" />

#### 4.2.2 双向绑定

1. 语法：`v-model:value = "xxxx"`，简写为`v-model = "xxxx"`

2. 特点：数据不仅能从 `data` 流向页面，也能从页面流向 `data`

3. 注意：v-model只能应用在表单类元素（输入类元素）上

4. 代码：

   ```HTML
       <!-- ===================== 双向绑定 ====================== -->
       <h1>双向绑定</h1>
       <div id="app_2">
           <span>{{name}}</span>
           <div>全写：<input type="text" v-model:value = "name"></div>
           <div>简写：<input type="text" v-model = "name"></div>
       </div>
   
       <script>
           new Vue({
               el: '#app_2',
               data: {
                   name:"jia you er nv"
               }
           })
       </script>
   ```

5. 演示：

   <img src="https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208192325593.gif" alt="双向绑定" style="zoom:200%;" />

### 4.3 事件处理

#### 4.3.1 绑定监听

1. 语法：`v-on:xxx = “fun”`，`@xxx = “fun”`，`@xxx = “fun(参数)”`
2. 默认事件形参：`event`
3. 隐含属性对象：`$event`

#### 4.3.2 事件修饰符

1. prevent：阻止事件的默认行为`event.preventDefault()`
2. stop：停止事件冒泡`event.stopPropagation()`

#### 4.3.3 按键修饰符

1. keycode：操作的式某个`keycode`值的键
2. keyName：操作的某个按键名的键（少部分）

### 4.4 计算属性与监视

#### 4.4.1 计算属性 `-computed`

1. 要显示的数据不存在，要通过计算得来
2. 在`computed`对象中定义计算属性
3. 在页面中使用`{{方法名}}`来显示计算的结果

#### 4.4.2 监视属性 `-watch`

1. 通过`vm`对象的`$watch()`或`watch`配置来监视指定的属性
2. 当属性变化时，回调函数自动调用，在函数内部进行计算

### 4.5 class 与 style 绑定事件

> 1. 在应用界面中，某个（些）元素的样式式变化的
> 2. `class/style` 绑定就是专门用来实现动态样式效果的技术

#### 4.5.1 class 绑定

1. 语法：`:class = “xxxx”`，`xxxx` 是表达式
2. 表达式是字符串：`“classA”`
3. 表达式是对象：`{classA : isA , classB : isB}`
4. 表达式是数组：`[‘’classA,‘classB’]`

#### 4.5.2 style 绑定事件

1. 语法：`:style = “{color:active_color,fontSize:font_size + ‘px’}”`
2. 注意：其中`active_color`和`font_size` 是 `data` 属性

### 4.6 条件渲染

> 条件渲染的指令：
>
> - v-if ，v-else-if，v-else 
> - v-show
>
> v-if 和 v-show 比较
>
> - 如果需要频繁切换`v-show`比较好
> - 当条件不成立时，`v-if` 的所有的子节点不会解析（在项目中使用）

#### 4.6.1 v-if，v-else-if，v-else

#### 4.6.2 v-show

### 4.7 循环渲染

#### 4.7.1 遍历数组

#### 4.7.2 遍历对象

### 4.8 收集表单数据

### 4.9 过滤器

1. 功能：对要显示的数据进行特定格式化后显示
2. 注意：并没有改变原来的数据，是产生新的对应的数据

### 4.10 内置指令与自定义指令

#### 4.10.1 常用内置指令

| 序列 | 指令      | 说明                                                         |
| ---- | --------- | ------------------------------------------------------------ |
| 01   | v-text    | 更新元素的`textContent`                                      |
| 02   | v-html    | 更新元素的`innerHTML`                                        |
| 03   | v-if      | 如果为`true`，当前标签才会输出到页面                         |
| 04   | v-else-if | 如果标签前的`v-if` 和 `v-else-if` 都为`false` ，此标签为`true`时，当前标签才会输出到页面 |
| 05   | v-else    | 如果`v-if` 和 `v-else-if`都为`false`时候，当前标签才会输出到页面 |
| 06   | v-show    | 通过控制`display`样式来控制`显示/隐藏`                       |
| 07   | v-for     | 遍历`数组/对象`                                              |
| 08   | v-on      | 绑定事件监听，一般简写为`@on`                                |
| 09   | v-bind    | 单向绑定，绑定解析表达式，可以省略`v-bind`                   |
| 10   | v-model   | 双向数据绑定                                                 |
| 11   | v-clock   | 防止闪现，与CSS配合：`[v-cloak]{display:none}`               |

#### 4.10.2 自定义指定

1. 注册全局指令

   ```javascript
   Vue.directive('my-directive',function(el,binding){
   	el.innerHTML = binding.value.toupperCase()
   })
   ```

2. 注册局部指令

   ```javascript
   directives:{
       'my-directive':{
           bind(el,binding){
               el.innerHTML = binding.value.toupperCase()
           }
       }
   }
   ```

3. 使用指令

   ```html
   v-my-directive = "xxxx"
   ```

### 4.11 Vue 实例生命周期

#### 4.11.1 生命周期流程图

![生命周期](https://83-cloud-space.oss-cn-shenzhen.aliyuncs.com/File/HaloFile/202208200021955.png)

#### 4.11.2 Vue生命周期分析

1. 初始化显示
   - beforeCreate( )
   - created( )
   - beforeMount( )
   - mounted( )
2. 更新状态：this.xxxx = value
   - beforeUpdate( )
   - updated( )
3. 销毁 vue 实例：vm.$destory( )
   - beforeDestory( )
   - destoryed( )

#### 4.11.3 常用的生命周期方法

1. mountid( )：发送ajax请求，启动定时器等异步任务
2. beforeDestory( )：做收尾工作，如：清除定时器

## 5 Vue 组件化编程

### 5.1 模块与组件、模块化与组件化

#### 5.1.1 模块

1. 理解：向外提供特定功能的js程序，一般就是一个js文件
2. 为什么：js 文件很多很复杂
3. 作用：复用js，简化js的编写，提高js的运行效率

#### 5.1.2 组件

1. 理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image……）
2. 为什么：一个界面的功能很复杂
3. 作用：复用编码，简化项目编程，提高运行效率

#### 5.1.3 模块化

当应用的js都是以模块来编写的，那这个应用就是一个模块化的应用。

#### 5.1.4 组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

### 5.2 非单文件组件

1. 模板编写没有提示
2. 没有构建过程，无法将ES6转化为ES5
3. 不支持组件的CSS
4. 真正开发中几乎不用

### 5.3 单文件组件

#### 5.3.1 .vue 文件的组成

1. 模板页面

   ```html
   <template>
   	页面模板
   </template>
   ```

2. JS 模块对象

   ```html
   <script>
       export default {
           data(){
               return {
                   ……
               }
           },
           methods:{
               ……
           },
           computed:{
               ……
           },
           components:{
               ……
           }
       }
   </script>
   ```

3. 样式

   ```html
   <style>
   	样式定义
   </style>
   ```

#### 5.3.2 基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

## 6 使用Vue脚手架

### 6.1 初始化脚手架

#### 6.1.1 说明

1. Vue 脚手架式Vue 官方提供的标准化开发工具（开发平台）
2. 文档：https://cli.vuejs.org/zh/

#### 6.1.2 具体步骤

1. 全局安装 @vue/cli

   ```bash
   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli
   ```

2. **切换到你要创建项目的目录**，使用命令创建命令

   ```bash
   cd xxx/xxx/xxx/
   
   vue create xxxx
   ```

3. 启动项目

   ```bash
   npm run serve
   ```

> - 如果出现下载缓慢，可以使用 npm 淘宝镜像：`npm config set registry http://registry.npm.taobao.org`
> - Vue 脚手架隐藏了所有webpack 的相关配置，若想看具体的 webpack 配置，可以使用：`vue inspect > output.js`

#### 6.1.3 模块项目的结构

```
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
```