Vue.js 디렉티브(v-접두사)

디렉티브

• HTML 요소에 동작과 기능을 부여를 더 쉽게 할 수 있습니다.
• HTML 태그 안에 v-접두사 형식으로 표시되며, Vue.js가 HTML을 해석하고 동적으로 조작할 수 있도록 돕습니다.

    <div id="app">

        <a v-if="flag1">첫 번재 문장</a>

        <ul>

            <li v-for="system in systems">{{ system }}</li>

        </ul>

        <p v-show="flag2">두 번째 문장</p>

        <h5 v-bind:id="uid">세 번째 문장</h5>

        <button v-on:click="popupAlert">네 번째 문장(경고 창)</button>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                flag1: false,

                flag2: true,

                systems: ['android', 'ios', 'window'],

                uid: 10

            },

            methods: {

                popupAlert: function () {

                    return alert('경고 창 표시');

                }

            }

        });

    </script>

 

 

 

 

---

{{ }} (v-text): 데이터 바인딩

• HTML 화면 요소에 뷰 인스턴스 데이터를 연결하고 표시합니다.
• v-text 기능과 같은 역할을 합니다.
• {{ message }}
  • 위 예제에서 처럼 {{ }}을 사용하여 데이터를 바인딩 합니다.
  • 만약 data 속성의 값이 바뀌면 뷰 반응성에 의해 자동으로 갱신됩니다.
  • data 속성의 값이 변경되어 값을 바꾸고 싶지 않으면 v-once 속성을 사용하면 됩니다.
  • {{ message + " Bye" }}, {{ message.split(' '). reverse() }} 과 같이 JS 표현식을 쓸 수 있습니다.

    <div id="app" v-once>

        {{ message}}

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                message: 'Hello World!'

            }

        });

    </script>

 

 

 

---

v-bind: 요소의 속성을 데이터로 지정

HTML 요소의 속성 값을 Vue 인스턴스의 데이터를 동적으로 바인딩합니다. 'v-bind'를 사용하면 HTML 속성의 값을 Vue 데이터와 동기화하여 데이터의 변경에 따라 속성 값이 자동으로 업데이트 됩니다.

 

아래와 같이 사용되며 'v-bind' 문법을 ':'로 축약하여 사용할 수 있습니다.

<태그명 v-bind:속성="프로퍼티명"></태그명>
<태그명 :속성="프로퍼티명"></태그명>

 

'v-bind'를 사용해서 HTML 속성, 스타일, 클래스에 바인딩합니다.

이를 통해 Vue 인스턴스의 데이터 변경에 따라 속성 값이 자동으로 업데이트되어 동적인 UI를 구현할 수 있습니다.

<!-- 정렬 지정 -->
<div v-bind:align="프로퍼티명"></div>

<!-- 스타일 지정 -->
<div v-bind:style="프로퍼티명"></div>
<div v-bind:style="{color:프로퍼티명"></div>
<div v-bind:style="{fontSize:프로퍼티명"></div>

<!-- 클래스 지정 -->
<!-- 복수개의 클래스 지정 가능, true,false로 활성화 가능 -->
<div v-bind:class="프로퍼티명"></div>
<div v-bind:class="[프로퍼티명, 프로퍼티명]"></div>
<div v-bind:class="{'클래스명': ture|false }"></div>

<!-- 링크 지정 -->
<a v-bind:href="링크"></a>

 

---

v-model: 입력 form과 데이터와 연결

• 폼 입력 요소와 Vue 인스턴스의 데이터를 동기화하여 양방향 데이터 바인딩을 쉽게 구현할 수 있습니다.
• 사용자가 입력 폼 값을 변경하면 데이터가 업데이트 되고, 데이터가 변경되면 입력 요소의 값도 업데이트 됩니다.
• `v-model` 디렉티브는 폼 입력 요소에 사용되기 때문에 다음과 같은 폼 태그에서 쓰입니다.
  • <input>
  • <checkbox>
  • <radio>
  • <select>
  • <textarea>

 

텍스트

<div id="app">
	<input v-model="demoText">
    <div>Hello {{ demoText }}</div>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	demoText: ''
        }
    })
</script>

 

 

textarea

<div id="app">
	<textarea v-model="demoText"></textarea>
    <div>문장: {{ demoText }}</div>
    <div>문자길이: {{ demoText.length }}</div>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	demoText: '기존 입력된 텍스트'
        }
    })
</script>

 

 

checkbox

<!-- 단일 체크 박스 체크 여부 -->
<!-- check하면 true, 하지 않으면 false 출력 --> 
<div id="app">
	<label>
    	<input type="checkbox" v-model="isChecked">
        	체크박스 상태 {{ isChecked }}
    </label>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	isChecked: false
        }
    })
</script>


<!-- 복수 체크 박스 체크 여부 -->
<div id="app">
	<label>
    	<input type="checkbox" value="male" v-model="gender">
        	남 {{ isChecked }}
    </label>
    <label>
    	<input type="checkbox" value="female" v-model="gender">
        	여 {{ isChecked }}
    </label>
    
    <div>
    	성별: {{ gender }}
    </div>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	gender: []
        }
    })
</script>

복수 체크 박스에서 동일한 프로퍼티명으로 v-model를 지정함으로 하나의 그룹으로 묶입니다.

해당 체크박스가 체크되면 배열에 값이 담깁니다.

 

체크 박스를 이용하여 약관 동의 시에만 가입할 수 있게 하는 예제

<div id="app>
	<label>
    	<input type="checkbox" v-model="isAgreement"> 약관 동의
    </label>
    <button v-bind:disabled="!isAgreement">가입</button>
</div>

 

 

radio

<input type="radio" value="value1" v-model="동일한프로퍼티명">
<input type="radio" value="value2" v-model="동일한프로퍼티명">
<input type="radio" value="value3" v-model="동일한프로퍼티명">

<div>
	선택한 값: {{ 동일한프로퍼티명 }}
</div>

 

 

select

<select v-model="프로퍼티명" [multiple]>
	<option disabled value="">선택</option>
    <option>value1</option>
    <option>value2</option>
    <option>value3</option>
</select>

<div>
	선택한 select는 {{ 프로퍼티명 }}
</div>

단일 체크박스와 복수 체크박스 차이 처럼

복수의 선택(multiple)을 하는 경우 선택한 문자열을 배열로 표시하면 됩니다.

 

---

v-on: 이벤트 연결

HTML 요소의 이벤트와 Vue 인스턴스의 메서드를 연결하여 이벤트를 처리할 수 있습니다.

 

사용법은 아래와 같으며 `v-on:click` 대신 `@click`으로 대체하여 사용하는 것이 가능합니다.

<태그명 v-on:click="메서드명"></태그명>
<태그명 @click="메서드명"></태그명>

 

v-on 이벤트 종류

• 클릭(click)
• 입력(input)
• 제출(submit)
• 키보드 이벤트

<!-- 클릭 이벤트 -->
<button v-on:click="handleClick">click!</button>


<!-- 입력 이벤트: 입력 필드의 내용이 변경되면 `handleInput` 메서드 호출됩니다. -->
<input v-on:input="handleInput" type="text">


<!-- 키보드 이벤트
키수식자
.enter / .tab / .space / .delete / .esc / .up / .down / .left / .right / .48~.57 (0~9) / .65~.90 (A~Z)

시스템 키 수식자
키 수식자에 시스템 키 수식자를 지정하면, 키를 누를 때 시스템 키를 동시에 눌러야만 작동합니다. 
.ctrl / .alt / .shift / .meta(Windows | command)
예) <button @keyup.enter.shift="GenerateAlert">click</button>

-->
<input v-on:keyup.키수식자="메서드명">

 

---

v-if: 조건 분기

<태그명 v-if="조건1">조건1 true면 출력</태그명>
<태그명 v-else-if="조건2">false이고, 조건2 true면 출력</태그명>
<태그명 v-else>위 조건에 아무것도 해당하지 않으면 출력</태그명>

 

---

v-for: 반복문

<태그명 v-for="변수 in 값">...</태그명>

<태그명 v-for="변수 in 배열">...</태그명>
<태그명 v-for="(변수, index) in 배열">...</태그명>

<태그명 v-for="(value, key) in 객체" :key="key">
	{{ key }}: {{ value }}
</태그명/>

`v-for`로 객체를 가져올 때 (value, key) 순서임에 주의해야 합니다.

또한 `v-for`를 사용하여 객체를 반복할 때는 반복하는 객체의 순서가 보장되지 않기 때문에 객체의 속성 순서를 반드시 보장해야 할 때는, 배열 형태로 데이터를 구성하여 `v-for`를 적용해주어야 합니다.