-
[Vue.js] 2021-07-05Web/Vue.js 2021. 7. 5. 17:46
환경 설정- CMD> npm install express-generator -g (-g 실행파일 다운로드)
=> express --version(버젼 확인) - CMD> express -e 생성할 프로젝트명
=> express 프로젝트 생성 (프로젝트명: 생성할 프로젝트명) - CMD> cd 생성한 프로젝트명 (생성한 프로젝트로 이동)
- CMD> npm install (npm 설치)
Vue-example(파일명: ex01)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>vue ex01 실습</h3> <div id="app"> <h4>{{message}}</h4> <h4 v-text="message"></h4> <!-- innerText --> <h4 v-html="message"></h4> <!-- innerHtml --> <input type="text" v-bind:value="message" /> <hr /> {{name}} <input type="text" v-model="name" /> <table border="1"> <!-- for(let tmp of members) { } --> <tr v-for="tmp in members"> <td>{{tmp.name}}</td> <td>{{tmp.age}}</td> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el :'#app', data :{ message :'hello world <hr />', name : 'aaa', members :[ {name:'a1', age:23}, {name:'a2', age:23}, {name:'a3', age:34} ] }, beforeCreate() { console.log('인스턴스 초기화'); }, created() { console.log('인스턴스 작성, $el 사용안됨'); }, beforeMount() { console.log('마운트 되기 전'); }, mounted() { console.log('마운트 된 직후, $el 사용 가능'); }, beforeUpdate() { console.log('데이터 변경되기 전') }, updated() { console.log('데이터 변경된 후') } }); </script> </body> </html>
- Vue를 사용하기 위해 body태그 내부에 해당 스크립트를 삽입한다.
=> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> - el : #app을 통하여 어떤 태그 내부에 적용시킬 것 인지 명시해준다.
- data는 실제 데이터로 key와 value로 구성되어 있다.
- v-text: HTML의 innerText와 같은 효과를 지닌다. 태그는 인식하지 못하기 때문에 태그가 그대로 출력된다.
- v-html:HTML의 innerHtml과 같은 효과를 지닌다. 태그를 인식하기 때문에 태그효과가 적용된다.
- v-bind:value: value의 값에 지정한 변수를 감싼다는 의미이다.
- 반복문을 사용할 경우 v-for를 이용하고 사용방법은 일반 반복문과 동일하다.
Vue-example(화면과 서버를 구분하여 값 전송받기)
<board_write.ejs>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>글쓰기</h3> <div id="app"> 글제목 : <input type="text" v-model="title" ref="title" /><br /> 내용 : <textarea rows="7" v-model="content" ref="content"></textarea><br /> 작성자 : <input type="text" v-model="writer" ref="writer" /><br /> 이미지 : <input type="file" v-on:change="handlerImage($event)" ref="image" /><br /> <input type="button" value="글쓰기" v-on:click="sendData()" /> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> new Vue({ el :'#app', data : { title:'', content:'', writer:'', image:'', }, updated() { //console.log(this.image); }, methods : { handlerImage(e) { //v-on:change console.log(e); this.image = e.target.files[0]; }, async sendData() { if(this.title === ''){ alert('제목을 입력하세요.'); //태그의 속성중에서 ref="title"인것의 focus() this.$refs.title.focus(); return; //함수 수행 중단 } try { const headers = { "Content-Type":"multipart/form-data" }; const obj = new FormData(); obj.append("title", this.title); obj.append("content", this.content); obj.append("writer", this.writer); obj.append("image", this.image); const response = await axios.post('/api/board_write.json', obj, headers); console.log(response); } catch (error) { console.error(error); } } } }); </script> </body> </html>
- v-model을 사용할 경우 입력받은 값이 실시간으로 data내부의 key에 value값으로 저장된다.
- 사진을 저장하기 위해 Content-Type을 multipart/form-data로 지정하였고, obj에 입력받은 title, content, writer, image 변수에 저장된 값을 append수행하였다.
- obj를 서버로 보내기 위해 axios.post를 작성하였고 경로, obj, header를 인자로 전달하였다.
- $ref의 역할은 유효성 검사 시 해당 속성이 비어있을 경우 focus를 수행하기 위해 만들었다.
<board_list.ejs>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <table border="1"> <tr> <th>_id</th> <th>제목</th> <th>작성자</th> <th>조회수</th> <th>날짜</th> </tr> <tr v-for="tmp in brdList"> <td>{{tmp._id}}</td> <td><a href="#">{{tmp.titie}}</a></td> <td></td> <td></td> <td></td> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> new Vue({ el :'#app', async mounted() { try{ const headers = { "Content-Type":"application/json" }; const { data } = await axios.get('/api/board_list.json', headers); console.log(data); if(data.ret === 1){ this.brdList = data.rows; } } catch(err){ console.error(err); } }, data : { brdList : [], } }); </script> </body> </html>
- 응답반은 결과 값중 { data }와 같이 표현하여 저장할 경우 해당 이름과 일치하는 항목만 변수에 저장시킨다.
- brdList는 원래 비어있는 리스트이지만 응답받은 결과를 brdList에 저장시켰고 해당 리스트를 바로 위에서 사용할 수 있는 것을 확인할 수 있다.
'Web > Vue.js' 카테고리의 다른 글
[Vue.js] 2021-07-12 (0) 2021.07.12 [Vue.js] 2021-07-07 (0) 2021.07.07 - CMD> npm install express-generator -g (-g 실행파일 다운로드)