Vue 3 Directive

v-model

https://ko.vuejs.org/guide/essentials/forms.html

Form 입력 바인딩 | Vue.js

Create a two-way binding on a form input element or a component. It automatically picks the correct way to update the element based on the input type.

 

v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작. 아래 두가지의 문법은 서로 동일한 기능을 하고, v-model 이 좀더 편하게 사용할 수 있음.

<input v-model="inputText">

<input v-bind:value="inputText" v-on:input="updateInput">

위에서 사용한 directive 의 사용 용도를 간단하게 설명하면,

• v-bind 속성은 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용한다.
• v-on 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용한다.
• 사용자 이벤트에 의해 실행된 뷰 메서드(methods) 함수의 첫 번째 인자에는 해당 이벤트(event)가 들어온다.
• v-model 은 아래와 같은 component 에서만 사용이 가능하고 input data 를 처리하는 function 설계는 속성을 아래와 같이 구성을 함. 
  • <input>
  • <select>
  • <textarea>

• Modifiers:
  • . lazy- listen to change events instead of input
  • . number- cast valid input string to numbers
  • . trim- trim input

 

 

v-bind

https://ko.vuejs.org/api/built-in-directives.html

빌트인 디렉티브 | Vue.js

Shorthand: :

동적으로 한개 또는 여러개의 속성,  component 의 prop 과  표현식을 binding 한다.

Some directives can take an “argument”, denoted by a colon after the directive name

 

<!-- 속성 바인딩 -->
<img v-bind:src="imageSrc" />

<!-- 동적인 속성명 -->
<button v-bind:[key]="value"></button>

<!-- 단축 문법 -->
<img :src="imageSrc" />

<!-- 단축 문법과 동적 속성명 -->
<button :[key]="value"></button>

<!-- 인라인으로 문자열 결합 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 바인딩 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 바인딩 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 속성을 객체로 바인딩 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 바인딩. "prop"은 자식 컴포넌트에서 선언되어 있어야 함 -->
<MyComponent :prop="someThing" />

<!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->
<MyComponent v-bind="$props" />

 

Simple Examples

  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>

<script>

export default {
  data : function() {
  return {
      message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다',
    };
  },
}  

</script>

 

 

v-once

vue.js가 처음 한번만 렌더링을 수행하며  데이터가 변경되어도 처음값만 보여준다.

 

v-html

innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현한다.

 

 

v-if

if 조건문 구현

 

directive vs directive argument

it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets: