<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0,
  },
});

<div id="example-2">
  <!-- `greet`는 메소드 이름으로 아래에 정의되어 있습니다 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js',
  },
  // 메소드는 `methods` 객체 안에 정의합니다
  methods: {
    greet: function(event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다
      alert('Hello ' + this.name + '!');
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName);
      }
    },
  },
});

// 또한 JavaScript를 이용해서 메소드를 호출할 수 있습니다.
example2.greet(); // => 'Hello Vue.js!'

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function(message) {
      alert(message);
    },
  },
});

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 이제 네이티브 이벤트에 액세스 할 수 있습니다
    if (event) event.preventDefault()
    alert(message)
  }
}

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝이 가능 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 속성을 바인딩 합니다. -->
<img v-bind:src="imageSrc" />

<!-- dynamic attribute name (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 약어 -->
<img :src="imageSrc" />

<!-- shorthand dynamic attribute name (2.6.0+) -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName" />

<!-- 클래스 바인딩 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
  <!-- 스타일 바인딩 -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>

  <!-- 속성 객체 바인딩 -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

  <!-- prop 수식어를 사용하는 DOM 속성 바인딩 -->
  <div v-bind:text-content.prop="text"></div>

  <!-- 속성 바인딩. 컴포넌트에서 "prop"를 선언 해야 합니다.  -->
  <my-component :prop="someThing"></my-component>

  <!-- 자식 컴포넌트와 공통으로 사용하는 부모 props를 전달합니다 -->
  <child-component v-bind="$props"></child-component>

  <!-- XLink -->
  <svg><a :xlink:special="foo"></a></svg>
</div>

<svg :view-box.camel="viewBox"></svg>

<input v-model="message" placeholder="여기를 수정해보세요" />
<p>메시지: {{ message }}</p>

<!-- 여러줄을 가진 문장 -->
<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

<!-- BaseButton.vue -->
<button>
  <slot>기본값</slot>
</button>

<!-- Parent -->
<BaseButton>
  <!-- 슬롯이 들어갑니다. -->
  <span>저장하기</span>
</BaseButton>

<!-- 렌더링 결과 -->
<button>
  <span>저장하기</span>
</button>

<!-- Parent -->
<div>
  <BaseModal>
    <template v-slot:header="slotProps">
      <h1>모달 제목</h1>
      <button @click="slotProps.close">닫기</button>
      {{ slotProps }}
      <!-- { hello: 'hello' } -->
    </template>
    <template v-slot:content>
      <p>모달의 컨텐츠입니다.</p>
    </template>
  </BaseModal>
</div>

<span v-pre>{{ 이 부분은 컴파일 되지 않습니다 }}</span>

[v-cloak] {
  display: none;
}
// 먼저 기능 구현을 위해 위와 같이
// v-cloak에 display: none을 선언

<!-- 적용할 태그에 작성 -->
<div v-if="false" v-cloak>TEST</div>

<!-- 단일 엘리먼트 -->
<span v-once>This will never change: {{msg}}</span>

<!-- 자식 엘리먼트를 포함하는 엘리먼트 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>

<!-- 컴포넌트 -->
<my-component v-once :comment="msg"></my-component>

<!-- v-for 디렉티브 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>