vue组件化开发

 一、概念

  什么是组件,我个人理解为积木。而用vue创建项目就要一个搭积木的过程。

二、语法

  vue无非也就是一种框架,先理解其核心内容之后再来操作。

  2.1引包

    vue有两个版本。不同的版本有不同的语法

  2.2开辟一个vue接管的实例对象

    完成这件事,首先要在dom中开辟一个空间

  dom:

    <div id='app'></div>

  js:

    实例化一个vue对象

      new Vue({

    el:'#app',

    data:{}

    })

  三、全局创建组件(也可以创建局部组件):

    3.1创建组件构造器:

      var parent=Vue.entend({

      template:'<h1>hello</h1>'  //这里就是组件的内容,可以理解为积木的形状,当然你也可以引用标签dom  template:'#demo'(这个demo是页面中的script或者template的ID)

})

    3.2注册组件

    积木已经做好了现在就是要给积木命名好可以各尽其责。

    Vue.component('my-component',parent)  //这里的两个参数分别表示页面标签和构造器的名字

  四、简写构造组件

    简写的关键就是把构造器放到了注册里面

    Vue.component('my-component',{

    template:'<div>hello</div>'

})

    如上就简写了一个组件在页面中<my-component></my-component>这样使用

  五、嵌套组件

    嵌套组件就牵扯出父组件与子组件,关键点:1,子组件应该在父组件构造器中注册和使用。所以子组件只能在父组件中使用。

   但是组件构造器还是各自执行。

    var child=Vue.extend({

    template:'thankyou'

})

    var parent=Vue.extend({

    template:'hello <child-companent></child-component>',//子组件要在父组件的template中使用

    components:{  //注意后面的s

      'child-companent':child

}

 

})

  Vue.component('parent-companent',parent);

html:

<parent-companent></parent-companent>//父组件可在全局使用

  六、嵌套组件传值。

    6.1说道组件中的数据,与Vue实例化的数据不同,Vue规定组建中的data必须是一个回调函数

      Vue.component('parent',{

    data:function(){

  return{a:1}

}  

})

    

 

  

posted @ 2017-05-24 16:58  SLOP  阅读(313)  评论(0编辑  收藏  举报