Vue.js组件简单的应用实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Component</title>
	<!--引用vue.js文件 没有可以在网上下载-->
	<script src="vue.js"></script>
	<script>
	//方法1,先创建组件构造器,然后由组件构造来创建组件
	var myComponent=Vue.extend({
		template:'<h3>Hello Word</h3>'
	})
	Vue.component('Hello',myComponent);
		//方法2,直接创建组件
		Vue.component('hello2',{
			template:'<h2>你好,lqwvje</h2>'
		})
		window.onload=function(){
			new Vue({
				el:'#my',//element元素
				data:{
					msg:'hello666'
				},
				components:{//局部组件
					//方法3
					'my-address':{
						template:'<div>欢迎使用Vue组件</div>'
					},
					//方法4
					'my-list':{
						template:'#my-list',
						data(){
							return{
								msg:'lqwvje罗分明123',
								lists:['a','b','c']
							}
						}
					}
				}
			})
		}
	</script>
	<!--方法4的一部分-->
	<template id='my-list'>
		<!--注:只能有一个DIV不能有多个并列,div子项可以多个并列-->
		<div>
			<!--局部的-->
			{{msg}}
			<!--遍历数组-->
			<li v-for='item in lists'>{{item}}</li>
		</div>
	</template>
</head>
<body>

	<div id="my">
	    <!--全局的-->
		{{msg}}
		<Hello></Hello><!--引用方法1-->
		<hello2></hello2><!--引用方法2-->
		<my-address></my-address><!--引用方法3-->
		<my-list></my-list><!--引用方法4-->
	</div>
</body>
</html>

评论