728x90
반응형
프로젝트 발표가 한주 미뤄져서 프론트 한 주 더 배우고 적용해서 완성을 하게 됐다.
일단 오늘은 VueJS 기초 문법을 배워서 정리해보도록 하겠다.
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>VueJS도 라이브러리 이기 때문에 이렇게 한 줄 갖다놔야 한다.
그럼 본격적으로 문법 공부 시작
1. VueJS life cycle
<body>
<center>
<!-- VueJS적용되는 위치 지정 : id, class -->
<div id="app">
<h1>{{message}}</h1>
<input type=text size=20 v-model="message">
</div>
<script>
// 객체 생성 (Vue)
new Vue({
el:'#app',
data:{
message:'Hello VueJS!!',
},
beforeCreate(){
console.log("beforeCreate():이벤트 등록, 인스턴스의 초기화..")
},
created(){
console.log("created():인스턴스 작성이 종료")
},
beforeMount(){
console.log("beforeMount():메모리에 저장 전 상태(서버연결 후 데이터를 읽어오는 상태)")
},
mounted(){
console.log("mounted():메모리에 저장되는 상태(window.onload, $(function(){}):데이터 배치 종료)")
},
beforeUpdate(){
console.log("beforeUpdate():데이터나 화면 변경전 호출")
},
updated(){
console.log("updated():데이터나 화면 변경후 호출")
},
beforeDestory(){
console.log("beforeDestory() Call...")
},
destroyed(){
console.log("destroyed() Call...")
}
})
</script>
</center>
</body>우선 VueJS를 쓸려면 객체를 생성해야하고 데이터를 올려줘야할 곳에 id를 준다.
이 생명주기 함수가 어떻게 호출되는지 확인해보기 위해 실행해봤다.
데이터가 배치 되고 그 이후에는 수정을 하지 않았기 때문에 mounted함수 까지 호출됐다.
텍스트 상자안의 내용을 바꾸면 화면 출력도 바꾸게 코드를 짰기 때문에 한번 바꿔봤다
텍스트 상자에 글자를 쓰면 beforeUpdate(), updated() 함수가 번갈아가면서 호출된다.
2. 디렉티브
<!--
디렉티브
제어문
====
v-if : 조건문
v-for : 반복문
v-else
v-show : 화면 보여주기
v-hide : 화면 감추기
v-model : 양방향 통신 (입력값을 읽어서 출력을 동시에 함)
이벤트 처리 : 버튼 클릭, 콤보박스 선택...
컴포넌트 제작 => 이벤트 버스 (양방향 채팅이 가능)
템플릿, 라우트 (자체 내에서 화면 이동이 가능)
-->앞으로 배워야할 문법 리스트이다.
JSON으로 데이터를 저장하고 직접 불러와보는 예제를 써봤다.
<div style="height:40px"></div>
<div class="container">
<h1>영화목록</h1>
<div class="row" id="app">
<%--for(MovieVO vo:list) --%>
<div>
{{$data }}
</div>
<div class="col-md-3" v-for="m in movie" v-if="m.mno==1">
<div class="thumbnail">
<img :src="m.poster" style="width:100%">
<div class="caption">
<p>{{m.title}}</p>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
movie:[
{"actor":"가엘 가르시아 베르날 , 앤서니 곤잘레스 , 벤자민 브랫","director":"리 언크리치","grade":"전체","title":"코코","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80397\/80397_185.jpg","mno":1,"story":"영원히 기억하고 싶은 황홀한 모험이 시작된다! 뮤지션을 꿈꾸는 소년 미구엘은 전설적인 가수 에르네스토의 기타에 손을 댔다 \u2018죽은 자들의 세상\u2019에 들어가게 된다. 그리고 그곳에서 만난 의문의 사나이 헥터와 함께 상상조차 못했던 모험을 시작하게 되는데\u2026 과연 \u2018죽은 자들의 세상\u2019에 숨겨진 비밀은? 그리고 미구엘은 무사히 현실로 돌아올 수 있을까?"},{"actor":"김윤석 , 하정우 , 유해진 , 김태리 , 박희순 , 이희준","director":"장준환","grade":"15세 이상","title":"1987","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80320\/80320_185.jpg","mno":2,"story":"\u201C책상을 탁! 치니 억! 하고 죽었습니다\u201D 1987년 1월, 경찰 조사를 받던 스물두 살 대학생이 사망한다. 증거인멸을 위해 박처장(김윤석)의 주도 하에 경찰은 시신 화장을 요청하지만, 사망 당일 당직이었던 최검사(하정우)는 이를 거부하고 부검을 밀어붙인다. 단순 쇼크사인 것처럼 거짓 발표를 이어가는 경찰. 그러나 현장에 남은 흔적들과 부검 소견은 고문에 의한 사망을 가리키고, 사건을 취재하던 윤기자(이희준)는 \u2018물고문 도중 질식사\u2019를 보도한다. 이에 박처장은 조반장(박희순)등 형사 둘만 구속시키며 사건을 축소하려 한다. 한편, 교도소에 수감된 조반장을 통해 사건의 진상을 알게 된 교도관 한병용(유해진)은 이 사실을 수배 중인 재야인사에게 전달하기 위해 조카인 연희(김태리)에게 위험한 부탁을 하게 되는데\u2026 한 사람이 죽고, 모든 것이 변화하기 시작했다. 모두가 뜨거웠던 1987년의 이야기."},{"actor":"하정우 , 차태현 , 주지훈 , 김향기 , 이정재","director":"김용화","grade":"12세 이상","title":"신과함께-죄와 벌","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80090\/80090_185.jpg","mno":3,"story":"저승 법에 의하면, 모든 인간은 사후 49일 동안 7번의 재판을 거쳐야만 한다. 살인, 나태, 거짓, 불의, 배신, 폭력, 천륜 7개의 지옥에서 7번의 재판을 무사히 통과한 망자만이 환생하여 새로운 삶을 시작할 수 있다. \u201C김자홍 씨께선, 오늘 예정 대로 무사히 사망하셨습니다\u201D 화재 사고 현장에서 여자아이를 구하고 죽음을 맞이한 소방관 자홍, 그의 앞에 저승차사 해원맥과 덕춘이 나타난다. 자신의 죽음이 아직 믿기지도 않는데 덕춘은 정의로운 망자이자 귀인이라며 그를 치켜세운다. 저승으로 가는 입구, 초군문에서 그를 기다리는 또 한 명의 차사 강림, 그는 차사들의 리더이자 앞으로 자홍이 겪어야 할 7개의 재판에서 변호를 맡아줄 변호사이기도 하다. 염라대왕에게 천년 동안 49명의 망자를 환생시키면 자신들 역시 인간으로 환생시켜 주겠다는 약속을 받은 삼차사들, 그들은 자신들이 변호하고 호위해야 하는 48번째 망자이자 19년 만에 나타난 의로운 귀인 자홍의 환생을 확신하지만, 각 지옥에서 자홍의 과거가 하나 둘씩 드러나면서 예상치 못한 고난과 맞닥뜨리는데\u2026 누구나 가지만 아무도 본 적 없는 곳, 2017년 새로운 세계의 문이 열린다!"},{"actor":"드웨인 존슨 , 잭 블랙 , 케빈 하트 , 카렌 길런","director":"제이크 캐스단","grade":"12세 이상","title":"쥬만지: 새로운 세계","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000079\/79927\/79927_185.jpg","mno":4,"story":"학교 창고를 청소하다가 낡은 \u2018쥬만지\u2019 비디오 게임을 발견한 네 명의 아이들. 게임 버튼을 누르는 순간 화면 속으로 빨려 들어가버렸다! 거대한 몸집의 고고학자 닥터 브레이브스톤(드웨인 존슨)으로 변한 공부벌레 스펜서, 슈퍼 여전사 루비 라운드하우스(카렌 길런)가 된 운동신경 제로 마사, 저질체력의 동물학 전문가 무스 핀바(케빈 하트)가 된 예비 풋볼선수 프리지, 중년의 지도 연구학 교수 셸리 오베론(잭 블랙)으로 변해버린 SNS 중독 퀸카 베서니까지. 이들은 자신의 아바타가 가진 능력으로 게임 속 세계를 구하는 미션을 수행하고 현실로 돌아가야만 하는데\u2026. 전설의 게임이 다시 시작된다!"},{"actor":"휴 잭맨 , 잭 에프론 , 레베카 퍼거슨 , 미셸 윌리엄스","director":"마이클 그레이시","grade":"12세 이상","title":"위대한 쇼맨","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80066\/80066_185.jpg","mno":5,"story":"불가능한 꿈, 그 이상의 쇼! 쇼 비즈니스의 창시자이자, 꿈의 무대로 전세계를 매료시킨 남자 \u2018바넘\u2019의 이야기에서 영감을 받아 탄생한 오리지널 뮤지컬 영화 <위대한 쇼맨>. <레미제라블> 이후 다시 뮤지컬 영화로 돌아온 휴 잭맨부터 잭 에프론, 미셸 윌리엄스, 레베카 퍼거슨, 젠다야까지 할리우드 최고의 배우들이 합류해 환상적인 앙상블을 선보인다. 여기에 <미녀와 야수> 제작진과 <라라랜드> 작사팀의 합류로 더욱 풍성해진 비주얼과 스토리, 음악까지 선보일 <위대한 쇼맨>은 \u2018우리는 누구나 특별하다\u2019는 메시지로 관객들에게 재미는 물론, 감동까지 선사할 것이다. THIS IS ME! 우리는 누구나 특별하다!"},{"actor":"맷 데이먼 , 크리스토프 왈츠 , 크리스틴 위그","director":"알렉산더 페인","grade":"15세 이상","title":"다운사이징","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80067\/80067_185.jpg","mno":6,"story":"\u201C1억이 120억이 되는 세상! 돈 걱정, 집 걱정은 이제 끝났다!\u201D 평생을 같은 집에 살면서 10년째 같은 식당에서 저녁을 때우며 평범한 삶을 살아가는 폴. 아내의 유일한 소원인 더 넓은 집을 갖는 것도 대출 조건이 되지 않아 포기할 수 밖에 없다. 한편, 인구과잉에 대한 해결책으로 인간축소프로젝트인 다운사이징 기술이 개발된다. 이 기술은 단순히 부피를 0.0364%로 축소시키고 무게도 2744분의 1로 줄이는 것이 아니라 1억원의 재산이 120억원의 가치가 되어 왕처럼 살 수 있는 기회의 시작이기도 하다. 화려한 삶을 그리며 폴과 아내는 다운사이징을 선택하지만, 시술을 마친 폴은 아내가 가족의 곁을 떠나기 싫어 다운사이징 된 자신을 두고 도망갔다는 청천벽력 같은 소식을 듣게 된다. 커다란 저택, 경제적인 여유, 꿈꾸던 럭셔리 라이프를 살아가지만 이혼 후 모든 것이 무의미해져 버린 폴. 그리고 모든 꿈이 실현되리라 믿은 다운사이징 세상에서도 또 다른 위기가 그를 기다리는데\u2026 과연 폴은 자신이 꿈꾸던 행복한 삶을 찾아갈 수 있을까?"},{"actor":"존 시나 , 케이트 맥키넌 , 지나 로드리게즈 , 안소니 앤더슨 , 데이빗 테넌트 , 미구엘 앙겔 실베스트레 , 후아네스","director":"카를로스 살다나","grade":"전체","title":"페르디난드","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80412\/80412_185.jpg","mno":7,"story":"덩치만큼 러블리한 녀석이 온다 꽃을 사랑하는 소블리의 컴백홈 어드벤처 몸집은 거대하지만, 마음은 따뜻한 소블리 페르디난드. 세상에서 가장 좋아하는 것은 아름다운 꽃향기와 사랑스러운 친구 니나. 어느 날 꽃 축제를 구경 간 페르디난드는 벌에 엉덩이를 쏘이고 만다. 너무 아파서 날뛰는 모습을 오해한 사람들은 페르디난드를 싸움소 훈련장에 끌고 간다. 하지만 싸움은 해본 적도, 관심도 없는 페르디난드는 수다쟁이 염소, 시끌벅적 황소들, 깨방정 고슴도치 삼남매 친구들과 함께 집으로 돌아가기 위한 좌충우돌 모험을 시작한다."}]
}
})
</script>
</div>
</body>v-for는 반복문, v-if는 조건문으로 사용이 가능하다.
JSON의 데이터를 가져오기 위해서는 반복문에서 변수를 정해주고, (변수.키값) 이렇게 하면 받아올 수 있다.
<div id="app">
<h1 v-if="!message">Hello Vue</h1>
<template v-else>
<p>안녕하세요!!</p>
<p>VueJS 문법 = v-if (디렉티브)</p>
<p>message변수에 값이 없는 경우</p>
</template>
<textarea rows="5" cols="25" v-model="message"></textarea>
<pre>
{{$data}}
</pre>
</div>
<script>
new Vue({
el:'#app',
data:{
message:''
}
})
</script>v-if, v-else 문법 연습 data의 message에 값을 넣어주면
메세지가 없을때 이렇게 뜨고,
있으면 이렇게 뜬다. 화면 깜빡임 없이 바로 값이 동적으로 바뀐다.
VueJS는 가상돔을 사용해서 미리 값을 변경해주고 바뀐 결과값을 화면에 띄워주기 때문에 반응속도가 빠르고 즉각적으로 데이터가 바뀌어서 보여진다.
<!--
화면에 값이 갱신 화면 변경 (메모리 해제)
created = mounted = (update) = (destroyed)
======= ======= $(function(){})
new Vue() 가상돔(메모리)에 HTML저장이 완료
객체 저장
repgenrenm thumbUrl
-->
<div class="container" id="app">
<h1 class="text-center">{{title}}</h1>
<div style="height:30px"></div>
<div class="row">
<button class="btn btn-sm btn-primary" v-on:click="click('박스오피스')">박스오피스</button>
<button class="btn btn-sm btn-danger" v-on:click="click('실시간 예매율')">실시간 예매율</button>
<button class="btn btn-sm btn-success" v-on:click="click('좌석 점유율')">좌석 점유율</button>
<button class="btn btn-sm btn-info" v-on:click="click('온라인 이용순위')">온라인 이용순위</button>
</div>
<div style="height:30px"></div>
<div class="row">
<div class="text-center">
<table class="table">
<tr>
<th class="text-center">순위</th>
<th class="text-center"></th>
<th class="text-center">영화명</th>
<th class="text-center">장르</th>
</tr>
<tr v-for="m in movie">
<td class="text-center">{{m.rank}}</td>
<td class="text-center">
<img :src="'https://www.kobis.or.kr'+m.thumbUrl" width=30 height=30>
</td>
<td class="text-left">{{m.movieNm}}</td>
<td class="text-left">{{m.genre}}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
new Vue({
el:'.container',
data:{
movie:[], // 멤버변수 (가져올때 항상 this 사용해야함)
title:'온라인 이용순위'
},mounted(){
// 생명주기 함수 : 메모리에 HTML을 저장 => React (componentDiMount())
// 데이터를 서버에서 얻어와서 데이터 출력하기 위해 HTML을 메모리 저장 (트리형태=돔(DOM)), ajax에서 success와 같음
/*axios.get('https://www.kobis.or.kr/kobis/business/main/searchMainOnlineDailyBoxOffice.do')
.then(response=>{
this.movie=response.data
console.log(response)
})*/
this.movie=[{"rownum":1,"saleTotcnt":4545,"movieCd":"20216492","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"노바디","opendt":"2021-04-07","repgenrenm":"액션","rank":1,"rankInten":0,"rankOldAndNew":"OLD","synop":"정말이지 착하게 살고 싶었다. 참으려고 했다.\r\n이제 나 건드리면 X된다!\r\n\r\n비범한 과거를 숨긴 채 남들과 다를 바 없는 평범한 일상을 사는 한 가정의 가장 ‘허치’\r\n매일 출근을 하고, 분리수거를 하고 일과 가정 모두 나름 최선을 다하지만\r\n아들한테는 무시당하고 아내와의 관계도 소원하다.\r\n그러던 어느 날, 집안에 강도가 들고 허치는 한 번의 반항도 하지 못하고 당한다.\r\n더 큰 위험으로부터 가족을 지키기 위한 선택이었는데 모두 무능력하다고 ‘허치’를 비난하고,\r\n결국 그동안 참고 억눌렀던 분노가 폭발하고 만다.","movieNmEn":"Nobody","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"액션,코미디","showTm":"91","showTs":"42","watchGradeNm":"15세이상관람가","openDt":"20210407","thumbUrl":"/common/mast/movie/2021/03/thumb/thn_b47ad1643a234bc3bf7a1efdf483bbff.jpg","prdtYear":"2020","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"일리야 나이슐러","prNm":null,"dtNm":"유니버설픽쳐스인터내셔널 코리아(유)"},{"rownum":2,"saleTotcnt":3155,"movieCd":"20205144","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"미나리","opendt":"2021-03-03","repgenrenm":"드라마","rank":2,"rankInten":0,"rankOldAndNew":"OLD","synop":"2021년 전 세계가 기다린\r\n어느 한국 가족의 원더풀한 이야기\r\n\r\n\"미나리는 어디서든 잘 자라\"\r\n\r\n낯선 미국, 아칸소로 떠나온 한국 가족\r\n가족들에게 뭔가 해내는 걸 보여주고 싶은 \r\n아빠 '제이콥'(스티븐 연)은 자신만의 농장을 가꾸기 시작하고\r\n엄마 '모니카'(한예리)도 다시 일자리를 찾는다\r\n\r\n아직 어린아이들을 위해 ‘모니카’의 엄마 ‘순자’(윤여정)가 함께 살기로 하고\r\n가방 가득 고춧가루, 멸치, 한약 그리고 미나리씨를 담은 할머니가 도착한다\r\n의젓한 큰딸 '앤'(노엘 케이트 조)과 장난꾸러기 막내아들 '데이빗'(앨런 김)은\r\n여느 그랜마같지 않은 할머니가 영- 못마땅한데…\r\n\r\n함께 있다면, 새로 시작할 수 있다는 희망으로 \r\n하루하루 뿌리 내리며 살아가는\r\n어느 가족의 아주 특별한 여정이 시작된다!","movieNmEn":"Minari","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"드라마","showTm":"115","showTs":"8","watchGradeNm":"12세이상관람가","openDt":"20210303","thumbUrl":"/common/mast/movie/2021/03/thumb/thn_2f506c5593754549bc24b959132dcef5.jpg","prdtYear":"2020","indieYn":null,"artmovieYn":null,"multmovieYn":"Y","director":"정이삭","prNm":null,"dtNm":"판씨네마(주)"},{"rownum":3,"saleTotcnt":1825,"movieCd":"20215850","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"고질라 VS. 콩","opendt":"2021-03-25","repgenrenm":"액션","rank":3,"rankInten":0,"rankOldAndNew":"OLD","synop":"두 전설의 충돌, 사상 최강 빅매치! \r\n승자는 정해진다!\r\n\r\n거대 몬스터들의 습격을 받은 지 3년 후, 콩은 스컬 아일랜드를 떠나 인간들의 보호관찰을 받고 있다. 한편, 인간들에게 등을 돌린 고질라는 비밀연구회사인 에이펙스에 존재하는 알 수 없는 힘에 이끌려 그곳을 쑥대밭으로 만든다. 위기 상황 속, 지구 안의 또 다른 지구인 할로우 어스의 에너지원을 찾아야만 인류가 안전할 수 있다는 판단하에 콩의 보호자들은 콩과 특별한 유대감을 형성하는 아이 지아와 함께 타이탄들의 고향일지 모르는 그곳으로 위험한 여정을 떠난다. 그러던 중 분노에 찬 고질라의 공격을 받고, 마침내 맞붙게 된 두 전설의 장대한 대결은 앞으로 닥쳐올 대재앙의 서막에 불과했는데…\r\n세상의 운명을 놓고, 지구상 가장 거대한 신화적 존재들의 스펙터클한 대격돌이 시작된다!","movieNmEn":"Godzilla VS. Kong","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"액션","showTm":"113","showTs":"1","watchGradeNm":"12세이상관람가","openDt":"20210325","thumbUrl":"/common/mast/movie/2021/03/thumb/thn_e6e53a5c112b449aa5b9a6271bcbdee3.jpg","prdtYear":"2021","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"아담 윈가드","prNm":null,"dtNm":"워너브러더스 코리아(주)"},{"rownum":4,"saleTotcnt":1337,"movieCd":"20197434","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"자산어보","opendt":"2021-03-31","repgenrenm":"사극","rank":4,"rankInten":0,"rankOldAndNew":"OLD","synop":"“이 양반은 대역 죄인이니 너무 잘해줄 생각들 말어”\r\n순조 1년, 신유박해로 세상의 끝 흑산도로 유배된 ‘정약전’.\r\n호기심 많은 '정약전'은 그 곳에서 바다 생물에 매료되어 책을 쓰기로 한다. \r\n이에 바다를 훤히 알고 있는 청년 어부 ‘창대’에게 도움을 구하지만\r\n‘창대’는 죄인을 도울 수 없다며 단칼에 거절한다.\r\n \r\n“내가 아는 지식과 너의 물고기 지식을 바꾸자\"\r\n‘창대’가 혼자 글 공부를 하며 어려움을 겪고 있다는 것을 알게 된 ‘정약전’은\r\n서로의 지식을 거래하자고 제안하고\r\n거래라는 말에 ‘창대’는 못 이기는 척 받아들인다. \r\n둘은 티격태격하면서도 점차 서로의 스승이자 벗이 되어 간다.\r\n \r\n\"너 공부해서 출세하고 싶지?\"\r\n그러던 중 '창대'가 출세하기 위해 공부에 매진했다는 사실을 알게 된 '정약전'은 크게 실망한다.\r\n‘창대’ 역시 '정약전'과는 길이 다르다는 것을 깨닫고\r\n'정약전'의 곁을 떠나 세상 밖으로 나가고자 결심하는데...","movieNmEn":"The Book of Fish","repNationCd":"한국","movieType":"장편","moviePrdtStat":"개봉","genre":"사극,드라마","showTm":"126","showTs":"14","watchGradeNm":"12세이상관람가","openDt":"20210331","thumbUrl":"/common/mast/movie/2021/03/thumb/thn_dbb2487fc9cc4566ae9f178eef80a538.jpg","prdtYear":"2019","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"이준익","prNm":"(주)씨네월드","dtNm":"메가박스중앙(주)플러스엠"},{"rownum":5,"saleTotcnt":733,"movieCd":"20207443","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"소울","opendt":"2021-01-20","repgenrenm":"애니메이션","rank":5,"rankInten":2,"rankOldAndNew":"OLD","synop":"나는 어떻게 ‘나’로 태어나게 되었을까?\r\n지구에 오기 전 영혼들이 머무는 ‘태어나기 전 세상’이 있다면?\r\n \r\n뉴욕에서 음악 선생님으로 일하던 ‘조’는\r\n꿈에 그리던 최고의 밴드와 재즈 클럽에서 연주하게 된 그 날,\r\n예기치 못한 사고로 영혼이 되어 ‘태어나기 전 세상’에 떨어진다.\r\n \r\n탄생 전 영혼들이 멘토와 함께 자신의 관심사를 발견하면 지구 통행증을 발급하는 ‘태어나기 전 세상’\r\n‘조’는 그 곳에서 유일하게 지구에 가고 싶어하지 않는 시니컬한 영혼 ‘22’의 멘토가 된다.\r\n \r\n링컨, 간디, 테레사 수녀도 멘토되길 포기한 영혼 ‘22’\r\n꿈의 무대에 서려면 ‘22’의 지구 통행증이 필요한 ‘조’\r\n그는 다시 지구로 돌아가 꿈의 무대에 설 수 있을까?","movieNmEn":"SOUL","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"애니메이션","showTm":"106","showTs":"38","watchGradeNm":"전체관람가","openDt":"20210120","thumbUrl":"/common/mast/movie/2021/01/thumb/thn_9313c9b567fd4b7a9f0736a47683b006.jpg","prdtYear":"2020","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"피트 닥터","prNm":"월트 디즈니 픽쳐스,픽사 애니메이션 스튜디오","dtNm":"월트디즈니컴퍼니코리아 유한책임회사"},{"rownum":6,"saleTotcnt":685,"movieCd":"20216523","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"모탈 컴뱃","opendt":"2021-04-08","repgenrenm":"액션","rank":6,"rankInten":0,"rankOldAndNew":"OLD","synop":"R등급 액션의 신화, 피니시!\r\n\r\n어스렐름과 아웃월드의 최강 챔피언들이 지구의 운명을 걸고 벌이는 서바이벌 대혈전 모탈 컴뱃.\r\nMMA 격투 선수 콜 영은 대전을 앞두고 선택 받은 전사들을 사전에 제거하려는 서브제로의 공격을 받는다.\r\n지구와 가족을 보호하고 자기 혈통의 비밀을 알아내기 위해 모탈 컴뱃 토너먼트에 참가해 죽음의 전투를 치러야 한다!","movieNmEn":"Mortal Kombat","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"액션,어드벤처,판타지","showTm":"109","showTs":"53","watchGradeNm":"청소년관람불가","openDt":"20210408","thumbUrl":"/common/mast/movie/2021/03/thumb/thn_0b5ac113126b47c9958af16fe5e2189b.jpg","prdtYear":"2021","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":null,"prNm":null,"dtNm":"워너브러더스 코리아(주)"},{"rownum":7,"saleTotcnt":454,"movieCd":"20200263","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"라야와 마지막 드래곤","opendt":"2021-03-04","repgenrenm":"애니메이션","rank":7,"rankInten":1,"rankOldAndNew":"OLD","synop":"인간과 드래곤이 평화롭게 공존하던 신비의 땅, 쿠만드라 왕국\r\n살아있는 모든 생명을 삼키는 악의 세력 '드룬'이 들이닥치자,\r\n드래곤들은 인간을 구하기 위해 스스로를 희생하고 전설 속으로 사라진다.\r\n \r\n500년 후 부활한 '드룬'이 또다시 세상을 공포에 빠뜨리자,\r\n전사 ‘라야’는 분열된 쿠만드라를 구하기 위해\r\n전설 속 마지막 드래곤을 찾아 모험을 떠난다. \r\n\r\n그러나, ‘라야’는 험난한 여정을 겪으며 세상을 구하기 위해서는\r\n전설 속 드래곤보다 더 중요한 것이 있다는 것을 깨닫게 되는데…","movieNmEn":"Raya and the Last Dragon","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"애니메이션,액션,어드벤처","showTm":"114","showTs":"6","watchGradeNm":"전체관람가","openDt":"20210304","thumbUrl":"/common/mast/movie/2021/02/thumb/thn_67343ffa8f074831b56e48f1a76d8c8f.jpg","prdtYear":"2020","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"돈 홀,카를로스 로페즈 에스트라다","prNm":null,"dtNm":"월트디즈니컴퍼니코리아 유한책임회사"},{"rownum":8,"saleTotcnt":411,"movieCd":"20184889","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"어벤져스: 엔드게임","opendt":"2019-04-24","repgenrenm":"액션","rank":8,"rankInten":-3,"rankOldAndNew":"OLD","synop":"인피니티 워 이후 절반만 살아남은 지구 \r\n마지막 희망이 된 어벤져스 \r\n먼저 떠난 그들을 위해 모든 것을 걸었다! \r\n\r\n위대한 어벤져스\r\n운명을 바꿀 최후의 전쟁이 펼쳐진다!\r\n","movieNmEn":"Avengers: Endgame","repNationCd":"미국","movieType":"장편","moviePrdtStat":"개봉","genre":"액션,SF","showTm":"180","showTs":"57","watchGradeNm":"12세이상관람가","openDt":"20190424","thumbUrl":"/common/mast/movie/2019/03/thumb/thn_6a30ec36083644b49de1d04ac021949e.jpg","prdtYear":"2018","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"안소니 루소,조 루소","prNm":null,"dtNm":"월트디즈니컴퍼니코리아 유한책임회사"},{"rownum":9,"saleTotcnt":298,"movieCd":"20200065","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"더 파더","opendt":"2021-04-07","repgenrenm":"드라마","rank":9,"rankInten":4,"rankOldAndNew":"OLD","synop":"나는 런던에서 평화롭게 삶을 보내고 있었다.\r\n무료한 일상 속 나를 찾아오는 건 딸 ‘앤’뿐이다.\r\n\r\n그런데 앤이 갑작스럽게 런던을 떠난다고 말한다.\r\n그 순간부터 앤이 내 딸이 아닌 것처럼 느껴졌다.\r\n잠깐, 앤이 내 딸이 맞기는 한 걸까?\r\n\r\n기억이 뒤섞여 갈수록 지금 이 현실과 사랑하는 딸,\r\n그리고 나 자신까지 모든 것이 점점 더 의심스러워진다.","movieNmEn":"The Father","repNationCd":"영국","movieType":"장편","moviePrdtStat":"개봉","genre":"드라마","showTm":"96","showTs":"49","watchGradeNm":"12세이상관람가","openDt":"20210407","thumbUrl":"/common/mast/movie/2021/03/thumb/thn_04e7d3bbc3a54698bb67644d1d9a0e26.jpg","prdtYear":"2020","indieYn":null,"artmovieYn":null,"multmovieYn":"Y","director":"플로리안 젤러","prNm":null,"dtNm":"판씨네마(주)"},{"rownum":10,"saleTotcnt":263,"movieCd":"20217335","salesDate":"20210507","startDate":"2021년 05월 07일(금)","movieNm":"잭 스나이더의 저스티스 리그","opendt":"--","repgenrenm":"액션","rank":10,"rankInten":-1,"rankOldAndNew":"OLD","synop":"기다렸던 감독판, 잭 스나이더의 저스티스 리그\r\n슈퍼맨이 죽고 지구에 어둠의 그림자가 드리운다. ‘마더박스’를 차지하기 위해 빌런 스테픈울프가 파라데몬 군단을 이끌고 지구에 온 것이다.\r\n지구를 지키기 위해 목숨을 바친 슈퍼맨의 희생이 헛되지 않도록 하기 위해 브루스 웨인은 다이애나 프린스와 적에 맞서기로 한다. 배트맨과 원더 우먼은 새로이 등장한 위협에 맞서 싸우기 위해 특별한 능력을 가진 메타휴먼, 아쿠아맨과 사이보그, 플래시를 찾아가 설득하여 힘을 합친다.\r\n드디어 한 팀이 된 저스티스 리그. 혹시 스테픈울프와 데사드 그리고 다크사이드를 물리치기에 너무 늦어버린 것이 아닐까?","movieNmEn":"Zack Snyder's Justice League","repNationCd":"미국","movieType":"장편","moviePrdtStat":"기타","genre":"액션,SF","showTm":"241","showTs":"49","watchGradeNm":"12세이상관람가","openDt":null,"thumbUrl":null,"prdtYear":"2021","indieYn":null,"artmovieYn":null,"multmovieYn":null,"director":"잭 스나이더","prNm":null,"dtNm":"워너브러더스 코리아(주)"}]
},
// 사용자 정의 메소드 설정
methods:{
click(m){
this.title=m;
}
}
})
</script>또 다른 예제
mounted에 값을 올려주기 위해서 JSON 형태로 데이터를 가져와서 mounted() 메소드에 넣어줬다.
버튼을 누르면 위의 제목이 바뀌고 있다 (데이터 내용은 아직 안바뀐다)
<button class="btn btn-sm btn-primary" v-on:click="click('박스오피스')">박스오피스</button>
<button class="btn btn-sm btn-danger" v-on:click="click('실시간 예매율')">실시간 예매율</button>
<button class="btn btn-sm btn-success" v-on:click="click('좌석 점유율')">좌석 점유율</button>
<button class="btn btn-sm btn-info" v-on:click="click('온라인 이용순위')">온라인 이용순위</button>클릭하면 바로 바뀌도록 v-on:click 함수를 써줬다.
methods:{
click(m){
this.title=m;
}
}<h1 class="text-center">{{title}}</h1>
이 자리가 바뀌고 있다.
이제 이번주 내내 VueJS를 배워서 프로젝트에 어떻게 적용할 수 있을지 고민을 해봐야겠다.
728x90
반응형
'programming > Gukbi' 카테고리의 다른 글
| 국비 교육 97일차 - python (0) | 2021.05.18 |
|---|---|
| 국비 교육 95일차 - vue 활용 검색페이지 만들기 (0) | 2021.05.14 |
| 국비 교육 92일차 - validation (0) | 2021.05.07 |
| 국비 교육 91일차 - 검색 기능 완성 (0) | 2021.05.07 |
| 국비 교육 89일차 - 차세대 개발, java로만 spring 개발하기 (0) | 2021.05.03 |
