vue.js

#v-bind:class, v-on:click, v-if, v-show

- attribute
v-bind:class=""
- Event handler
v-on:click=" " 
@click="method"

- if 
v-if =""
if true - visible if it's not invisible
<modal v-if="isActive"></modal>
isActive:false
- modal 안보여짐

#custom event for the component

<modal v-if="showModal" @close="showModal=false"></modal>
<button @click="showModal=true" class="button is-link is-rounded">show modal</button>
//component
  <button @click="$emit('close')" class="modal-close is-large" aria-label="close"></button>
//vue
new Vue({
  el: '#root',
  data:{
    showModal : false
  }

• showModal = false;
• Click button → showModal = true → demonstrate<modal> code on screen
• Click X button → call close Event →showModal=false →<modal> code is invisible.