Vue 인스턴스 사용하는 방법

템플릿 문법은 주로 디렉티브(Directive)로 이루어져있음. DOM 엘리먼트에 속성을 추가하는 것을 의미.

 

데이터바인딩

Mustache : {{ expression }}

v-text : Mustache와 거의 동일하게 작동. 중괄호로 감싸는 대신 디렉티브를 이용해서 데이터를 바인딩 가능

v-html : HTML 문자열을 그대로 바인딩.

v-bind : View의 텍스트를 렌더링하는 문법이 아닌 태그의 속성에 데이터를 바인딩하는 문법.

 

조건문

v-if : 조건에 따라 템플릿을 보여줌 (v-else, v-else-if)

template if : v-if는 디렉티브이기때문에 한 가지 엘레먼트에만 적용가능하지만 template 엘레먼트 한 번에 처리 가능하다. 엘레먼트는 가상의 엘레먼트이기 때문에 자식들만 묶어서 렌더링 된다.

v-show: true 일 경우 렌더링

** v-if vs v-show

v-if	v-show
초기 조건이 false일 경우 렌더링하지 않음.	항상 렌더링 됨.
조건이 false가 될 경우 엘리먼트가 삭제됨	CSS display 속성을 토글함
template구문을 지원함.	template 구문을 지원하지 않음
v-else 를 사용할 수 있음.	v-else를 사용할 수 없음.

▶ v-if는 조건이 false일 경우 DOM 트리에서 삭제되지만 v-show는 단순히 display속성을 토글.

▶ 만약 조건이 자주 바뀌는 로직이라면 v-if 보다 v-show를 쓰는것이 성능 면에서 우세.

 

 

반복문

v-for : 이 디렉티브는 반복적인 엘리먼트를 렌더링해야 할 때 유용함.

template v-for: 여러개의 엘리먼트를 포함해서 반복 렌더링할때 사용.

▶ v-if / v-for : 같은 엘리먼트에 존재할때 우선순위는 v-for가 v-if보다 높습니다.

 

 

이벤트 수식어

이벤트

v-on : v-on:{이벤트}="자바스크립트 표현식", click, keyup, keydown, input

 

capture

HTML DOM 이벤트 : 클릭, 입력과 같은 유저 상호작용이 일어나면 브라우저는 HTML DOM 이벤트가 발생하는데 이때 이벤트는 부모 엘리먼트, 자식엘리먼트로 전달된다. 자식엘리먼트 쪽으로 전파되는것을 버블링, 부모 엘리먼트 쪽으로 전파 되는것을 캡처링이라고 한다.

기본값은 버블링 페이즈

@click.capture

 

stop

stop 수식어는 이벤트가 전파되어 원하지 않는 결과가 생기는 일이 많기 때문에 이를 막을 수 있게 만드는 수식어.

func2 : function(){
	
},
func2_original : function(){
	e.stopPropagation();
}

@click="func2.stop"는 func2_original()과 완전히 동일한 동작을 함

@click.stop / e.stopPropagation();

 

self

self 수식어는 이벤트 전파로 실행되는 것이 아닌, 이벤트의 근원지가 해당 엘리먼트일 때 핸드러를 호출하도록 함.

(event.target이 해당 엘리먼트일 때에만 실행되도록 함)

@click.self

 

prevent

브라우저엔 기본적으로 특정 태그에 대한 액션을이 미리 정의되어있는데 막아주는 역활을 한다.

@click.prevent / event.preventDefault()

 

once

한번만 실행해야하는경우

@click.once

 

 

 

 

키 수식어

<input type="text" @keydown="preventKey">

new Vue({
  el: '#app',
  methods:{
    preventKey: function () {
      if(event.keyCode == 8 || event.keyCode == 46)
      event.preventDefault();
    }
  }
})

delete를 막는예제 (키 수식어를 사용하지 않음)

키 수식어를 사용한 예제

<input type="text" @click.delete="preventKey">

new Vue({
  el: #app,
  methods: {
    preventKey: function () {
      event.preventDefault();
    }
  }
})

▶ delete(+backspace), enter, tab, esc, space, up, down, left, right

 

수식어 체이닝

키 입력 하나에만 대응할 수 있는 것이 아니라, 수식어로 달아 놓은 여러 키 모두에 대해 핸들링 할 수있다.

보조키 수식어

shift, alt, control, meta-window or command key 또한 미리  Vue에 정의 되어 있다.

보조키 수식어는 키 수식어 뿐만 아니라 마우스수식어와도 함께 쓸수있으며, 다른키와 입력될 때만 트리거 된다.

즉, shift키 하나만 입력하는 것은 이벤트가 트리거되지 않는다.

ex) @keyup.shift라고만 사용했을 대엔 shift와 다른 모든 키의 조합에 트리거 된다.

사용자 정의 키 수식어

키 코드를 직업쓰거나, 직접 해당 키 코드의 별칭을 옵션으로 설정하고 별칭으로 정의한 수식어로 사용할 수 있다.

ex) @key.a 

 

v-on, v-bind는 생략가능하다. 단, @ 기호를 붙여한다.

 

모델

v-model : 폼과 데이터를 바인딩하는 디렉티브이다.

Vue.js는 기본적으로 단방향 바인딩이지만, v-model은 양방향 바인딩입니다.

 

<div id="app">
  <input v-model="name">
</div>

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

코드를 실행했을 때 input 엘리먼트의 값을 수정한다면 name 변수의 값도 input 엘리먼트에 입력한 값과 동일하게 변경된다.

반대로 name 데이터의 값을 변경한다면, input 엘리먼트에 입력된 값 또한 name 데이터의 값과 동일하게 수정된다.

하지만 엄밀히로는 이는 데이터 양방향 바인딩은 아니다.

v-model은 사용자의 입력에 대해 매핑된 변수를 업데이트 해주는 이벤트가 포함되어있는것.

엘레먼트 속성에 정의된 값은 무시되고 데이터값이 우선시 된다.

한글자가 완성될 때에만 데이터에 반영되기 때문에 이럴 경우에는 v-model이 아닌 v-on:input을 이용하면 된다.

 

값 바인딩하기

폼 엘리먼트의 속성으로 정의해 놓은 정적 value가 아니라, 동적으로 vue instance의 변수를 폼의 값으로 바인딩할때

<div id="app">
  <input type="checkbox" v-model="checkboxModel" 
  		  v-bind:true-value="trueValue" v-bind:false-value="falseValue">
  {{ checkboxModel }}        
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      checkboxModel: 'hello',
      trueValue: 'hello',
      falseValue: 'world'
    }
  });
</script>

 

 

수식어

v-model을 이용할때, vue에선 작은 편의성 기능들을 수식어로 제공

 

.lazy

input값을 변경할 대 즉시 값이 동기화 되지 않는다.

하지만

v-model.lazy 사용하면 즉시 데이터가 동기화 된다.

.trim

입력값의 앞뒤 공백들 제거한다.

v-model.trim

.number

입력값을 number로 형변환가능하다.

v-model.number

 

 

 

필터

필터는 자바스크립트 표현식 뒤에 적용하고 싶은 필터를 파이프 기호( | )와 함께 추가하면 된다. 이렇게 필터를 정의하면 공통적으로 같은 서식을 적용해야 하는 상황에 편리하게 대처할 수 있다.

<div id="app">
  {{ price | number }}
</div>
<script>
  new Vue({
    el: #app,
    data: {
      price: 24300
    },
    filters: {
      number : function(value) {
        retrun new Intl.NumberFormat().format(value)
      }
    }
  })
</script>