# vue_test

**Repository Path**: kurokocode/vue_test

## Basic Information

- **Project Name**: vue_test
- **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-10-08
- **Last Updated**: 2021-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记

## 脚手架文件结构：
     node_mdules
        public
            favicon.ico:页签图标
            index.html:主页面
        src
            assets:存放静态资源
                logo.png
            components:存放组件
                HelloWorld.vue
            App.vue:汇总所有组件
            main.js:入口文件
        .gitignore:git版本管制忽略的配置
        babel.config.js:babel的配置文件
        package.json:应用包配置文件
        README.md:应用描述文件
        package-lock.json:包版本控制文件

## 关于不用版本的vue
- vue.js与vue.runtime.xxx.js的区别
    (1).vue.js是完整版的Vue，包含：核心功能+模板解析器
    (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器
- 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
    render函数接收到的createElement函数去指定具体内容。
  
## vue.config.js配置文件
> 使用vue inspect > output.js可以查看到Vue脚手架的默认配置
> 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh


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

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

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

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

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

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

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

## 总结TodoList案例
    1.组件化编程流程：
        (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
        (2).实现动态组件：考虑数据的存放位置，数据是一个组件在用，还是一些组件在用：
            1).一个组件在用：放在组件自身即可。
            2).一些组件在用：放在他们共同的父组件上(状态提升)

    2.props适用于：
        (1).父组件 ==> 子组件 通信
        (2).子组件 ==> 父组件 通信(要求父组件先给子组件一个函数)

    3.使用v-model时要切记：v-model绑定的值不能时props传过来的值，因为props时不可以修改的！
    
    4.props传过来的若是对象类型的值，修改对象中的属性时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/).