# h5Kuangija

**Repository Path**: htmhl/h5-kuangija

## Basic Information

- **Project Name**: h5Kuangija
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-26
- **Last Updated**: 2021-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue

[官网](https://cn.vuejs.org/)

## MVVM

M - Model，数据，纯JavaScript对象

V - View，视图，用于显示渲染数据

VM - ViewModel，关联 Model 与 View，双向数据绑定

利用数据驱动视图渲染

## 版本

2.x

3.x

## 使用

### 安装

[开发版本文件](https://cn.vuejs.org/js/vue.js)

[生产版本文件](https://cn.vuejs.org/js/vue.min.js)

### 声明式渲染

```html
<div id="app">
    {{ message }}
</div>

// ViewModel
const vm = new Vue({
    el: '#app', // View
    data: { // Model
        message: 'Hello'
    }
})
```

`data` 对象中的数据会被自动挂载到 Vue 对象实例下，即可以直接通过 `vm.message` 使用到 data 中的 `message` 属性。

## 模板语法

### 插值

`{{ expression }}` -- “Mustache” 语法（双花括号）

双花括号语法会将表达式内容转义以避免 XSS （跨站脚本攻击）

##### 原始 HTML

`v-html` 用于渲染 HTML 文本，注意，不建议直接使用 `v-html` 渲染用户输入数据，除非确定该数据可信。

`v-text` 用于渲染纯文本

### 指令

就是在标签中添加的以 `v-` 开头的，有特殊意义的属性。

指令的值（`=` 后的内容）也是 JavaScript 表达式。

`v-html`：渲染HTML文本

`v-text`：渲染纯文本

`v-bind`：动态绑定属性值，可简写为 `:`

`v-on`：绑定事件，可简写为 `@`

`v-for`：列表渲染，可用于循环遍历数组的每个元素，或对象的每个属性。如：

- `<li v-for="(hobby, index) of hobbies">{{ index }} -- {{ hobby }}</li>`
- `<li v-for="(value, key, index) of address">{{ index }} -- {{ key }} -- {{ value }}</li>`
- `<li v-for="i in 10">{{ i }}</li>`

`v-model`：在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。是一个语法糖

`v-if`：条件渲染（`v-if`、`v-else-if`、`v-else`）

​		`v-if` 是操作 DOM 树实现元素显示/隐藏（隐藏时会销毁DOM树中对应节点，显示时会重建DOM树中的对应节点）

​		**注意：**当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。**不推荐**同时使用 `v-if` 和 `v-for`。

`v-show`：条件渲染

​		`v-show` 是操作节点的 CSS 样式来实现元素显示/隐藏（隐藏时将元素的 CSS 样式中的 display 设置为 none，显示时则删除掉 display 属性）

​		`v-if` 与 `v-show` 的区别：一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。

`v-slot`：使用插槽，简写为 `#`。

## Ref

在标签中添加 `ref` 属性，以便于在方法中通过 `this.$refs` 获取到对应绑定的 DOM 元素

## Class、Style 绑定

可以绑定字符串，在 Vue 中也做了对 class、style 绑定的功能增强，即也可以绑定对象或数组结构。

## 计算属性与侦听器

计算属性（computed）通常是根据已有数据计算出新数据。

侦听器（watch）通常是监视某个数据的变化，由该数据的变化引起其它操作的发生（数据改变或副作用操作）

### 计算属性 VS 方法

- 计算属性是可以缓存的，**计算属性是基于它们的响应式依赖进行缓存的**。只在相关响应式依赖发生改变时它们才会重新求计算属性的值。
- 方法没有缓存，每调用一次方法，都会重新执行方法主体内容。

### 计算属性 VS 侦听器

- 计算属性有缓存，侦听器没有缓存
- 计算属性通常是**由一个或多个**已有数据计算生成**一个**新数据；侦听器是侦听**一个**数据的变化，由一个数据的变化导致一个或多个其它数据变化
- 计算属性中不包含副作用操作，而侦听器中可以包含副作用操作（比如 ajax 网络请求）

## 组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

### 使用

#### **定义选项对象：**

```js
{
    template: ``,
    data() { return {} },
    methods: {},
    computed: {},
    watch: {},
}
```

注意：

- template 中布局结构必须使用**单个根元素**包裹整个布局内容
- 组件中的 data 必须是函数。如果将 data 设计为普通对象，则多个组件实例都引用到的是同一个对象，当其中某一个组件实例修改数据后，其它组件实例会相应受影响，与实际需求有差异。

#### **注册组件**：

##### 全局注册：

```js
Vue.component(组件名, 选项对象)
```

全局注册的组件可在全局范围内所有组件中都使用到。

##### 局部注册：

```js
const parentOptions = {
    template: ``,
    components: { // 在父组件中注册子组件（局部注册）
        组件名: 选项对象
    }
}
```

局部注册的组件只能在其父组件内部使用。

#### **使用组件：**

将组件名作为标签，在布局结构中根据实际需求进行布局。

注意：使用组件名作为标签时，应该将组件名驼峰命名规范改为短横线命名规范（全小写，各单词间使用 `-` 分隔），如：

```html
<div id="app">
    <todo-input></todo-input>
</div>
```

### Slot - 插槽

`<slot>`，用于在使用组件时，向组件分发自定义布局结构。

匿名插槽：

```html
<slot>
	<h1>
        默认的主标题
    </h1>
</slot>
```

具名（命名）插槽：

```html
<slot name="title">
	<h1>
        默认的主标题
    </h1>
</slot>
```

使用具名插槽：

```html
<!-- vue 2.6 以前，使用 slot 属性 -->
<h1 slot="title">
    自定义的主标题
</h1>

<!-- vue 2.6 以后，推荐使用 v-slot 指令 -->
<template v-slot:title>
    <h1>
    	自定义的主标题
	</h1>
</template>
<!-- 或 -->
<template #title>
    <h1>
    	自定义的主标题
	</h1>
</template>
```

### 组件通信

组件通信就是在组件之间实现数据传递。

#### 父子组件通信

- 父传子：属性(props)
- 子传父：事件。在父组件中使用子组件时，绑定一个自定义事件，在子组件需要传递数据时，触发(`$emit`)在父组件中绑定的事件并传递参数。

#### 跨组件跨层级通信

- 转换为父子组件通信
- event-bus（事件总线）：利用事件（借助一个空的全局 Vue 实例），在需要接收数据的组件中绑定事件（`$on`），在需要传递数据的组件中触发事件(`$emit`)。
- vuex：集中式状态管理

### 组件生命周期

生命周期是组件从创建到销毁所经历的一系列过程。在这个过程中，Vue 提供了 **生命周期钩子** 的函数，以便能够在正常的生命周期过程中添加一些用户额外需要执行的任务。

![https://cn.vuejs.org/images/lifecycle.png](https://cn.vuejs.org/images/lifecycle.png)

各阶段：

- create 阶段：初始创建
  - beforeCreate()：还未将 data 中的数据注入挂载到 vue 实例下
  - created()：已经将 data 中的数据注入挂载到 vue 实例下。可在该方法中发起网络请求，以请求页面初始渲染的数据。
- mount 阶段：挂载（将组件模板中所写的布局内容变成DOM树结构中的节点）
  - beforeMount()
  - mounted()：在该方法中，可以获取到渲染后的 DOM 节点并处理。
- update 阶段：更新，当 data 数据或 props 属性等发生变化时，触发
  - beforeUpdate()
  - updated()
- destroy 阶段：销毁，释放资源，一般会释放的资源：定时器，注册的事件监听，打开的网络请求
  - beforeDestroy()
  - destroyed()

## 单文件组件

文件扩展名为 `.vue` 的文件称为 **single-file components (单文件组件)**：

```html
<template>
  <div>布局</div>
</template>

<script>
  // 逻辑交互
</script>

<style>
  /* 样式 */
</style>
```

在 vscode 中需要安装扩展程序 `Vetur`，安装该扩展程序后，单文件组件中才有代码高亮显示。

## 可复用性

### 自定义指令（directive）

```js
// 全局
Vue.directive(指令名称, 选项对象)

// 局部
const componentOptions = {
    directives: {
        指令名称: 选项
    }
}
```

### 过滤器（filter）

vue 中可实现自定义过滤器，以格式化字符串内容，通常日期时间、商品金额会实现格式化。

过滤器可以用在两个地方：**双花括号插值和 `v-bind` 表达式**，应该被添加在 JavaScript 表达式的尾部，由“管道”符号（`|`）指示：

```js
// 全局
Vue.filter(过滤器名称, 回调函数)

// 局部
const componentOptions = {
    filters: {
        过滤器名称: 回调函数
    }
}
```

### 插件（plugin）

定义：

```js
MyPlugin.install = function() {
    Vue.component()
    Vue.filter()
    Vue.prototyoe.$bus = new Vue()
}
```

使用：

```js
Vue.use(插件)
```

### 混入（mixin）

```js
// 全局
Vue.mixin({
    created() {}
})

// 局部

```

### 渲染函数

render()

```js
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
```

createElement() 用于创建虚拟元素节点

#### 虚拟 DOM

在内存中保存的一个对象，与真实 DOM 树节点映射。

可以使用 `createElement()` 方法来创建元素节点。

```js
template: 
`<div>
    <a href="#" target="_blank">链接</a>
    <ul class="list">
        <li class="active">1</li>
        <li>2</li>
    </ul>
</div>`
```

```js
const node = createElement(
	'div',
    null,
    [
        createElement(
        	'a',
            {href: '#', target: '_blank'},
            ['链接']
        ),
        createElement(
        	'ul',
            {className: 'list'},
            [
                createElement(
                	'li',
                    {className: 'active'},
                    ['1']
                ),
                createElement(
                	'li',
                    null,
                    ['2']
                ),
            ]
        )
    ]
)
```

```js
const node = {
    tag: 'div',
    props: null,
    children: [
        {
            tag: 'a',
            props: {href: 'xxx', target: 'xxx'},
            children: ['xxx']
        },
        {
            tag: 'ul',
            props: {className: 'xxx'},
            children: [
                {
                    tag: 'li',
                    props: {className: 'xxx'},
                    children: ['1']
                },
                {
                    tag: 'li',
                    props: null,
                    children: ['2']
                },
            ]
        }
    ]
}
```

```js
var newNode = {
    tag: 'div',
    props: null,
    children: [
        {
            tag: 'ul',
            props: {className: 'xxx', key: ""},
            children: [
                {
                    tag: 'li',
                    props: {className: 'xxx', key: '1'},
                    children: ['1']
                },
                {
                    tag: 'li',
                    props: {key: '2'},
                    children: ['2']
                },
            ]
        }
    ]
}
```

## 响应式原理

### 如何追踪变化

`Object.defineProperty()` 方法来劫持 data 中的数据，提供 getter/setter 方法。

## 过滤与动画

Vue 提供了 `transition` 的封装组件

# 网络请求

## ajax

核心对象：XMLHttpRequest (xhr)

API：

open(method, url, async)

setRequestHeader('Content-Type')

send(params)

onreadystatechange

readyState：就绪状态码，0、1、2、3、4

status：HTTP状态码，200

responseText

## fetch

fetch(url).then(res => res.json()).then(data => console.log(data))

# 模块化

规范

- AMD - require.js
  - define() -- 定义模块
  - require()/requirejs() -- 引入依赖模块
- CMD - sea.js
- CommonJS - NodeJS
- ES6 Module
  - import -- 引入模块
  - export -- 导出（定义）模块

# Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统（脚手架）。

## SPA

single page application，单页面应用程序

SPA 应用中，html 页面只有一个，通过前端路由的方式实现组件（页面）间的切换。

## 使用

### 安装

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

使用 `vue --version` 测试是否安装成功，如果安装成功，则可以看到版本提示信息。

### 创建项目

- 图形化方式

```bash
$ vue ui
```

- 命令行方式

```bash
$ vue create <proj-name>
```

![img](./images/vue-cli-1.jpg)

![img](.\images\vue-cli-2.jpg)

![image-20210429094603870](.\images\vue-cli-3.jpg)

![image-20210429094654343](.\images\vue-cli-4.jpg)

![image-20210429094738215](.\images\vue-cli-5.jpg)

![image-20210429094838799](.\images\vue-cli-6.jpg)

![image-20210429095016674](.\images\vue-cli-7.jpg)

![image-20210429095155775](.\images\vue-cli-8.jpg)

### package.json

项目的配置文件，项目相关的依赖包资源及其它的配置资源位于该文件中，方便项目移植。

`npm scripts`：

```json
{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "start": "npm run serve"
    }
}
```

```bash
$ npm run serve # 开发环境下执行的脚本，会启动开发者服务器，当项目代码修改时，能够提供热更新等效果，或直接执行 npm start (可以省略 run)

$ npm run build # 生产环境执行的脚本，会构建生成生产环境下的代码（代码的压缩混淆等）

$ npm run lint # 格式校验、自动代码格式化
```

### src 目录

源代码目录，我们自己开发所书写的代码放置在该目录下。

#### main.js

这是整个 SPA 单页应用的入口 JS 文件。

# Vue Router

路由：根据路由，可以实现不同页面的跳转。

- 后端路由：根据不同的 url 在服务端返回不同的响应结果（需要经过服务端webserver处理）
- 前端路由：不会向服务端发起新的请求，而是在前端通过相应 JavaScript 处理以实现不同界面（组件）的切换。

## 前端路由模式（原理-面试）

- hash 路由

在 url 中使用 #xxx 表示 hash 值。当 url 中的 hash 值发生改变时，不会向服务端发起新的请求。

可在 JavaScript 中监听 hash 值变化，当 hash 变化时，跳转到对应变化后相关联的组件中渲染。

使用 `window.onhashchange` 来监听 hash 值变化，可以使用 `location.hash` 获取到变化后的 hash 值。

- history 路由

利用的是 h5 中 history 对象新增的 API （pushState()、replaceState()）来实现的，监听 popstate 事件来实现前进后退操作。 

history 路由在 url 中不存在特殊的符号（与 hash 路由的区别就是没有“丑陋”的`#`），和后端路由的 url 格式是一样的。所以要使用 history 路由，通常还需要服务端配置。

## 使用 Vue Router

### 安装

```bash
$ npm i vue-router
# 或
$ yarn add vue-router
```

### 使用

```js
import VueRouter from 'vue-router' // 引入模块
/* 路由组件 */
import Home from './views/Home'
// 使用插件
Vue.use(VueRouter)
// 创建 VueRouter 对象实例
const router = new VueRouter({
  mode: 'hash', // 不取 mode 时，默认为 hash，也可以 history
  routes: [ // 配置路由路径与组件的关联关系
    {
      path: '/home', // 路由路径
      component: Home // 需要关联渲染的路由组件
    }
  ]
})

new Vue({
  router, // 向 Vue 根实例中注入 router 路由对象的使用
  render: h => h(App)
}).$mount('#app')
```

### 两个组件

- `<router-link to="">`：导航组件，默认是超级链接，点击可实现页面跳转
- `<router-view>`：视图组件，是一个容器，用于渲染路由路径对应关联的路由组件

### 组件注入

当在 Vue 根实例中注入 router 使用后，每个组件中都可以使用到以下两个属性：

- $router：代表的是 VueRouter 对象实例
- $route：代表当前激活的路由对象

# UI 组件库

移动端：[vant](https://vant-contrib.gitee.io/vant/#/zh-CN/)、[mint-ui](http://mint-ui.github.io/#!/zh-cn)

PC端：[element-ui](https://element.eleme.cn/#/zh-CN)、[iview](http://v1.iviewui.com/)、[ant design vue](https://www.antdv.com/docs/vue/introduce-cn/)

## 安装

```bash
$ npm i vant
```

## 引入组件

- 按需引入：仅引入项目中使用到的组件，未使用的组件不引入。这样，项目打包时体积不会太大（推荐）
- 完全引入：将所有组件都引入到项目中，可能会增大项目打包的体积（不推荐）