템플릿 문법은 주로 디렉티브(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>
'Frontend > Vue, Nuxt' 카테고리의 다른 글
Vue 데이터 전달하기 (0) | 2021.05.18 |
---|---|
Vue 컴포넌트 분리하는 방법 (0) | 2021.05.18 |
Vue 속성 사용 (0) | 2021.05.17 |
Vue Lifecycle (0) | 2021.05.17 |
VueX 상태관리 (0) | 2021.05.10 |