Vue 온라인 실행

Code

Result

VueJS CDN 사이트

다음 VueJS CDN을 사용하여 코드 내의 VueJS 버전을 교체할 수 있습니다:

https://cdn.bytedance.com/?query=vue&version=2.6.6

VueJS 온라인 편집기 사용 방법

간단한 3단계

왼쪽 코드 편집기에서 VueJS 코드를 작성하거나 붙여넣으세요.
"실행" 버튼을 클릭하여 VueJS 코드를 실행하세요.
결과는 오른쪽 결과 영역에 표시됩니다.

VueJS 온라인 편집기란?

VueJS 온라인 편집기를 사용하면 웹 서버 없이도 온라인에서 VueJS 코드를 실행할 수 있으며, 컴퓨터에서 텍스트 편집기를 사용하여 VueJS 파일을 편집할 필요가 없습니다.

이렇게 하면 ace 편집기를 사용하여 VueJS가 실행되는 결과를 빠르게 확인할 수 있으며, 코드 오류나 경고를 자동으로 인식하고 명확하고 사용하기 쉬운 피드백을 제공하여 코드 성능을 향상시킬 수 있습니다. 다음과 같이 VueJS 코드를 작성하거나 붙여넣을 수 있습니다:

<html>
<head>
<title>VueJs 온라인 편집기</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: '내 첫 번째 VueJS 프로젝트'
}
});
</script>
</body>
</html>

VueJS 온라인 편집기의 특징

간편한 VueJS 온라인 편집기 또는 테스트기
키워드 자동 완성 기능
다양한 디자인 테마 제공