ABOUT ME

    -

    오늘 방문자
    -
    어제 방문자
    -
    전체
    -
    • [Vue.js] 뷰 디렉티브란?
      Vue 2019. 1. 27. 23:58

      뷰 디렉티브란?


      v-접두사 가지는 모든 속성을 의미함.


      JSTL의 foreach나 if문 처럼 화면 요소를 더 쉽게 조작하기 위해 사용한다.


       디렉티브 이름

      역할 

       v-if

       if문과 같다 true,false값에 따라 화면에 표시한다.

       v-for

       지정한 뷰 데이터의 개수만큼 반복하여 출력

       v-show

       css의 display:none 으로 속성을 준다. if문의 경우 태그를 완전삭제함. 

       v-bind

       vue 데이터속성과 html태그 기본속성을 연결해줌

       v-on

      화면요소의 이벤트를 감지하여 처리 할 때 사용함 

       v-model

       form에서 주로 사용되는 속성. form태그에 입력한 값을 vue인스턴스의 데이터와 동기화함.

      화면에 입력된 값을 서버로 보낼때 사용.(watch와 같은 고급 속성을 이용하여 추가 로직 수행 가능함)

      주의 사항으로는 <input>, <select>, <textarea>태그에만 사용 가능함.




      예제


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <html>
        <head>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title>뷰 디렉티브 테스트</title>
        </head>
        <body>
          <div id="app1">
              <a v-if="flag"> 참이다 </a>
              <ul>
                <li v-for="system in systems">{{system}}</li>
              </ul>
              <div v-show="flag"> show! </div>
              <div v-bind:id="testId"> bind! </div>
              <button v-on:click="showAlert">경고 버튼</button>
       
          </div>
          <script type="text/javascript">
            new Vue({
                  el:'#app1',
                  data:{
                            flag: true,
                            systems:['a','b','c'],
                            testId: 999,
                        },
                  methods:{
                            showAlert: function(){
                              return alert('경고창 뿅!');
                            }
                        }
            });
          </script>
       
       
        </body>
      </html>
       
      		cs




      결과화면








      고급 템플릿 기법(computed속성, watch속성)


      computed 속성

      - 복잡한 연산은 뷰인스턴스 안(computed속성)에서 처리한다.

      장점: 1) data 속성값의 변화에 따라 자동으로 다시 연산함

             2) 캐싱으로 속도가 빠름 (연산의 결과값을 미리 저장하고 있다가 필요할 때 불러옴)


      method속성과 차이점

      - method속성은 호출할때만 실행되고, computed속성은 데이터의 값이 바뀌면 자동적으로 수행됨

      - 복잡한 연산을 반복적으로 수행하는 경우면 computed속성이 더 성능면에서 효율적임.



      예제


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      <html>
        <head>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title>고급 템플릿 기법! computed ! </title>
        </head>
        <body>
          <div id="app1">
            {{makeData}}
          </div>
          <script>
            new Vue({
                        el:'#app1',
                        data:{
                                str:'꺼꾸로~~~'
                            },
                        computed:{ // 데이터 가공
                                    makeData: function(){
                                        return this.str.split('').reverse().join('');
                                    }
                                }
                    });
          </script>
        </body>
      </html>
       
      		cs



      watch 속성

      - 데이터 변화를 감지하여 자동으로 로직을 수행함


      computed속성과 차이점

      - computed속성은 내장api를 활용한 간단한 연산정도가 적합.

        watch의 경우 데이터호출과 같이 시간이 상대적으로 많이  소모되는 비동기 처리에 적합


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title>고급 템플릿 기법 ! watch! </title>
        </head>
        <body>
          <div id="app1">
            <input v-model="message">
          </div>
          <script>
            new Vue({
              el:'#app1',
              data: {
                message : 'hi!'
              },
              watch: {
                  message: function(data){
                    console.log('message=>'+data);
                  }
              }
            })
          </script>
        </body>
      </html>
       
      		cs



      결과화면












      'Vue' 카테고리의 다른 글

      Spirng Boot Vue.js 연동하기  (0) 2019.07.07
      [Vue.js] Vue 프로젝트 구성방법 및 구조  (0) 2019.02.04
      [Vus.js] Vue 템플릿과 데이터 바인딩하는 법  (0) 2019.01.27
      [Vue.js] Vue Http 통신, 엑시오스(axios)란?  (0) 2019.01.21
      [Vue.js] 네임드뷰  (0) 2019.01.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바