# Vue2

**Repository Path**: dugeyang/Vue2

## Basic Information

- **Project Name**: Vue2
- **Description**: vue2的学习笔ssssssss
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-16
- **Last Updated**: 2022-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_test

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

## 笔记

## ref属性
    1.被用来给元素或子组件注册引用信息（id的替代者）
    2.应用在html标签上获取的真实dom元素，应用在组件标签上是组件实例对象（vc）
    3.使用方式
        打标识 <h1 ref="xxx"></h1> 或 <School ref="xxx"></School>
        获取：this.$refs.xxx

## 配置项props
    功能：让组件接受外部传来的数据
        (1)传递数据
            <Demo name="xxx">
        (2)接受数据
            第一种方式（只接受）
            props:["name"]

            第二种方式（限制类型）
            props:{
                name:String
            }

            第三种方式（限制类型，限制必要性，指定默认值）
            props:{
                name:{
                    type:String,//类型
                    required:true,//必要性
                    default:"老王"//默认值
                }
            }
    备注：props是只读的，vue底层回监测你对props的修改，会发出警告,
            若要修改，复制一份props到data中，修改data的数据

## mixin(混入)
    功能：可以把多个组件公用的配置提取成一个混入对象
    使用方式：
        第一步定义混合：
            {
                data(){},
                methods:{}
            }
        第二部使用混合：
            (1)全局混入，Vue.mixin(xxx)
            (2)局部混入，mixins:["xxx"]

## 插件
    功能：用于曾强Vue
    本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
    定义插件
        对象.install = function(Vue,options){
            //添加全局过滤器
            Vue.filter(...)

            //添加全局指令
            Vue.directive(...)

            //配置全局混入
            Vue.mixin(...)

            //添加实例方法
            Vue.prototype.$myMethod = function(){}
            Vue.prototype.$myProperty = xxxxxx
        }
        使用插件
        Vue.use()

## 总结TodoList案例
    1.组件化编码流程
        （1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
        （2）实现动态组件，考虑好数据存放的位置，数据是一个组件在用，还是一些组件在用
            1）一个组件在用，放在组件自身即可
            2）一些组件在用，放在共同的父组件上(状态提升)
        （3）实现交互：从绑定事件开始
    2.props适用于
        （1）父组件--》子组件 通信
        （2）子组件--》父组件 通信（要求父先给子一个函数）
    3.使用v-model是要切记，v-model绑定的值不饿能是props传来的，因为props不能改
    4.props传来的若是对象类型的值，修改对象中的属性时vue不报错，但不推荐这样

## 消息订阅与发布
    1.一种组件间通信的方式，适用于任意组件间通信
    2.使用步骤
        1.安装pubsub npm i pubsub-js
        2.引入 import pubsub from “pubsub-js”
        3.接收数据：a组件要接受，那就在a组件中订阅，订阅的回调函数在a组件身上
            methods：{
                demo（data）{}
            }
            mounted（）{
                this。pubsubId=pubsub。subscribe（“xxxx”，this。demo）
            }
        4.提供数据
            pubsub。publish（“xxx”，data）；
        5.最好在beforeDestroy钩子中，用pubsub。unsubscribe（pubsubId）取消订阅

## nextTick
    1.语法：this.nextTick(回调函数)
    2.作用：在下一次DOM更新结束后执行其回调函数
    3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

## Vue封装的过度与动画
    1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
    2.图示
    3.写法
        1.准备好样式
            、元素进入样式
                1.v-enter进入的起点
                2.v-enter-active进入过程中
                3.v-enter-to进入的终点
            、元素离开样式
                1.v-leave离开的起点
                2.v-leave-active离开过程中
                3.v-leave-to离开的终点
        2.使用<transition>包裹要过度的元素，并配置name属性
            <transition name="hello">
                <h1 v-show="isShow">你好</h1>
            </transition>
        3.备注：若有多个元素需要过度，则需要使用<transition-group>，且每个元素都要指定key值

## Vue脚手架代理
    方法一：
        在vue.config.js中添加如下配置：
            devServer:{
                proxy:"http://localhost:5000"
            }
        说明：
            1.优点：配置简单，请求资源是直接发给前端（8080）即可
            2.缺点：只能配置一个，不能灵活的控制请求是否走代理
            3.工作方式：当请求了前端不存在的资源时，请求会转发给服务器（优先匹配前端资源）
    方法二：
        编写vue.config.js
            module.exports={
                devServer:{
                    proxy: {
                        "/atguigu": {
                            target: "http://localhost:5000",
                            pathRewrite: {
                                "^/atguigu": ""
                            },
                            //用于支持webSocket
                            // ws: true,
                            //用于欺骗真实服务器端口,用于控制请求头中的Host值
                            // changeOrigin: true
                        },
                        "/demo": {
                            target: "http://localhost:5001",
                            pathRewrite: {
                                "^/demo": ""
                            },
                            //用于支持webSocket
                            // ws: true,
                            //用于欺骗真实服务器端口,用于控制请求头中的Host值
                            // changeOrigin: true
                        },
                    }
                }
            }

## 插槽
    1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==》子组件
    2.分类：默认插槽，具名插槽，作用域插槽
    3.使用方式
        1.默认插槽
            父组件：
                <Category>
                    <div>
                        html结构1
                    </div>
                </Category>
            子组件：
                <template>
                    <div>
                        <slot>默认内容</slot>
                    </div>
                </template>

        2.具名插槽
            父组件：
                <Category>
                    <template slot="center">
                        <div>
                            html结构1
                        </div>
                    </template>

                    <template v-slot:footer>
                        <div>
                            html结构2
                        </div>
                    </template>
                </Category>
            子组件：
                <template>
                    <div>
                        <slot name="center">默认内容</slot>
                        <slot name="footer">默认内容</slot>
                    </div>
                </template>

        3.作用域插槽
            数据在组件自身，但根据数据生成的结构需要组件的使用者来决定
            父组件：
                <Category>
                    <template scope="{games}">
                        <ul>
                            <li v-for="(g,index) in games" :key="g">{{g}}</li>
                        </ul>
                    </template>

                    <template slot-scope="{games}">
                        <ul>
                            <li v-for="(g,index) in games" :key="g">{{g}}</li>
                        </ul>
                    </template>
                </Category>
            子组件：
                <template>
                    <div>
                        <slot :games="games">默认内容</slot>
                    </div>
                </template>

                <script>
                    exports default{
                        name:"Category",
                        props:["title"],
                        data(){
                            return{
                                games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
                            }
                        }
                    }
                </script>