vue的实例对象

首先用js的new关键字实例化一个vue

el: vue组件或对象装载在页面的位置，可通过id或class或标签名

template: 装载的内容。HTML代码/包含指令或者其他组件的HTML片段，template将是我们使用的模板

**data:** 数据通过data引入到组件中

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

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

组件注册语法糖

全局组件

A方法：

调用Vue.extend()方法创建组件构造器

调用Vue.component(组件标签,组件构造器)方法注册组件

在Vue实例的作用范围内才能够使用组件

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

B方法（与A方法一样，只是交简单的写法）：

没有A方法中的第1步，直接调用Vue.component(标签名，选项对象)方法

Vue.component('my-component2', { template:…… , data: ……}<mycomponent1></mycomponent1><mycomponent2></mycomponent2>

局部组件 使用components属性

```javascriptvar partcomponent2 = {el:…… ,data: { …… }}new Vue({el: '#app',data: {……},components: {'part-component2':{el:…… ,data: { …… }}})```

子组件

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

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

内置组件

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

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

总结

以上所述是小编给大家介绍的vue.js实例对象+组件树的详细介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！