Vue构建个人博客（1）

以后会不定期的更新（准备考研Ing,个人博客只能算是业余的工作了）
之前很早就预备用vue构建了，官方的文档也看了很久但是，真的做的时候跟文档就是两码事。

进入正题，这次主要是node构建的vue应用的组件传参问题。
在自己用CDN测试的文档里是这样写的

    <div id="app">
        <my_menu v-bind:subtitles="my_subtitles"></my_menu>
    </div>

   <script>
    new Vue({
        el:'#app',
        data:{
            my_subtitles:[
                {content:"aaa",link:"http://www.baidu.com"}
            ]
        }
    })
   </script>

内容非常的清晰，但是在vue应用中，只能看到

<div id="app"  ></div>

new Vue(render: h => h(App))

???道理都懂，id为app的<div>被替换成了App组件，但是问题是原本的参数怎么绑定。这里先看h=>h(App)是怎么回事
这其实是用了箭头函数缩写（个人不喜欢缩写，带来的问题确实多，写的时候的确麻烦，但是有可读性的保障），上面的原型是这样的：

render: function (createElement) {
    return createElement(App);
}

而要将信息绑定到App实例中的方法为

render:(h) => {
              return h('div',{   //给div绑定value属性
                                    props: {
                                    value:''
                                    },
                                    //给div绑定样式
                                    style:{
                                    width:'30px'
                                    },
                                  //给div绑定点击事件　　
                                on: {
                                    click: () => {
                                        console.log('点击事件')
                                    }
                                },

                            })
                        }