컴퓨터반

컴퓨터반 게시판입니다.

제목Vue.js: (3) Directive - 22022-12-20 22:20
작성자user icon Level 4

88x31.png


1. v-pre


v-pre 디렉티브를 선언하면 해당 태그는 컴파일되지 않고 그대로 출력됩니다.


index.html

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app" v-pre>{{ message }}</div>

</body>

</html>


main.js 

const mv = new Vue({

  data: {

    message: 'hello, world!'

  }

}).$mount('#app')


출력 결과 

 


v-pre 디렉티브가 없다면 텍스트 보간에 의하여 hello, world!가 출력되어야 하지만, 출력 결과를 확인하면 컴파일 되지않고 {{ message }}가 텍스트 그대로 출력됩니다.



2. v-once


v-once 디렉티브는 일회성 디렉티브 입니다.


index.html

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app" v-once>{{ message }}</div>

</body>

</html>


main.js 

const mv = new Vue({

  data: {

    message: 'hello, world!'

  }

}).$mount('#app')


출력 결과를 확인하면 아래와 같이 텍스트 보간에 의하여 hello, world!라는 텍스트가 출력됩니다.


출력 결과

 


message를 변경하면 바인딩된 텍스트 메시지도 변경되어야 하지만, v-once 디렉티브의 경우 처음 컴파일된 메시지 상태가 그대로 남습니다.


출력 결과 

img21 



3. v-cloak


v-cloak 디렉티브는 컴파일 되기전 Mustache 태그를 감추기 위해 사용됩니다.


아래와 같이 setTimeout 메소드를 통해 3초후 vue 객체를 생성하고 텍스트 보간을 하겠습니다.


index.html

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app">{{ message }}</div>

</body>

</html>


main.js 

setTimeout(() => {

  new Vue({

    data: {

      message: 'hello, world!'

    }

  }).$mount('#app')

}, 3000)


아래와 같이 출력 결과를 확인하면 vue 객체가 생성되어 컴파일 되기 전까지 Mustache 태그가 그대로 표시됩니다.


출력 결과

img22 


v-cloak 디렉티브는 vue 객체가 컴파일 된 이후 자동으로 제거되기 때문에 v-cloak 속성을 선택자로 하여 display: none; 스타일 속성을 추가하면 됩니다.


index.html 

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <style>

    [v-cloak] { display: none; }

  </style>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app" v-cloak>{{ message }}</div>

</body>

</html>


출력 결과 

img23



4. v-show


v-show 디렉티브는 v-if 디렉티브와 유사하게 조건문에 대하여 DOM 렌더링 여부를 결정합니다.


하지만 태그 자체를 생성하거나 제거하는 v-if와 달리 v-show는 display 스타일 속성을 통해 렌더링을 결정합니다.


index.html

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app">

    <span v-show="isNotice">{{ notice }}</span>

  </div>

</body>

</html>


main.js 

const mv = new Vue({

  data: {

    notice: 'notice',

    isNotice: true

  }

}).$mount('#app')


isNotice를 false로 변경하면 태그 자체가 사라지는 것이 아니라 display: none; 스타일 속성이 추가되는 것을 확인할 수 있습니다.


출력 결과

img24 


태그 자체를 추가하거나 제거하는 것이 아니기 때문에 조건이 자주 변경된다면 v-if 디렉티브보다 v-show 디렉티브를 사용하는 것이 효율적입니다.



5. v-on


v-on 디렉티브는 이벤트를 연결합니다. 아직 컴포넌트에 대해서 설명하지 않았지만 하위 컴포넌트에서 상위 컴포넌트로의 데이터 전달은 이벤트를 통해 가능합니다.


이벤트는 v-on:[이벤트 이름]="메소드명" 형태로 연결합니다. 클릭이벤트를 연결해보겠습니다.


index.html

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app">

    <div>{{ num }}</div>

    <button v-on:click="increase">증가</button>

    <button v-on:click="decrease">감소</button>

  </div>

</body>

</html>


main.js 

const mv = new Vue({

  data: {

    num: 0

  },

  methods: {

    increase() {

      this.num++

    },

    decrease() {

      this.num--

    }

  }

}).$mount('#app')


각각의 버튼에 대한 클릭 이벤트에 num 데이터를 1 증가시키는 메소드와 1 감소시키는 메소드를 연결했습니다.


출력 결과

img25 


v-on 디렉티브는 v-bind 디렉티브를 : 기호를 통해 선언하는 것처럼 @ 기호를 통해 선언할 수도 있습니다.


index.html

<!DOCTYPE html>

<html lang="ko">

<head>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script defer src="./main.js"></script>

  <title>Vue 연습</title>

</head>

<body>

  <div id="app">

    <div>{{ num }}</div>

    <button @click="increase">증가</button>

    <button @click="decrease">감소</button>

  </div>

</body>

</html>



#디렉티브# v-pre# v-once# v-cloak# v-show# v-on
댓글
자동등록방지
(자동등록방지 숫자를 입력해 주세요)