Vue 1:) Directive 속성 요약

Vue

* 아래 Vue 요약에 작성된 코드는 Vue-CLI, SASS 개발환경 기준입니다.

 

 

1:) Directive 속성 요약

 

Vue가 제공하는 디렉티브 속성을 정리해 봅니다.

"디렉티브 속성이란 무엇인가?"

풀이하자면 Directive는 '지시(하는)', 속성은 'Attribute'라 할 수 있는데

'속성으로 지시(전달)' 정도로 해석하면 그럴듯합니다. 

 

Vue는 엘리먼트(태그)에 v-xxxx 형식으로 직접 작성하는 자신만의 속성을 제공합니다.

 

v-text

data에서 은근하게 불러 온 텍스트를 지정한 엘리먼트에 표현합니다.

<template>
    
  <span v-text="mytitle"></span>

</template>

<script>
export default {
  data() {
    return {
		mytitle: '뷰리풀'
    }
  }
}
</script>

페이지 렌더링 결과

뷰리풀

 

v-once

단 한번의 전달! 처음 바인딩 된 값을 유지합니다.
은밀한 값을 받을 필요도 없으니 간단히 기본적인 중괄호 {{ }} 구문으로 처리한 예 입니다.

<template>
    
  <span v-once>{{ mytitle }}</span>

</template>

<script>
export default {
  data() {
    return {
		mytitle: '한번만 뷰리풀'
    }
  }
}
</script>

 

v-html

data에서 작성된 마크업 데이터를 불러 와 HTML형식으로 지정한 엘리먼트에 표현합니다.

<template>
    
  <span v-html="myHtml"></span>

</template>

<script>
export default {
  data() {
    return {
		myHtml: '
        <h1>뷰리풀 마크업<h1>
        '
    }
  }
}
</script>

페이지 렌더링 결과

뷰리풀 마크업

 

 

여기까지.. Text를 출력하는 단순한 능력으론 기능 구현에 한계가 있으니
이제는 엘리먼트 속성 값을 건드려 봅니다.
jQuery의 addClass로 CSS class를 추가하거나 엘리먼트 속성을 컨트롤하는 작업을 하듯이 말이죠.
또는 그게 뭐든~

v-bind

엘리먼트 속성에 필요한 속성을 넣고, 속성값을 전달합니다.

<template>
    
  <a v-bind:href="myHome" :target="_blank">그고시.one</a>

</template>

<script>
export default {
  data() {
    return {
		myHome: 'http://그고시.아니구.com'
    }
  }
}
</script>

페이지 렌더링 결과

그고시.one

a 태그에 뭔가 다른 그림 하나가 보입니다.
:target 으로 작성된 부분 보이나요?
v-bind:target="xxx" 를 :target="xxx" 으로 줄여서 쓸 수 있습니다.
아래 설명될 v-on: 또한 '@'로 줄여서 쓸 수 있습니다.

 

v-on

onlick="", onfocus="" 와 비슷하게 click, mouseenter 등의 이벤트를 전달합니다.
v-bind 와 같이 '@'로 줄여서 쓸 수 있습니다. (ex: @click="xxx")

<template>
    
  <button type="button" v-on:click="inmypocket += 10"> 10원만 {{ inmypocket }} </button>

</template>

<script>
export default {
  data() {
    return {
		inmypocket: 0
    }
  }
}
</script>

페이지 렌더링 결과

Vue 환경에서 테스트 해보면 버튼 클릭시마다 10원씩 기부가 됩니다.

 

v-model

양방향 바인딩을 지원하는 v-model은 사용자가 변경하는 값이 Vue 데이터에 반영됩니다.
너도 알고 나도 아는 실시간 데이터의 흐름(?)

<template>
  <div>
    <input v-model="isayyo" placeholder="그게 뭐든 입력해봐요">
    <p>You say: {{ isayyo }}</p>
  </div>
</template>

페이지 렌더링 결과

 

 

 

디렉티브 속성,

여기가 끝은 아니지만 금일은 여기까지 마무리 하겠습니다.

 

뷰리풀한 밤 되어 보아요. ;-)