Vue实例对象

Vue实例对象
Vue()是一个构造函数，用new Vue(构造参数)得到的就是一个实例对象，Vue实例对象是Vue.js中最基本的单元。构造参数是一个对象，构造参数的属性即为参数选项，常见的参数选项有el、data、template、components等。
在项目中， 在main.js中通过创建最外层的Vue实例对象来实现根结点、根组件的功能。
参数选项：

el：即element，表示当前Vue实例对象的装载位置，装载在哪个元素上，也称为挂载点。装载的含义是将template中的内容替换挂载点元素所对应的全部HTML代码。
template：表示装载的内容，HTML代码、包含其他组件的HTML片段，称为模板。
data：数据，是一个对象，表示该实例对象会用到的数据，其中的属性和属性值（字段）会被代理到当前实例对象。比如data中有一个属性为fruit，属性值为banana，那么可以在实例对象中直接用属性访问符号（·）来访问。也可以直接在template对应的HTML片段中引用相应字段，比如用{{变量名}}来实现数据渲染。例：
var my = new Vue({
el:"#app",
template: “

{{fruit}}}
”,
data:{
fruit:“banana”
}
});
my.fruit;//“banana”
1.1 完整测试代码
新建index.html文件，其中采用

渲染出来的页面可以发现整个div#app被替换成了template中的HTML片段
也可以用class属性来获取挂载点，即el属性为.outerDiv，渲染结果与采用id来获取挂载点，即el属性为#app时的渲染结果相同。

1.2 Vue实例对象的生存周期

https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

2.Vue组件
2.1 测试代码

import Vue from “vue” ES6语法，引入vue这个库并赋值给Vue这个变量，类似于require()，这样Vue就引入到main.js的全局中。

----------index.html----------------

------------main.js--------------
import Vue from ‘vue’

new Vue({
el:"#app",
template:“

hello world{{word}}

”,
data:{
word:" nihao"
}
});
2.2 组件的注册和引入
（1）组件树

（2）组件的注册和引入

（2.1）全局注册：Vue.component(id,definition)

---------main.js------------

import Vue from ‘vue’

Vue.component(“my-header”,{
template:"

{{word}} This is my header

",
data:function () {
return {
word:“hello word”
}
}
});
new Vue({
el:"#app"
});
----------index.html------------（仅显示body）

结果
（2.2）局部注册

------------main.js--------------

import Vue from ‘vue’

let myHeaderChild = {
template:"

{{fruit}}

“,
data:function () {
return {
fruit:“Apple”
}
}
};
let myHeader = {
template:”
{{word}} This is my header

",
data:function () {
return {
word:“hello word”
}
},
components: {
“my-header-child”:myHeaderChild
}
};
new Vue({
el:"#app",
components:{
“my-header”:myHeader
}
});
-------------index.html--------------

结果