JSFiddle - React, Tailwind, and code Playground

by Lee Sun-Hyoup

HTML

<div id="app">
  <div>
    {{message}}
  </div>
  <div v-cloak>
    {{message2}}
  </div>
  <example></example>
</div>

<template id='example'>
  <div>
    {{message}}
  </div>
</template>

CSS

[v-cloak] {
  display: none;
}

JavaScript

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
	await sleep(2000); // 2초간 멈춤
  Vue.component('example', {
    template: '#example',
    data() {
    	return {
      	message: '컴포넌트는 v-cloak이 없어도 안보여요~'
      }
    }
  });

  new Vue({
    el: '#app',
    data: {
      message: '머스태쉬가 보입니다.',
      message2: 'v-cloak 덕분에 컴파일되기 전에는 안보입니다.'
    }
  });
}

run();