一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

一、根实例

import Vue from 'vue'
import App from './App'
new Vue({
	el:'#app',
	render: h=> h(App),
    data: {
      name: 'chy'
    },
    components: {
      'my-header': myHeader
    }
})

二 、页面内组件

//页面内组件通过对象引入
var myHeader = {
  template: 'this is myHeader',
  components: {
    'my-header-child': myHeaderChild
  },
  data: function () {
  	return {
  		f:1,
  		d:2
  	}
  }
}

三、页面外组件

//页面外组件通过export default输出，import导入
<template>
	<div :title="hello">
		<p>{{ hello }}</p>
		<p v-text="hello"></p>
		<p v-html="hello"></p>
		<p>{{ num+1 }}</p>
		<p>{{ status==true?'yes':'no' }}</p>
		<p v-for="(frute,index) in list":class="{odd:index%2}">{{ frute.name }} and {{ frute.price }}-{{index}}</p>
		<button v-on:click="addItem">addItem</button>
		<p v-for="(value,key) in objList">{{key}}-{{value}}</p>
		<componentA v-for="(value,key) in objList":key="key" :dataA="dataA"></componentA>
		<a v-bind:href="link" v-bind:title="hello" :class="classStr" :style="linkCss">to baidu</a>
		<a v-if="isPartA">partA</a>
		<a v-else>no data</a>
		<a v-show="!isPartA">partB</a>
		<button v-on:click="showItem">showItem</button>
	</div>
</template>

<script>
import componentA from './components/A'
import Vue from 'vue'
export default {
	components:{componentA},
	data () {   //data属性
		return {
			hello: 'world',
			link:'http://www.baidu.com',
			dataA: 12,
			num: 1,
			status:true,
			classStr:'red',
			isPartA:true,
			className:{
				'red':true,
				'green':true
			},
			classArr:['red','green'],
			linkCss:{
				'color':'red',
				'font-size':'20px'
			},
			list:[
				{
					name:'apple',
					price:34
				},
				{
					name:'banana',
					price:56
				},
				{
					name:'apple',
					price:34
				}
			],
			objList: {
				name:'apple',
				price:34,
				color:'red',
				weight:14
			}
		}
	},
	methods:{  //methods方法
		addItem () {
			Vue.set(this.list,1,{
				name:'others',
				price:34
			})
			this.list.push({
				name:'apple',
				price:34
			})
		},
		showItem () {
			this.isPartA=false
		}
	}
}
</script>

<style>
html{
	height: 100%;
}
</style>