组件化应用构建

原创于 2017-06-17 16:17:02 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

44 篇文章

订阅专栏

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<title>vue</title>
		<script src="vue.js"></script>
		
    </head>
    <body>
    	<div id="test">组件模板
			<ul>v-bind 指令将待办项传到每一个重复的组件中
				<qiphon v-for="val in arr" v-bind:shuxing="val"></qiphon>
			</ul>
    	</div>
    </body>
</html>
<script>
	// window.onload= function(){
		Vue.component('qiphon',{
			props:['shuxing'],
			template:'<li>{{shuxing.a}}</li>'
		});
		var app2 = new Vue ({
			el:"#test",
			data:{
				msg:111,
				arr:[
					{a:'bb'},
					{a:'cc'}
				]
			},
			methods:{
				tap : function(){
					this.arr.unshift({a:'new'})
				}
			}
		})
	// }
</script>