오늘의 코딩순서
(폴더: vue3Basic)
(04 폴더)
- App_keyEvent.vue
- App_vFor.vue
(05 폴더)
- App_vmodel.vue
- App_watch01.vue
- App_watch02.vue
- App_watchEffect.vue
오늘의 코딩 포인트
(04 폴더)
- App_keyEvent.vue
Tip) npm install -D sass를 콘솔창에 입력하여 기능 추가하기
- .prevent
- 점(.)으로 표시되는 특수 접미사로, 디렉티브가 특별한 방식으로 바인딩됨
- JavaScript의 Event.preventDefault 메소드를 호출하며,
Event 인터페이스의 preventDefault() 메소드는 이벤트가 명시적으로 처리되지 않은 경우에 user agent에 그 기본 액션을 정상적으로 수행해서는 안 된다고 전달
- .prevent.stop: 예기치 못한 이벤트들을 다 정지해줌
<template>
<div id="modifiers">
<div @click="clickDiv">
DIV 영역
<p @click="clickP">
P영역
<span @click="clickSpan">span영역</span>
<!-- .prevent는 JavaScript의 Event.preventDefault 메소드를 호출한다. Event 인터페이스의 preventDefault() 메소드는 이벤트가 명시적으로 처리되지 않은 경우에 user agent에 그 기본 액션을 정상적으로 수행해서는 안 된다고 전달하는 역할을 함 -->
<a href="https://www.naver.com/" @click.prevent.stop="clickA">a 영역</a>
</p>
</div>
<button @click.once="clickDiv">once</button>
</div>
</template>
<script>
export default {
setup() {
const clickDiv = () => {
console.log('clickDiv')
}
const clickP = () => {
console.log('clickP')
}
const clickSpan = () => {
console.log('clickSpan')
}
const clickA = () => {
alert('어떤기능~')
}
return {
clickDiv,
clickP,
clickSpan,
clickA
}
}
}
</script>
<style lang="scss" scoped>
#modifiers div,
#modifiers p,
#modifiers span {
padding: 40px;
}
#modifiers div {
background-color: #ccc;
}
#modifiers p {
background-color: #999;
}
#modifiers span {
background-color: #666;
display: block;
}
</style>
차례로 DIV영역, P영역, span영역 눌렀을때 콘솔에 나오는 메시지
a 영역 눌렀을때 anchor 이벤트
- App_vFor.vue
Tip) v-for를 활용하면 Json객체를 가져와 화면에 나타낼 수 있음
<template>
<div>
<ul>
<template v-for="(item, index) in eventItems" :key="item.id">
<li>ID: {{ item.id }} 인덱스 : {{ index }} , {{ item.message }}</li>
</template>
</ul>
<hr />
<ul>
<li v-for="(value3, key3, kIndex) in myObject" :key="key3">
{{ kIndex }}-{{ key3 }}-{{ value3 }}
</li>
</ul>
</div>
</template>
<script>
import { computed, reactive } from 'vue'
export default {
setup() {
const items = reactive([
{ id: 1, message: 'Java' },
{ id: 2, message: 'HTML' },
{ id: 3, message: 'CSS' },
{ id: 4, message: 'JavaScript' }
])
const eventItems = computed(() => items.filter((item) => item.id % 2 === 0))
const myObject = reactive({
title: '제목',
author: '강태광',
publishedAt: '2024-03-04'
})
return {
items,
eventItems,
myObject
}
}
}
</script>
<style lang="scss" scoped></style>
(05 폴더)
- App_vmodel.vue
Tip)
- v-model: 양방향 바인딩 처리를 위해서 사용하며, form의 input이나 textarea에서 사용함
- trim: 양쪽으로 띄어쓰기, 개행을 제외한 msg값을 가져올 수 있게 해줌
- checkboxValues는 배열값으로 지정
<template>
<div>
<h2>input value</h2>
<input type="text" v-model.trim="inputValue" />
<div>{{ inputValue }}</div>
<div>{{ typeof inputValue }}</div>
<hr />
<h2>textarea value</h2>
<textarea v-model="textareaValue"></textarea>
<div>{{ textareaValue }}</div>
<hr />
<h2>checkbox value</h2>
<label for="checkbox">{{ checkboxValue }}</label>
<input
type="checkbox"
id="checkbox"
v-model="checkboxValue"
true-value="Yes"
false-value="No"
/>
<h3>checkbox values</h3>
<label>
<input type="checkbox" value="html" v-model="checkboxValues" />
HTML
</label>
<label>
<input type="checkbox" value="jsp" v-model="checkboxValues" />
JSP
</label>
<label>
<input type="checkbox" value="javascript" v-model="checkboxValues" />
JavaScript
</label>
<div>{{ checkboxValues }}</div>
<hr />
<h2>radio value</h2>
<label>
<input type="radio" name="type" value="O" v-model="radioValue" />
O형
</label>
<label>
<input type="radio" name="type" value="A" v-model="radioValue" />
A형
</label>
<div>
{{ radioValue }}
</div>
</div>
<hr />
<h2>select value</h2>
<select v-model="selectValue">
<option value="html">HTML 수업</option>
<option value="jsp">JSP 수업</option>
<option value="javascript">JavaScript 수업</option>
</select>
<div>{{ selectValue }}</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const inputValue = ref('')
const textareaValue = ref('')
const checkboxValue = ref('Yes')
const checkboxValues = ref([])
const radioValue = ref('O')
const selectValue = ref('html')
return {
inputValue,
textareaValue,
checkboxValue,
checkboxValues,
radioValue,
selectValue
}
}
}
</script>
<style lang="scss" scoped></style>
- App_watch01.vue
Tip)
- v-on: 접두사가 있는 특수 속성으로 디렉티브의 값(value)이 변경될 때 특정 효과를 반응적으로 DOM에 적용
- watch 함수
- 오브젝트 형태로 사용할 수 있고 선언한 변수를 가져와서 사용할 수 있으며, 선언한 변수를 가져와서 사용할 때는 메서드 형태로 작성함
- 데이터 변경을 감지하고 반응할 수 있으며, 데이터 변경 결과에 따라 추가 반응 및 데이터 조작도 가능함
- API 엑세스(비동기 연산)을 수행하고 최종응답을 얻을 때 까지 중간 상태를 설정 할 수도 있음
- 비동기식 이거나 시간이 많이 소요되는 작업을 수행하려고 하는 경우 유용하게 사용할 수 있음
- 이전값, 현재값 모두 필요한 경우 사용
<template>
<div>
<p>{{ message }}</p>
<p>{{ reverseMessage }}</p>
<button v-on:click="reverseCall">reverseCall</button>
</div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const message = ref('안녕 Vue3')
const reverseMessage = ref('')
const reverseCall = () => {
console.log('reverseCall 즉시실행!!!')
reverseMessage.value = message.value.split('').reverse().join()
}
watch(message, reverseCall)
return {
message,
reverseMessage,
reverseCall
}
}
}
</script>
<style lang="scss" scoped></style>
watch 트리거를 넣으면 메시지를 수정할 때 화면도 같이 반응함
- App_watch02.vue
Tip) trigger와 비슷한 역할을 함
- newValue: 현재 message에 바인딩된 값을 가짐
- oldValue: 현재 message에 바인딩된 데이터 바로 이전의 값을 가짐
<template>
<div></div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const message = ref('')
// newValue는 현재 message에 바인딩된 값
// oldValue는 현재 message에 바인딩된 데이터 바로 이전의 값
watch(message, (newValue, oldValue) => {
console.log('newValue: ', newValue)
console.log('oldValue: ', oldValue)
})
return {
message
}
}
}
</script>
<style lang="scss" scoped></style>
- App_watchEffect.vue
Tip) ''(작은 따옴표) 가 아니라 물결표 아래의 ``를 써야함
- @submit
- form의 기본적인 동작이 수행되는 것이 아닌, 지정한 메서드가 실행됨
- 폼 내부에서 버튼을 누르면 submit이벤트가 form으로 전송되어 @submit가 실행됨
- 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자
- 동적 전달인자 : 대괄호를 사용하여 전달인자를 동적으로 삽입
- prevent
- 일반 자바스크립트에서 form의 기본 동작 이벤트(새로고침)를 하지 않도록 제어하는 이벤트
- Vue에서는 대신에 v-on:submit.prevent 를 사용
- lazy: 이벤트를 작동시킨 뒤에 한꺼번에 작용시키고 싶을때
- watchEffect: watch는 이전값, 현재값 모두 필요한 경우 사용하지만,
watchEffect는 현재값만 필요할 때 사용하며 감시하는 대상을 명시적으로 지정하지 않음
<template>
<div>
<form @submit.prevent>
<!-- 일반 자바스크립트에서 form의 기본 동작 이벤트(새로고침)를 하지 않도록 제어하는 이벤트.
Vue에서는 대신에 v-on:submit.prevent 를 사용 -->
<input v-model.lazy="title" type="text" placeholder="Title" />
<textarea v-model="contents" placeholder="Contents"></textarea>
<hr />
<button @click="save(title, contents)">저장</button>
</form>
</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const title = ref('')
const contents = ref('')
const save = (title, contents) => {
console.log(`저장되었습니다, title: ${title}, contents: ${contents}`)
// alert('저장 Wait!')
}
// watch는 이전값, 현재값 모두 필요한 경우 사용.
// watchEffect는 현재값만 필요할 때 사용.
// watchEffect는 감시하는 대상을 명시적으로 지정하지 X
watchEffect(() => {
console.log('watchEffect')
save(title.value, contents.value)
})
return {
title,
contents,
save
}
}
}
</script>
<style lang="scss" scoped></style>
질문목록
수업교재
오늘의 숙제
