Vuejs

[Vuejs] template(템플릿)

yujeong kang 2020. 11. 23. 00:43

- 보간법

  - 문자열

  • Mustache 구문(이중 중괄호 {{  }} ) 사용한 텍스트 보간
  • v-once 속성을 이용하면 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행한다.
  <body>
    <div id="app">
      <h2>{{ msg }}</h2>
      <h2 v-once>{{ msg }}</h2> <!-- 여기는 처음에 한 번만 설정하는 거니까 값이 안 바뀜~!-->
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            msg: 'hello ~!',
          };
        },
      });
    </script>
  </body>

 

  • {{ }} 는 HTML이 아닌 일반 텍스트로 데이터를 해석한다.
  • 실제 HTML을 출력하려면 v-html 디렉티브를 사용한다.
    <div id="app">
        <h2>{{ msg }}</h2>
        <h2 v-text="'v-text : ' + msg"></h2>
        <h2 v-html="'v-html : ' + msg"></h2>
    </div>

 

  • vuejs는 {{ }} 내에서 자바스크립트 표현식의 모든 기능을 지원한다.
<div>{{message + ' Vue~'}}</div>
<div>{{num > 10 ? num * num : num + 100}}</div>
<div>{{message.split("").reverse().join("")}}</div>
<div>{{ changeMsg('Gooood') }}</div>
<div v-text="message + ' Vue~'"></div>
<div v-text="num > 10 ? num * num : num + 100"></div>
<div v-text="message.split('').reverse().join('')"></div>

* v-text는 {{ }}와 같다.

 

- 디렉티브

디렉티브 설명
v-text  
v-bind 엘리먼트 속성과 바인딩 처리를 위해서 사용. 
약어로 ":" 사용 가능!!!!
v-html  
v-once  
v-model 양방향 바인딩 처리를 위해서 사용 (form 의 input, textarea ... )
v-show 조건에 따라 엘리먼트를 화면에 렌더링.
style의 display 변경하는 역할.
ex) vue 객체의 data에 isShow: false, 하고 template 내에서 <div v-show:"isShow"></div> 하면 요소 display: none; 과 같은 역할이다.
v-if, v-else-if, v-else 조건에 따라 엘리먼트를 화면에 렌더링.
ex) <span v-if="age < 10"> 무료 </span>
v-for 배열이나 객체의 반복에 사용
v-for="요소변수이름 in 배열" v-for="(요소변수이름,인덱스) in 배열"
v-cloak vue instance가 준비될 때까지 {{ }} 를 숨긴다. [v-cloak] {display:none;}과 같은 CSS 규칙과 함께 사용한다.
뷰 인스턴스가 준비되면 v-cloak 은 제거된다.
v-on 이벤트리스너와 같은 역할을 한다. "@"와 같다.

 

  • template

: 여러 개의 태그들을 묶어서 처리해야할 경우 사용한다. v-if , v-for, component 등과 함께 많이 사용한다.

 

  • v-show와 v-id 차이점
  v-if v-show
렌더링 false일 경우 X 항상 O
false일 경우 엘리먼트 삭제 display: none 적용
template 지원 O X
v-else 지원 O X