[basic] Vue Directive

뷰의 특징 그리고 매우 유용하다고 생각한다. 기본 디렉티브부터 확실하게 알아두는게 중요한거 같다.

Directive??

화면을 조작하기 위해서 vue가 재공하는 문법이다. HTML Element 안에 v- 접두사를 사용해서 표현식에 직접 값을 넣어주거나 미리 정해주었던 뷰 인스턴스와 데이터 바인딩을 통해 반응적으로 표현식을 반영하는 것이다.

Directive	role
v-if	if 문과 같다. true / false 값에 따라 화면에 표시
v-for	지정한 뷰 데이터의 개수 만큼 반복해서 출력
v-show	css의 display:none 으로 속성을 준다. if 문의 경우 태그를 완전 삭제
v-bind	vue 데이터속성과 html 태그 기본 속성을 연결
v-on	화면 요소의 이벤트를 감지하여 처리 할 때 사용. v-on 말고 @으로 작성 가능. ex) v-on:click="" => @click="" / v-on.keyup.enter="" => @keyup.enter=""
v-model	form 에서 주로 사용되는 속성. form 태그에 입력한 값을 vue 인스턴스의 데이터와 동기화. 화면에 입력된 값을 서버로 보낼때 (watch와 같은 고급 속성을 이용하여 추가 로직 수행 가능함) 주의 사항으로는 input, select, textarea 태그에만 사용 가능

Example

id 부여하기

<body>
  <div id="app">
    ② <p v-bind:id="uuid">{{num}}</p>
	① // <p id="abc1234">{{ num }} </p>
    <p>{{ doubleNum }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        num: 10,
        uuid: 'abc1234',
        // doubleNum : num *2
      },
      //계산된 속성. data 값의 변화에 같이 변화는 
      computed:{
        doubleNum: function(){
          return this.num * 2; 
        }
      }
    });
  </script>
</body>

① html 로 p 태그에 아이디를 부여하기 위해서는 p태그에 직접 id를 작성했어야 한다 ex) <p id="abc1234">{{ num }} </p>
② ①과 같이 직접 부여하지 않고 v- 접두사를 사용해서 data에서 값을 가져오는 형식으로 변경 할 수 있다. <p v-bind:id="uuid">{{num}}</p>

class 부여하기

<body>
  <div id="app">
    <p v-bind:id="uuid" v-bind:class="name">{{num}}</p>
// <p id="abc1234" class="text-blue">{{ num }} </p>
    <p>{{ doubleNum }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        num: 10,
        uuid: 'abc1234',
        // doubleNum : num *2
        name: 'text-blue'
      },
      //계산된 속성. data 값의 변화에 같이 변화는 
      computed:{
        doubleNum: function(){
          return this.num * 2; 
        }
      }
    });
  </script>
</body>

v-bind:class="name">{{num}} 으로 class를 바인딩 해준다.

computed을 이용한 class 바인딩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .warning{
      color: red; 
    }
  </style>
</head>
<body>
  <div id="app">
    <p v-bind:class="{ warning: isError }">Hello</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data: {
        isError: false
      },
      }
    });
  </script>
</body>
</html>

위 코드를 아래와 같이 변경

<body>
  <div id="app">
    <p v-bind:class="errorTextColor">Hello</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data: {
        isError: false
      },
      computed: {
        errorTextColor: function(){
          return this.isError? 'warning' : null; 
        }
      }
    });
  </script>
</body>

Author And Source

이 문제에 관하여([basic] Vue Directive), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@brianhwang/basic-Vue-Directive

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)