<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<cars></cars>
		<moto></moto>
	</div>
	<script type="text/javascript">
		Vue.component('moto',{
			template:'<div>有最新的機車喔</div>'
		});
		var vm = new Vue({
			el: "#app",
			components:{
				'cars':{
					template:'<div>新車快訊</div>'
				}
			}
		
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<moto makes='YAMAHA'></moto>
		<moto makes='KYMCO'></moto>
	</div>

	<script type="text/javascript">
		Vue.component('moto',{
			template:'<h1>{{makes}}</h1><div>有最新的機車喔</div>',
			props:['makes']
		});
		var vm = new Vue({
			el: "#app"
		})
	</script>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<moto makes='YAMAHA'></moto>
		<moto makes='KYMCO'></moto>
	</div>
	<template id="moto-template">
		<h1>{{makes}}</h1>
		<div>有最新的機車喔</div>
	</template>
	<script type="text/javascript">
		Vue.component('moto',{
			template:'#moto-template',
			props:['makes']
		});
		var vm = new Vue({
			el: "#app"
		})
	</script>
</body>
</html>
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Jerry 的頭像
    Jerry

    Bug倉庫 // 程式日記

    Jerry 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄