Component basics

component-basics.markdown

Component basics

A Pen by Vue on CodePen.

License.

index.html

<div id="components-demo">
  <button-counter></button-counter>
</div>

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')

scripts

<script src="https://unpkg.com/vue@next"></script>

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;
}