# vue-learn-senior

**Repository Path**: front-learning/vue-learn-senior

## Basic Information

- **Project Name**: vue-learn-senior
- **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-08-25
- **Last Updated**: 2021-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE LEARN

## 脚手架文件结构

	├── 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：包版本控制文件

## 不同版本的Vue

首先，`import Vue from 'vue'`引入了vue组件，但是该组件中有很多版本的vue，其中，在vue文件夹中的`package.json`文件中，`"module": "dist/vue.runtime.esm.js"`这句话表示如果是以es6的语法，那么实际依赖的是vue.runtime.esm.js文件。而esm表示es module的意思。
    1. vue.js 与 vue.runtime.xxx.js的区别：
        a. vue.js是完整版的Vue，包含：核心功能+模板解释器
        b. vue.runtime.xxx.js是运行版的Vue，只包括核心功能，没有模板解释器。
    2. 因为vue.runtime.xxx.js没有模板解释器，所以不能使用template配置项（不是template标签形式），所以需要使用render函数接受createElement函数去指定具体内容。

## vue.config.js配置文件
1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh
```javascript
module.exports = {
    pages: {
        index: {
            entry: 'src/main.js' // 入口文件
        }
    },

    lintOnSave: false //关闭lint语法检查。否则未使用的代码，方法会编译错误。
}
```

## ref属性

1. 被用来给元素或者子组件注册引用信息（替代id）
2. 应用在html标签上获取的是真实的dom元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
    打标识：

    ````html
        <h1 ref="xxx"></h1>
        <ComponentA ref="xxx"></ComponentA>
    ````

    

    获取：
    this.$refs.xxx

## 配置项props


功能：让组件接受外部传过来的数据
1. 传递数据：
~~~javascript
    <MyTag myProp="xxx"></MyTag>
~~~

2. 接受数据
(1) 接受:

~~~javascript
    export default {
        ...
        props:['myProp']
    }
~~~
(2) 限制类型:
~~~javascript
    export default {
        ...
        props:{
            myProp:String,
            myProp2:Number,
            ...
        }
    }
~~~
(3) 限制类型，限制必要性，指定默认值
~~~javascript
    export default {
        ...
        props:{
            myProp:{
                type:String,
                required:true,
            },
            myProp2:{
                type:Number,
                default:99
            },
            ...
        }
    }
~~~
3. 备注：
(1) props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告。
(2) **Vue对`props`的读取要早于`data`**。因此，如果业务需要修改，可以在`data`中定义一个属性，并且将`props`中的属性赋值给`data`中的属性。然后修改`data`中属性。


## mixin(混入)
功能：可以把多个组件公用的配置提取成一个混入对象
使用方式：
1. 定义混合，并导出(export)
````javascript
    export const mixinObj = {
        data(){}, 
        methods: {
            showName() {
                alert(this.name)
            },
        },
        mounted() {
            console.log("你好啊")
        }
    }
````
其中，`data`和`methods`如果发生重复，以组件内部为准。而`mounted`等生命周期函数发生重复，则混合其中的内容，先执行混入对象定义的内容，然后执行组件内定义的内容。
    
2. 使用混入，例如：
(1)全局混入：Vue.mixin(xxx)。全局混入后，关于生命周期的方法，所有组件都会执行
(2)局部混入：
```javascript
    import { xxx } from "../mixin";
    ...
    ...
    export default {
        ...
        mixins:[xxx]
    }
```

## plugins 插件
功能：用于增强Vue
本质：包含一个`install`方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
1. 定义插件：
~~~javascript
export default {
    install(Vue, p1, p2, p3) {
        Vue.filter('charSplice', function (value) {
            return value.slice(0, 4);
        })


        Vue.directive('big', function (element, binding) {
            element.innerText = binding.value * 10
        });

        Vue.mixin({
            data(){
                return {
                    a0:10,
                    a1:100
                }
            },
            mounted() {
                console.log("你好啊")
            }
        })

        Vue.prototype.hello = (name) => alert('你好啊，'+name)
    }
}
~~~

2. 使用插件
~~~JavaScript
import plugins from './plugins'

Vue.use(plugins, p1, p2, p3)
~~~

## scoped 样式
作用：让样式在局部生效，防止冲突。原理：通过添加scoped，vue会在对应元素上添加唯一字符串属性，然后使用属性样式选择器，为该元素添加样式。
写法：`<style scoped>`
> 备注：
>在没有使用scoped的时候：
>1. 在同一级别组件中，同名的样式先加载被后加载的覆盖
>2. 父子组件中，父组件的样式会将子组件覆盖。

## 总结TodoList案例
1. 组件化编码流程

    (1) 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
    
    (2) 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
    - 一个组件在用：放在组件自身即可
    - 一些组件在用：放在他们共同的父组件上（状态提升）
    
    (3) 实现交互：从绑定事件开始
2. props适用于：
   
    (1)父组件 ==> 子组件通信：使用属性
    
    (2)子组件 ==> 父组件通信：使用函数，父组件准备函数，给子组件调用（回调）

3.  使用v-model是要切记：v-model绑定的值，不能是props传递的值，因为props的值是不可以修改的。props传递的值是对象形式，修改对象属性，vue不会报错，但是不推荐这样做。

## webStorage

1. 存储内容一般支持5M左右（不同浏览器不太一样）

2. window.localStorage和 window.sessionStorage统称为webStorage。浏览器通过他们来实现本地存储，不同的是sessionStorage关闭浏览器后自动清空。而localStorage需要手动调用api清除或者清空浏览器对应缓存才可以。

3. 相关API：

    (1) `xxxxxStorage.setItem('key','value')`
    该方法接受一个键和值，会把键值对添加到存储中，如果键名已存在，则更新对应的值。如果value为对象，转成字符串`JSON.stringify(Object)`来处理。

    (2) `xxxxxStorage.getItem('key')`
    该方法接受一个键作为参数，返回键名对应的值。如果key对应的value是对象字符串，那么需要使用`JSON.parse(Object)`转成对象。如果key对应的value获取不到，那么getItem的返回值是null，`JSON.parse(null)`的结果仍然是`null`。

    (3) `xxxxxStorage.removeItem('key')`
    该方法接受一个键作为参数，并且把该键名从存储中删除

    (4) `xxxxxStorage.clear()`
    该方法会清空存储中所有的数据。


## 组件的自定义事件
1. 一种组件间的通信方式，适用于： 子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3. 绑定自定义事件：
    - 第一种：在父组件中：`<Comp @atguigu='test'/>` 或者 `<Comp v-on:atguigu='test'/>`

    - 第二种：在父组件中

    ~~~html
    <Comp ref="demo"/>
    ~~~

    然后

    ~~~javascript
    mounted(){
        this.$refs.xxx.$on('atguigu',this.test)
    }
    ~~~

    - 若是想让自定义事件只执行一次，可以使用指令的`once`修饰符，也可以用`$once`方法

4. 触发自定义事件：`this.$emit('atguigu',数据)`

5. 解绑自定义事件：`this.$off('atguigu') `或者`this.$off(['atguigu','ev2'])` 或者`this.$off()`解绑全部

6. 组件上可以绑定原生`DOM`事件，需要使用`native`修饰符

7. 注意：通过`this.$refs.xxx.$on('atguigu',Fun(){})`绑定自定义事件，**回调函数要么需要配置在method中，要么用箭头函数**。否则`this`的指向会出问题。

## 全局事件总线(GlobalEventBus)
1. 一种组件间通信的方式，适用于任意组件间通信

2. 安装全局事件总线

~~~javaScript
new Vue({

    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    }
})
~~~

3. 使用事件总线

    - 接收数据：A组件想要接收数据，则在A组件中给$bus绑定自定义事件，事件的回调在A组件自身

    ~~~javaScript
    methods(){
        fun(data){
            
        }
    }
    mounted(){
        this.$bus.$on('myEvent',this.fun)
    }
    ~~~

    - 提供数据：在需要往A组件发送数据的B组件或者C组件中调用该事件发送数据
    
    ~~~javaScript
    this.$bus.$emit('myEvent',data)
    ~~~

4. 最好在提供数据的组件中的`beforeDestroy`钩子中，用`$off`去解绑组件所用到的事件。

## 消息订阅与发布(pubsub)

1. 一种组件通信的方式，适用于任意组件通信

2. 使用步骤
    - 安装`pubsub`: `npm i pubsub-js`

    - import :`import pubsub from 'pubsub-js'`

    - 数据订阅方：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
    
    ~~~javascript
        methods(){
            demo(data){
                // do something
            }
        }

        mounted(){
            this.pid = pubsub.subscribe('msg_name',this.demo) //订阅消息
        }
    ~~~

    - 数据发布方：`pubsub.publish('msg_name', data)`

    - 最好在`beforeDestroy`钩子中，用`pubsub.unsubscribe(pid)` 去取消订阅


## nextTick

1. 语法: `this.$nextTick(()=>{})`。`this`指的是vue。

2. 作用：在下一次DOM更新结束后，执行其指定的回调。

3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，执行在nextTick中的回调函数。


## Vue封装的过渡与动画

1. 作用：在插入、更新或移除DOM时，在合适的时候给元素添加样式类名

2. 图示：

3. 写法：

    - 准备好样式：
        - 进入的样式
            - v-enter: 进入的起点
            - v-enter-active: 进入过程中
            - v-enter-to: 进入的终点

        - 元素离开的样式
            - v-leave: 离开的起点
            - v-leave-active: 离开过程中
            - v-leave-to: 离开的终点

    - 使用`<transition>` 包裹要过渡的元素，并配置`name`属性：
    ~~~html
        <transition name='hello'>
            <h1 v-show='isShow'>你好啊</h1>
        </transition>
    ~~~

    - 备注: 若有多个元素需要过渡，则需要使用`<transition-group>`,且每个元素都要指定`key`值


## vue脚手架配置代理

### 方法一
在vue.config.js中添加如下配置
~~~javascript
devServer:{
    proxy:"http://localhost:5000"
}
~~~

说明：
1. 优点：配置简单，请求资源时，直接发给前端8080即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

### 方法二

编写vue.config.js配置具体代理规则

~~~javascript
    devServer: {
        proxy: {
            '/cars': {//匹配所有已'/cars'开头的请求
                target: 'http://localhost:5001/',
                ws: true,//用于支持websocket
                changeOrigin: true //用于控制请求头的host值。false隐藏真实的值
            },
            '/students': {
                target: 'http://localhost:5000/'
                // pathRewrite:{'要替换的前缀':'替换成的值'}  //类似于重定向
            }
        }
    },
~~~

说明：

1. 优点：可以配置多个代理，并且可以灵活的控制请求是否走代理

2. 缺点：配置略微繁琐，请求资源时必须加前缀

3. 关于`changeOrigin`，字面意思是否改变请求最初的地址。
    
    - True: 修改请求最初的地址，那么服务器收到的请求头中的host为：localhost:5000
    - False: 不修改请求最初的地址，那么服务器收到的请求头中的host为：localhost:8080
    - 在Vue3中，默认是`True`。而Vue2中，默认是`False`


## 插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于`父组件 ==> 子组件`

2. 分类：默认插槽，具名插槽，作用域插槽

3. 使用方式

    - 默认插槽：只能有一个插槽，使用`<slot>默认显示内容（无值的时候显示）</slot>`

    - 具名插槽：可以有多个插槽，使用`<slot name='slotName'></slot>`。然后在使用的时候，需要指定内容插入到哪个插槽。
    
    ```vue
        <Comp>
            <template slot='slotName'>
                <div>html结构</div>
            </template>
        </Comp>
    ```

    - 作用域插槽：数据在组件内部，使用者会根据个人需要选择性使用组件内部的数据。关键字`scope`，配合使用结构性赋值，可以方便的在调用组件内部的数据。