vue.js

1. vuex的store必须在router之前声明，否则在无法传递到子组件
2. 遇见unknown word,在webpack.config.js的path后添加include: [path.resolve(__dirname, “not_exist_path”)]
3. onchange事件 替换并重新绑定
4. ff和webkit在对router-link上的处理不同,
5. 递归组件

<template>
    <div>
        {{data}}
        <div>
            &nbsp;&nbsp;<test :data="list" v-if="list">{{list}}</test>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name:"test",
        props:["data"],
        data(){
            var a = this.data - 1;
            return{
                list:a
            }
        }
    }
</script>

<template>
    <ul>
        <li v-for="(data,dataName) in datas">
            <test :data="data" v-if="data.child"></test>
            <span v-else>{{data}}</span>
        </li>
    </ul>
</template>
<script type="text/javascript">
    export default {
        name:"test",
        props:["datas"],
    }
</script>

1. render函数占坑
   需求是做一个guide,
   有这几个要求：
2. 遮罩层
3. guide指示的元素
4. 一个NEXTbutton，用来进行下一项guide
   使用的是vue的solt分发,在guide组件中通用一个NEXTbutton。
   这时候就出现了文档中在说明render函数必要性时的情况，如果使用平常的方法很琐碎的。使用render函数可以简洁、高效地完成工作。

//父组件
<guide>
    <div>这是第一步guide的文字</div>
    <div>这是第二步guide的文字</div>
</guide>
---
//guide组件
<script>
    export default {
        data() {
            return {
                step: 0
            }
        },
        props: ["css"],
        render(h) {
            var _this = this;
            //由于空白文本节点的存在需要将其去除
            var guideChild = this.$slots.default.reduce((a, b) => {
                if (b.tag) {
                    a.push(b)
                };
                return a
            }, []) 
            if (_this.step < guideChild.length) {
                return h(
                    'div', {
                        "class": "guide"
                    }, [
                        guideChild[_this.step],
                        h('div', {
                            'class': "next",
                            'style': css,
                            on: {
                                click() {
                                    _this.step += 1;
                                }
                            },
                        }, '下一步')
                    ]
                )
            }
            //这种写法的html结构中NEXTbutton是与slot同级的，在布局上会有些麻烦，因此决定将其放入slot中。
            //guideChild[_this.step].children.push(h(NEXT_btn)
        }
    }
</script>