Vue 폼 다루기

폼(form) : 사용자로부터 데이터를 입력받는 요소들의 그룹이며 서버로 전송하기 위해 사용

 

프론트에서 서버로 데이터를 전송하는 방법 2가지

<form action="/login_process"></form>

• form 태그에 action 속성을 이용해서 지정된 경로로 전송하여 처리하는 방법.

<form id="loginForm">

<input type="text" id="id"/>

</form>

<script>

document.getElementById("loginForm".addEventListener('submit', function(event){

//자바스크립트로 사용자로부터 입력받은 값을 받아온다.

const id = document.getElementById("id").value;

 

//사용자 입력 데이터를 서버에 전송하기 위한 AJAX 요청 만들기

const xhr = new XMLHttpRequest();

xhr.open('POST', '/login_process', true);

//AJAX 응답 설정하기

xhr.onreadystatechange = function(){

if (xhr.readState === XMLHttpRequest.DONE) {

if (xhr.status === 200) {

const response = xhr.responseText;

console.log(response);

} else {

console.error('Request failed' + xhr.status);

}

}

};

const formData = new formData();

formData.append('id', id);

xhr.send(formData);

}));

</script>

• 입력값을 자바스크립트로 가져와서 AJAX(Asynchronous JavaScript And XML) 사용하여 전송하는 방법.

 

form1.html

<form id="loginForm" action="/loginFormProcess">

ID : <input type="text" id="id"><br>

PASSWORD : <input type="password" id="pwd">

<button type="submit">login</button>

</form>

 

form2.html

<form id="loginForm">

ID : <input type="text" id="id"><br>

PASSWORD : <input type="password" id="pwd">

<button type="submit">login</button>

</form>

<script>

document.getElementById("loginForm".addEventListener('submit', function(event){

event.preventDefault();//별도의 폼 전송 처리하겠다는 의미.

//자바스크립트로 사용자로부터 입력받은 값을 받아온다.

const id = document.getElementById("id").value;

const password = document.getElementById("password").value;

 

//사용자 입력 데이터를 서버에 전송하기 위한 AJAX 요청 만들기

const xhr = new XMLHttpRequest();

xhr.open('POST', '/login_process', true);

 

//AJAX 응답 설정하기

xhr.onreadystatechange = function(){

if (xhr.readState === XMLHttpRequest.DONE) {

if (xhr.status === 200) {

const response = xhr.responseText;

console.log(response);

} else {

console.error('Request failed' + xhr.status);

}

}

};

const formData = new formData();

formData.append('id', id);

formData.append('password', password);

xhr.send(formData);

}));

</script>

 

form1.html과 form2.html의 차이

• form2.html(AJAX 기술 적용) : 사용자 입력 데이터를 전송하면서 페이지를 이동하지 않아도 되므로 데이터를 전송한 후, 처리 방법의 자유도가 높다.

v-model 디렉티브로 폼 요소를 다룬다.

• 사용자가 입력한 요소의 값을 가져오는 것은 폼의 가장 기본적인 방법이다.
• 뷰에서는 입력한 요소의 값을 가져올 때 v-model 디렉티브를 이용한다.
• script 태그 영역에서 정의한 데이터 속성과 template 태그 영역에서 HTML 요소가 양방향으로 서로 연결되어 데이터 속성의 값을 자동으로 업데이트 한다.
• 이를 양방향 데이터 바인딩이라고 한다.

<script>

export default{

data(){

return{

beverage : ['americano', 'caffelatte', 'banilalatte'],

};

},

methods : {

printData(){

console.log(`beverage : ${this.beverage}`);

},

}

}

</script>

<!-- mustach syntax -->

<template>

<form>

<select v-model="beverage">

<option id="beverage" value="americano" >아메리카노</option>

<option id="beverage" value="caffelatte" >카페라떼</option>

<option id="beverage" value="banilalatte" >바닐라라떼</option>

</select>

<button type="button" @click="printData">어떤 커피를 선택하실래요?</button>

</form>

</template>

<style>

 

</style>

 

v-model 사용시 주의사항

• 한 줄 입력 요소에 텍스트를 입력하게 되면 v-model 디렉티브에서 바인딩한 message 데이터 속성의 값이 실시간으로 변경된다.
• 영어로 작성할 때는 실시간으로 되지만, 한글로 작성하는 경우에는 한 글자씩 느리게 반영이 된다.
• 한글이나 한자처럼 글자를 조합해서 단어를 만드는 문자는 IME(Input Method Editor)를 사용하는 딜레이가 되는 문제가 발생한다.
• 이 문제를 해결하기 위해서는 이벤트 수동으로 처리(데이터를 업데이트)해주어야 한다.
• 실시간으로 글자 수를 확인해야 하는 기능을 구현 시에는 v-model을 사용하지 않는다.
• 따라서 v-on 디렉티브와 이벤트 타입, 폼 요소와 연합하여 수동으로 처리해보자.
• input으로 이벤트를 처리하면 된다.(아래 코드 참고)

<script>

export default{

data(){

return{

message : '',

};

},

methods : {

onChangeHandler($event){

this.message = $event.target.value;

console.log(this.message);

},

}

}

</script>

<!-- mustach syntax -->

<template>

<input type="text" @input="onChangeHandler($event)">

{{ message }}

</template>

<style>

 

</style>

 

submit 이벤트 처리

• <form></form> 태그에 사용한 폼 요소의 데이터를 서버로 전송하는 시점에서 발생하는 이벤트

<script>

export default{

methods : {

onSubmitHandler(e){

e.preventDefault();//별도의 폼 전송 처리하겠다는 의미.

console.log('OnSubmit Handler!!')

},

}

}

</script>

<!-- mustach syntax -->

<template>

<form @submit="onSubmitHandler">

<button type="submit">submit</button>

</form>

</template>

<style>

 

</style>

 

computed 속성

• Options API에서 제공하는 속성 중 하나이다.
• 컴포넌트에서 자주 사용하는 데이터를 캐시(cache, 데이터를 메모리에 임시로 저장하는 것)
• 어플리케이션 성능을 향상시킬 때 사용 및 코드의 가독성 높혀줌.

<script>

export default{

data(){

return{

firstName : 'JuHwan',

lastName : 'Lee',

};

},

computed : {

fullName(){

console.log('computed full name');

return `${this.lastName} ${this.firstName}`;

},

}

}

</script>

<template>

<h1>{{ fullName }}</h1>

</template>

<style>

 

</style>

 

watch(감시자) 속성

• Options API에서 제공하는 속성 중 하나이다.
• 데이터의 변경을 감시하고 변경이 감시될 때 마다 특정 동작을 수행할 수 있다.

<script>

export default{

data(){

return{

inputStr : '',

};

},

watch : {

inputStr(newValue, oldValue){

console.log(`oldValue = ${oldValue}`);

console.log(`newValue = ${newValue}`);

},

}

}

</script>

<template>

<input type="text" name="" id="" v-model="inputStr">

</template>

<style>

 

</style>