Vue脚手架

## 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 :Number

                    }

            第三种方式(限制类型、限制必要性、指定默认值):

                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) {

                                // 1.添加全局过滤器

                                Vue.filter(....)

                                // 2.添加全局指令

                                Vue.directive(....)

                                // 3.配置全局混入(合)

                                Vue.mixin(...)

                                // 4.添加实例方法

                                Vue.prototype.$myMethod = function () {...}

                                Vue.prototype.$myProperty = xxxx

            }

    使用插件: Vue. use()

 ## scoped

    作用：让样式在局部生效，防止冲突

    写法：<style scoped>

## 总结TodoList案例

    1.组件化编码流程: 

            (1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。

            (2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用， 还是一些组件在用:

                    1).一个组件在用:放在组件自身即可。

                    2).一些组件在用:放在他们共同的父组件.上(状态提升)。

            (3).实现交互:从绑定事件开始。

    2. props适用于:

            (1).父组件==>子组件通信

            (2).子组件==>父组件通信(要求父先给子一个函数)

    3.使用v-model时要切记: v-model绑定的值不能是props传过来的值，因为props是不可以修改的! 

    4. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错，但不推荐这样做。