Vue .js 기본 문법 한 번에 정리하기

🔸Vue 인스턴스 생성하기

Vue 인스턴스 옵션

1. el
2. data
3. methods
4. computed
5. watch

{{}} → property, mustache tag

표기법 3가지

1. 케밥 표기법 : font-size
2. 카멜 표기법 : fontSize
3. 파스칼 표기법 : FontSize

키 수식자

<input v-on:keyup.키수식자="메소드명">
<button v-on:click="countUp(3)">3씩증가</button>

키 수식자에는 다음과 같은 것들이 있다.

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

시스템 수식자 키

해당 시스템 키와 동시에 다른키가 눌렸을 때만 메소드를 호출함

• .ctrl
• .alt
• .shift
• .meta (Windows는 Windows 키, maxOS는 command 키

🔸 v-test, {{ }}

🔸 v-bind

속성을 Vue 인스턴스의 data로 지정

🔸 v-model

• 폼 입력과 데이터를 연결 ↔ 양방향 바인딩

🔸 v-on

• 이벤트와 메소드를 연결
• 메소드는 Vue 인스턴스에 methods 옵션을 추가해서 생성
• el는 어떤 HTML과 연결할까?
• data는 어떤 데이터가 있을까?
• methods는 어떤 명령이 있을까에 대한 내용

🔸 조건에 따른 표시 : v-if

<태그명 v-if="조건1">조건이 true라면 표시</태그명>
<태그명 v-else-if="조건2">그렇지 않고, 조건2가 true라면 표시</태그명>
<태그명 v-else>그렇지 않으면 표시</태그명>

v-if와 v-show

v-if는 태그의 true, false에 따라 HTML 태그를 생성, 삭제할 수 있다. v-show는 태그를 보이게 하거나 사라지게 할 뿐, 실제 HTML 태그 안에는 존재하는 차이점이 있다. 또한 v-show는 v-else의 사용이 불가능하다.

🔸 반복 표시: v-for

<태그 v-for="변수 in 배열">반복하는 부분</태그>
<태그 v-for="변수 in 최대값">반복하는 부분 </태그>
<태그 v-for="(변수, 인덱스) in 배열">반복하는 부분</태그>

🔸 v-for와 v-if

<태그명 v-for="변수 in 배열" v-if="조건">조건을 만족할 때만 표시하는 부분</태그명>
<태그명 v-for="변수 in 반복할 횟수" v-if="조건">조건을 만족할 때만 표시하는 부분</태그명>

• 준비된 데이터의 표시/비표시를 true/false로 변경하는 것은 v-if를 사용하면 편리하다.
• 데이터는 Vue 인스턴스의 data:에 준비한다.
• 프로퍼티 값data: {myVisible:false}을 변경할 수 있도록 체크박스를 준비하면 유저 조작의 표시/비표시를 실시간으로 확인할 수 있다.

example

# v-if example
<p v-if="myVisible">체크박스는 ON</p>

data:{
    myVisible:false
}
# v-if example2
<p v-if="myVisible">체크박스는 ON</p>
<p v-else>체크박스는 OFF</p>

data: {
    myVisible:false
}
# v-for example
<li v-for="item in myArray">{{item}}</li>

data: {
    myArray: ['찐빵', '메론빵', '크로와상']
}
# v-for example2
<li v-for="item in objArray">{{item.name}}</li>

data:{
    objArray: [
        {name:'찐빵', price:1000},
        {name:'메론빵', price:1200},
        {name:'크로와상', price:1500}
    ]
}
# v-for example3
<li v-for="n in 10">{{ n }}</li>
# v-for example4
this.myArray.push(추가데이터);
this.myArray.splice(지정위치, 0, 추가데이터);
this.myArray.splice(지정위치, 1, 변경데이터);
this.myArray.splice(지정위치, 1);

해당 글은 '백견불여일타 Vue.js 입문 도서'를 읽고 정리하였습니다.