Vue学习(6)————————实例对象，组件概念，组件的引用（其他vue文件的引用）

下面操作是在main.js中操作

var sola = new Vue({
	//装载到什么样的位置，这里先放入body
	el: 'body',
	//暂时不明
	template: '
{{ solaname }}
',
	data:{
		
		solaname: 'sola';
	}
})

————————————————————————————————————————————————————————

简单用实例引用写出一个helloworld

 main.js

//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'

//实例化一个组件

new Vue({
	//设置一个名字 然后在前端页面div 指定id来引用
	el: '#app',
	template: '
hello world
' 
})

index.html

main.js进阶一下

//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'

//实例化一个组件

new Vue({
	//设置一个名字 然后在前端页面div 指定id来引用
	el: '#app',
	template: '
{{ msg }}
' ,
	data:{
		
		msg : 'hello world',
	}
})

————————————————————————————————————————————————————————

 

这个先这么写，还会改造 

//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'

//这样就直接建立个一个组件 
Vue.component('my-header' , {
	
	template:'
测试
',

})

new Vue({
	
	el:'#app',
})

一个三节点的结构，总的vue包含一个header，header里还包含着一个header-child

//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'

var myHeaderChild = {
	template:'
this is a header-child
'
}
var myHeader = {
	template:'
this is a header
',
	components:{
		'my-header-child': myHeaderChild,
	}
}
new Vue({
	
	el:'#app',
	/*template:'
hello world,{{word}}
',*/
	data:function(){
		return{
		word:'hello world',
		}
	},
	components:{
		'my-header': myHeader,
	}
})

————————————————————————————————————————————————————————

首先建立一个A.vue,内容

 然后再在app.vue中引用A组件

遍历组件，可以把遍历到的值传给引用的组件