Vue bind 하기전 변수명 즉 {{}} 값이 보이는 문제

cdn 방식으로 vue를 개발하다보니 data 값 매핑(bind) 하기전에 변수명 {{data}} 또는 v-if 사용시도 문법 그대로 보이는 문제가 

발생하여 찾아보니 아래와 같이 처리하면 될듯 한다.

 

v-cloak를 사용하면 된다.

 

<style>
  [v-cloak] { display: none; }
</style>

<div id="test" v-cloak>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
</div>

<script>
  var testApp = new Vue({
    el: "#test",
    data: {
      name: "juragi",
      age: 28
    }
  });
</script>

참고사이트

lasdri.tistory.com/1001

[Vue.js] 페이지 로딩전 구분문자( {{ name }} ) 숨기기

webisfree.com/2019-02-10/[vuejs]-v-cloak-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EA%B0%90%EC%B6%94%EA%B8%B0

[VueJS] v-cloak 사용하는 방법, 감추기