Vue 기본 문법 정리
Vue 기본적인 문법 정리
1. Vue 선언
https://ko.vuejs.org/guide/quick-start.html
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
- Vue 공식 홈페이지에서 확인 할 수 있는 Vue JS를 import 해야한다
[ 현재 버전 Vue.js ]
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
[ Vue의 기본 형태 ]
const app = Vue.createApp({
-- method, data 등 입력 가능
});
app.mount('#test');
- Vue는 Vue.createApp을 통해서 선언 한 뒤 해당 Vue를 사용할 영역을 설정한다
- app.mout('#[ ID ]') <- 의 형태를 통해서 해당 ID에 해당하는 영역에 Vue를 사용할 수 있도록 설정한다
2. 데이터 바인딩
- Vue 양방향 바인딩을 사용한다
<span>메세지: {{ msg }}</span>
위 형태와 같이 {{ data }} 형태를 통해 html 영역에서 사용이 가능하며,
const app = Vue.createApp({
data(){
return {
msg : 'hello'
}
},
});
app.mount('#test');
위 와같이 data에 해당 바인딩 테이터를 선언해두면 된다
[ 양방향 바인딩 ]
<input type="text" v-model="name">
// v-bind:value v-on:input의 경우
// <input type="text" :value="name" @input="inputData">
<input type="text" @input="enteredGoalValue = $event.target.value"/>
<button v-on:click="resetInput">Reset Input</button>
<p>Your Name: {{ name }}</p>
// 현재 data : name 에는 '' 로 데이터 입력 X
위와 같이 name에 데이터를 입력하면, 자동으로 Vue.js에 선언 된 name에도 동일한 데이터가 양방향 바인딩을 통해 입력 된 것을 확인할 수 있다
3. v-bind, v-on, v-model
v-bind : class, style, value 등 속성(attribute)을 표현식에 동적으로 바인딩한다. 축약하여 " : "로 표현
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }">
</div>
// :class = v-vind:class
data() {
return {
isActive: true,
hasError: false
}
}
// 결과 <div class="static active"></div>
v-on : 해당 element에 event listener를 연결한다. 축약하여 "@"로 표현
[ v-on 속성 ]
@click="event": 클릭했을 때 실행
@change="event": 요소가 변경될 때 실행
@dbclick="event": 더블 클릭했을 때 실행
@mouseover="event": 마우스의 포인트가 요소 위로 올라왔을 때 실행
@submit="event": form이 제출될 때 실행
@reset="event": form이 재설정될 때 실행
@select="event": select 값이 선택되었을 때 실행
@focus="event": 태그에 포커스가 있을 때 실행
@keyup="event": 키보드의 키를 놓았을 때 실행
@keydown="event": 키보드의 키를 눌렀을 때 실행
@keypress="event": 키보드의 키를 눌렀다가 놓았을 때 실행
<div id="event-with-method">
<button @click="clickMethod">clickMethod</button>
// v-on:click = @click
</div>
Vue.createApp({
data(){
return{
name : 'test'
};
},
methods: {
clickMethod(event) {
alert(event.target.tagName);
// 해당 Element target 데이터를 가지고있음
}
}
});
// Data 바인딩 시
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
methods: {
clickMethod(msg, event) {
alert(msg);
// Form cannot be submitted yet. 출력
alert(event.target.tagName);
// 해당 Element target 데이터를 가지고있음
}
}
v-model : v-bind와 v-on을 편하게 쓸 수 있게 합쳐놓은 문법
** 단, 한글호환이 제대로 이뤄지지않기에 한글의 경우 v-bind, v-on 방식을 사용하는 것이 좋음
<input type="text" v-model="name">
// v-bind:value v-on:input의 경우
// <input type="text" :value="name" @input="inputData">
<button v-on:click="resetInput">Reset Input</button>
<p>Your Name: {{ name }}</p>
// 현재 data : name 에는 '' 로 데이터 입력 X
// v-bind의 경우 value에는 data의 name을, input에는 method의 inputData를 참조한다고 보면된다
[ v-bind:input의 경우 바로 데이터를 입력할 때 ]
<input type="text" @input="enteredGoalValue = $event.target.value"/>
** v-model의 경우 아직 완벽하게 한글에 호환되고 있지 않다. 한글을 사용하려면 다른 조치가 필요하니 필요 시 조치
아래의 @input을 사용할 경우 v-model과 동일한 효과를 볼 수 있다
4. method, computed, watch
[ 참고 블로그 ]
https://leffept.tistory.com/322
[Vue]Computed 와 Watch 언제 사용할까? (feat. computed vs methods)
Vue.js 공식 문서 (Computed vs Watch) computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Computed 속성 Vue.js 의 템플릿 문법에서 Javascript 표현식을 사용하면 원하는 데이터나
leffept.tistory.com
Vue에서 method, computed, watch는 컴포넌트로 선언 가능
const app = Vue.createApp({
data() {
return {
};
},
computed:{
// 데이터 바인딩에 보통 사용
// 데이터 변화시에만 실행
},
watch: {
// 업데이트 문에 보통 사용
},
methods: {
// 이벤트 바인딩에 보통 사용
// 매번 재실행
}
});
app.mount('#events');
간단하게 정의하자면
- method : 캐싱에 등록되지 않기에 매번 재실행되며, 이벤트 바인딩에 사용하기 적합함
- computed : 캐싱에 등록되어 데이터가 변할 때만 실행되며, 데이터 바인딩에 사용하기 적합함
- watch : 업데이트 작업에 적합함, 사용빈도가 가장 낮음
5. v-if, v-show
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" :input="enteredGoalValue"/>
<button @click="addGoal">Add Goal</button>
// v-if, v-else-if, v-else 사용법
<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
<ul v-else-if="goals.length === 1">
<li>Goal</li>
</ul>
<ul v-else>
<li>Goalssssssssss</li>
</ul>
// 단, v-if, v-else-if, v-else 사이에 다른 마크업 코드가 있으면 정상작동 x
// v-show 사용법
<ul v-show="goals.length < 1">
<li>no Goal!</li>
</ul>
</section>
** v-if와 v-show의 차이점
v-if, v-else-if, v-else의 경우 조건에 맞지 않는 것들은 완전히 html 코드가 사라지지만, v-show의 경우 display:none 처리가 될 뿐 직접적인 코드가 사라지는 것은 아니다
6. v-for
<ul v-else>
// goal in goals 기본 문법 (goals : 배열, 객체 등 , goal 배열 담는 파라미터)
<li v-for="goal in goals">{{ goal }}</li>
<li v-for="(goal, idx) in goals">{{ goal }} - {{ idx }}</li>
</ul>
<ul>
<li v-for="(key, value) in {name: 'Max', age: 31}">{{ key }} : {{ value }}</li>
<li v-for="value in {name: 'Max', age: 31}">{{ value }}</li>
</ul>
<ul>
<li v-for="num in 10">{{ num }}</li>
</ul>
v-for의 기본 사용법은 위와 같은 형태로 사용하면 된다
<li v-for="(goal, idx) in goals" :key="goal" @click="removeGoal(idx)">
<p>{{ goal }} - {{ idx }}</p>
<input type="text" :value="goal" @click.stop>
</li>
v-for의 key 선언 이유
[ 참고 블로그 ]
https://zzang9iu.tistory.com/101
[VUE] v-for key속성 사용하는 이유
https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key List Rendering | Vue.js vuejs.org Vue에서는 v-for를 사용할 경우 key 속성을 바인딩하도록 가이드 되어있다. key속성을 바인딩 하는 이유에 대해 랜더
zzang9iu.tistory.com
https://mytory.net/archives/15356
Vue의 v-for에서 :key를 사용해야 하는 이유
Vue 2.2부터는 v-for 지시자에 :key 프로퍼티를 사용하는 것이 필수가 됐습니다(Vue2 문서). <li v-for="item in items">{{ item.message }}</li> 이유는 성능 때문입니다. key를 기준으로 렌더링 대상을 식별하면 부
mytory.net
<li v-for="(goal, idx) in goals" :key="goal" @click="removeGoal(idx)">
<p>{{ goal }} - {{ idx }}</p>
<input type="text" :value="goal" @click.stop>
</li>
위 코드의 경우 아래와 같은 html 코드이다
위 경우 박스를 클릭 시 박스가 삭제되게 되는데, 22를 삭제하면 11,33번 박스만 남게된다.
하지만 Vue의 경우 key를 설정하지 않을 시 식별 기준이 없기에 33번 박스의 text 박스 값이 33이 아닌 22가 재사용되게 된다.
이러한 문제를 해결 및 대부분의 경우에는 key를 설정하는 것이 좋다
단, key는 고유한 식별 번호가 필요하며, 해당 식별 번호는 v-for(data, index)의 index를 사용해서는 안된다.
이유는 index는 해당 데이터 삭제시 가변적으로 변하는 데이터 이기 때문이다.