# FIRST-VUE

**Repository Path**: xuyy19/first-vue

## Basic Information

- **Project Name**: FIRST-VUE
- **Description**: vue项目学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-27
- **Last Updated**: 2024-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# first-vue

## 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/).

### vue.config.js配置文件
```
使用vue inspect > output.js可以查看到Vue脚手架的默认配置
使用vue.config.js可以对脚手架进行个性化定制，详情见：See [Configuration Reference](https://cli.vuejs.org/zh/config/#lintonsave).
```

### ref属性
```
一：被用来给元素或子组件注册引用信息(id的替代者)
        二：应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
        三：使用方式：
                打标识:<h1 ref="xxx">...</h1>  或 <school ref="xxx"></school>
                获取：this.$refs.xxx
```

### 配置项props
```
    功能：让组件接收外部传过来的数据
        一：传递数据：
                <Demo name="xxx"/>>
        二：接收数据

            第一种方式（只接收):
            props:['name']

            第二种方式(限制类型)：
            props:{
                name:String
            }

            第三种方式(限制类型，限制必要性，指定默认值)
            props:{
                name:{
                    type:String, //类型
                    required:true,//必要性
                    default:'李四'//默认值
                }
            }
        备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改
                就会发出警告，若业务需求确实需要修改，那么可以复制props的内容到data中一份，然会修改data中的数据。
```

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


### 插件
```
        功能：用于增强Vue
        本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的参数。
        定义插件：
            对象.install = function(Vue,options){
                // 1:定义全局过滤器
                Vue.filter(....)
                // 2:添加全局指令
                Vue.directive(...)
                // 3:配置全局混入
                Vue.mixin(...)
                // 4:添加实例方法
                Vue.prototy.$myMethod = function(){...}
                使用插件：Vue.use(...)
            }
```

### scoped样式
```
    作用：让样式在局部生效，防止冲突。
    写法：<style scoped></style>
```