component2

edc3f11f · Jeff Fox · eeabb3a7 · edc3f11f · edc3f11f
隐藏空白更改
内联并排

Showing with 56 addition and 23 deletion

component1.html component1.html +22 -23

component2.html component2.html +34 -0

未找到文件。
--- a/component1.html
+++ b/component1.html
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
-<script src="https://unpkg.com/vue@next"></script>
-</head>
-<body>
-<div id="app">
-    <runoob></runoob>
-</div>
+	<head>
+		<meta charset="utf-8">
+		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
+		<script src="https://unpkg.com/vue@next"></script>
+	</head>
+	<body>
+		<div id="app">
+			<runoob></runoob>
+		</div>

-<script>
- 
-// 创建一个Vue 应用
-const app = Vue.createApp({})
- 
-// 定义一个名为 runoob 的新全局组件
-app.component('runoob', {
-    template: '<h1>自定义组件!</h1>'
-})
- 
-app.mount('#app')
-</script>
-</body>
-</html>
\ No newline at end of file
+		<script>
+			// 创建一个Vue 应用
+			const app = Vue.createApp({})
+
+			// 定义一个名为 runoob 的新全局组件
+			app.component('runoob', {
+				template: '<h1>自定义组件!</h1>'
+			})
+
+			app.mount('#app')
+		</script>
+	</body>
+</html>
--- a/component2.html
+++ b/component2.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
+		<script src="https://unpkg.com/vue@next"></script>
+	</head>
+	<body>
+		<div id="app">
+			<button-counter></button-counter>
+			<button-counter></button-counter>
+			<button-counter></button-counter>
+		</div>
+
+		<script>
+			// 创建一个Vue 应用
+			const app = Vue.createApp({})
+
+			// 定义一个名为 button-counter 的新全局组件
+			app.component('button-counter', {
+				data() {
+					return {
+						count: 0
+					}
+				},
+				template: `
+    <button @click="count++">
+      点了 {{ count }} 次！
+    </button>`
+			})
+			app.mount('#app')
+		</script>
+	</body>
+</html>