oxfordyang2016 · April 12, 2022 13:29
diff --git a/component-basics.markdown b/component-basics.markdown
diff --git a/index.html b/index.html
 <div id="components-demo">
  <button-counter></button-counter>
 </div>
diff --git a/script.js b/script.js
 // Create a Vue application
 const app = Vue.createApp({})

 // Define a new global component called button-counter
 app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button v-on:click="count++">
      You clicked me {{ count }} times.
    </button>`
 })

 app.mount('#components-demo')
diff --git a/scripts b/scripts
 <script src="https://unpkg.com/vue@next"></script>
diff --git a/style.css b/style.css
 .demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
 }
	<div id="components-demo">
	<button-counter></button-counter>
	</div>
	// Create a Vue application
	const app = Vue.createApp({})

	// Define a new global component called button-counter
	app.component('button-counter', {
	data() {
	return {
	count: 0
	}
	},
	template: `
	<button v-on:click="count++">
	You clicked me {{ count }} times.
	</button>`
	})

	app.mount('#components-demo')