Notice
Recent Posts
Recent Comments
Link
SeouliteLab
[Vue.js] Vue 컴파일러 옵션 중 whitespace 설정 이해하기 본문
Vue.js에서는 템플릿 컴파일 시 공백(화이트스페이스)를 어떻게 처리할지를 결정하는 compilerOptions 중 하나인 whitespace 옵션을 제공합니다. 이 옵션을 통해 템플릿의 공백 처리 방식을 설정할 수 있습니다.
whitespace 설정이란?
whitespace 설정은 Vue 템플릿 컴파일러에서 사용되는 옵션으로, 템플릿 내의 공백을 어떻게 처리할지를 결정합니다. 이 옵션을 통해 템플릿에서 공백이나 개행을 유지하거나 제거할 수 있습니다.
예제
아래 예제에서는 whitespace 옵션을 사용하여 템플릿 내의 공백을 유지하거나 제거하는 방법을 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 컴파일러 옵션 - whitespace 예제</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>안녕하세요, {{ name }}님!</p>
</div>
<script>
// compilerOptions 설정을 통해 whitespace 옵션을 설정합니다.
Vue.config.compilerOptions.whitespace = 'preserve'; // 'preserve' 또는 'condense'
// 애플리케이션 생성
const app = Vue.createApp({
data() {
return {
name: 'Vue.js'
};
}
});
// 애플리케이션을 #app 요소에 마운트
app.mount('#app');
</script>
</body>
</html>