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('点击事件')
                                    }
                                },

                            })
                        }    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue...
    流水潺湲阅读 1,299评论 0 3
  • Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国...
    乐百川阅读 3,476评论 0 9
  • Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国...
    dinel阅读 4,988评论 0 9
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,252评论 0 6
  • 在常人眼里,世上最可怕的事莫过于死亡。不过有人说还有比死亡更可怕的,那就是从来没有精彩地活过。每个人都要努力生活,...
    雨巷葳兰阅读 262评论 1 0