《知识点累积》Vue2.x

1.强制刷新

vm.$forceUpdate()

2.特殊变量 $event

内联处理器中的方法 和 API 指令 v-on 中都有介绍。

可参考此篇：Vue 获取事件的 event 对象(2种方式)

3.动态加载 Vue 文件

加载文件夹 components 下全部 vue 文件，使用 AMD 的 require

const modulesFiles = require.context('./components/', true, /\.vue$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    const value = modulesFiles(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});

export default modules;
1
2
3
4
5
6
7
8
9
10
11

组件中引入

import resultComponents from '@js/index.js'
1

组件中导入

components: {
	...resultComponents
}
1
2
3

4.v-for 与 ref

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

**正确定义：**也就是说 ref=h3 可以 不唯一，不要与 id混淆，id 是唯一。且 ref="h3Span" 也是数组

<h3 ref="h100" >100h3>

<h3 v-for="i of 5" :key="i" ref="h3" >
    <span ref="h3Span">{{i}}span>
h3>
1
2
3
4
5

**累赘定义：**这样每个 ref 都是一个数组

<h3 v-for="i of 5" :key="i" :ref="`hFor${i}`" >{{i}}h3>
1
2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-156LnOGW-1673406045067)(…/images/v-for与ref.png)]

5.阻止事件冒泡

click.stop，两种方式：1.元素直接阻止(第 5 行)；2.父元素阻止(第 9 行)；

<template>
    <div>
        
        <div class="item" @click="onItem">
            <button @click.stop="onBtn">点击button>
        div>
        
        <div class="item" @click="onItem">
            <span @click.stop>
                <button @click="onBtn">点击button>
            span>
        div>
    div>
template>
<script>
export default {
    methods: {
        onItem() {
            console.log('item')
        },
        onBtn() {
            console.log('button')
        }
    }
}
script>
<style>
.item {
    height: 35px;
    background: #666;
    margin: 10px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

6.访问元素或组件：$root、$parent、$ref、provide/inject

• $root：访问根实例，
• $parent：访问父级组件
• $ref：访问子组件或子元素，
• provide/inject：依赖注入，小技巧：依赖注入是给子组件使用，但同级无法使用，可以使用 $root，也可以使用$root._provide实现依赖注入，但这样没必要。。。

7.env.xxx 配置文件

// 开发环境下的配置文件
.env.development
// 生产环境下的配置文件
.env.production
1
2
3
4

• 在项目根目录下新建文件 .env.development 和 .env.production；

• # 是注释， 必须以 VUE_APP_ 开头；

• 修改文件后必须重启；

# 环境类型
VUE_APP_BASE_TYPE = 'development'
1
2