關於Vue的元件與模板的初步理解

snacy發表於2020-10-16
Vue元件

首先在script標籤外面定義一個模板

<template id="zj2">
		<div>
			<button type="button" @click="ja">+</button>
			<h3>{{count}}</h3>
		</div>
	</template>

然後在script標籤裡建立一個元件

<script type="text/javascript">
		var obj = {count:0};
		Vue.component('zujian',{
			template:'#zj2',
			data:function(){
				return {count:0};
			},
			methods:{
				ja(){
					this.count++;
				}
			}
			
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		})
	</script>

然後在HTML標籤內使用元件名標籤

<div id="app">
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
		</div>

最終結果：

在這裡插入圖片描述

完整的內碼表面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
		</div>
	</body>
	
	<template id="zj2">
		<div>
			<button type="button" @click="ja">+</button>
			<h3>{{count}}</h3>
		</div>
	</template>
	
	<script type="text/javascript">
		var obj = {count:0};
		Vue.component('zujian',{
			template:'#zj2',
			data:function(){
				return {count:0};
			},
			methods:{
				ja(){
					this.count++;
				}
			}
			
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		})
	</script>
</html>

相關文章