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

95 阅读 0 评论 63 点赞

我是靠谱客的博主阳光黄豆，最近开发中收集的这篇文章主要介绍Vue学习(6)————————实例对象，组件概念，组件的引用（其他vue文件的引用），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

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

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

main.js

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

//实例化一个组件

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuedemo02</title>
  </head>
  <body>
   	<div id="app"></div>
   	<script src="/dist/build.js"></script>
  </body>
</html>

main.js进阶一下

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

//实例化一个组件

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

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

这个先这么写，还会改造

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

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

})

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

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

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

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

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

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

<template>
  <div>
  	{{msg}}
  </div>
</template>
<script>
	export default{
		data(){
			return{
				msg:'我是componentA'
			}
		}
	}
</script>
<style lang="scss">
</style>

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

<template>
  <div id="app">
  	{{hello}}
  	<componentA></componentA>
  </div>
</template>
<script>
	import componentA from './components/a.vue'
	export default{
		components:{componentA},
		data(){
			return{
				hello:'world'
			}
		}
	}
</script>
<style lang="scss">
</style>

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

<template>
  <div id="app">
  	<p v-for="(item,key) in list">
  		{{item}}----{{key}}
  	</p>
  	<componentA v-for="(item,key) in list" key='key'></componentA>
  </div>
</template>
<script>
	import componentA from './components/a.vue'
	export default{
		components:{componentA},
		data(){
			return{
				hello:'world',
				list:{
					name:'sola',
					age:'99',
					money:'5块'
				}
			}
		}
	}
</script>
<style lang="scss">
</style>