vue.js实例对象+组件树

vue的实例对象

• 首先用js的new关键字实例化一个vue
• el: vue组件或对象装载在页面的位置，可通过id或class或标签名
• template: 装载的内容。HTML代码/包含指令或者其他组件的HTML片段，template将是我们使用的模板
• data: 数据通过data引入到组件中

在组件中的data要以函数的形式返回数据，当不同的界面用了同一个组件时，才不会以为一个组件的值发生改变而改变其他页面的内容。

• {{ }} 双括号语法里面放入数据的变量

vue最简单的结构--来自慕课网课程截图.png

组件注册语法糖

• 全局组件
  A方法：
  1. 调用Vue.extend()方法创建组件构造器
  2. 调用Vue.component(组件标签,组件构造器)方法注册组件
  3. 在Vue实例的作用范围内才能够使用组件

/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
    /*组件内容*/
    template:…… ,
    data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);

B方法（与A方法一样，只是交简单的写法）：
没有A方法中的第1步，直接调用Vue.component(标签名，选项对象)方法

/*B方法 全局组件2:*/
Vue.component('my-component2', {
     /*组件内容*/
    template:…… ,
    data: ……
}

/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

• 局部组件 使用components属性

var partcomponent2 = {
       el:…… ,
       data: { …… }
}


new Vue({
    el: '#app',
    data: {
            ……
    },
    components: {
          /* A方法： 局部组件1 */
          'part-component1': partcomponent1
     }，
          /*B方法 局部组件2 */
          'part-component2':{
               el:…… ,
               data: { …… }
           }   
})

• 子组件
  创建方法和上面两种方法类似，不同的是位置是放在组件内部。

var compentChild ={
       el:……,
       data:……
}
component: {
     el: ……,
     data: {……}
     components: {
          'component-child':  componentChild
     }
}

• 内置组件

不需要在components里面声明组件。而是直接用<component></component>标签。例如在如下的myHeader中使用内置组件,root-view、keep-alived等也是vue本身提供的一个内置组件。

    var myHeader = {
         template: '<component></component> <root-view></rooot-view>'
    }