用vue写轮子的一些心得（一）——button组件、input组件、栅格布局组件

组件传值校验

通过validator属性检查器检测父组件向子组件传值，可进行初步初步筛选，只允许规定的值传入，倘若传错则提示报错。

        props:{
            icon:{},
            iconPosition:{
                type: String,
                default: 'left',
                validator: function (value) {//属性检查器
                    return value === 'left' || value === 'right';
                }
            }
        },

props传值default()函数返回值

Array和Object最好通过default()函数返回一个默认值，其它数据类型（Boolean、String、Number）在没有特殊要求的情况下可不用default()函数返回默认值，可直接写成default: 'xxx'。

因为一个页面可能存在多个子组件，若通过default: 方法传Object或者Array，多个子组件中的Object或者Array会指向同一个它们的引用。因此需要一个函数返回值来创建一个新的对象。

        props: {
            list: {
                type: Array,
                default() {
                    return [];
                }
            },
        },

vue中的双向绑定

实际上v-model是一颗语法糖，它帮你做了两件事情：1、:value="message"    2、:input="message = $event"

通过:input 监听input内容输入的变化（ message = $event ），当有变化时将最新的内容传入value中( :value = "message" )。反过来，若message数据有变化时，则直接传给value，input实时更新，这样双向绑定就完成了。

<input v-model="message"></input> // vue中的双向绑定

<input :value="message" :input="message = $event"></input>  // 双向绑定原理

{{message}}

        <input type="text"
               :value="value"
               :disabled="disabled"
               :readonly="readonly"
               @input="$emit('input', $event)"
        >

生命周期中created和mounted的区别

在vue的官方文档中写到：

• created 为 new Vue() 初始化的钩子
• mounted 为 new Vue() 创建vm.$el 并用其替换到页面上，意思就是挂载到页面上

如何理解这两个钩子呢？假如存在多个父子组件：爸爸组件、儿子组件、孙子组件，每个组件上面都有created和mounted这两个钩子，刷新页面，它们的执行顺序会是：

1. created 爸爸
2. created 儿子
3. created 孙子
4. mounted 孙子
5. mounted 儿子
6. mounted 爸爸

先创建created，从爸爸开始创建——然后到儿子——再到孙子，接着开始挂载mounted，孙子完成后挂载到儿子身上，儿子完成后挂载到爸爸身上。知道了钩子执行的顺行，我们就可以得出结论：使用mounted钩子时，可以保证它底下的子子孙孙组件全部都已经挂载完成，并且能够拿到它们。

scss中使用循环语法

在做栅格布局时，需要将页面分为24等份，也就是css样式需要24种（col-1，col-7），如果使用原始的方法写的话会有两个问题：

1. 宽度100%除3（33.333%）或7（14.2857%）这种除不尽的情况下，col-7 + col-17 可能会宽度总和小于100% 或者大于100%。
2. 基本重复的样式要写太多，麻烦。

我们可以在样式中使用scss的循环语法：

<style lang="scss" scoped>
    $class-prefix: col-;
    @for $in from 1 through 24 {
        &.#{$class-prefix}#{$in} {
            width: ($in / 24) * 100%;
        }
    }
</style>

用循环语法，让程序自动计算出每个样式的百分值，并且四五行代码就可以搞定N个样式。