1. vue.js 인스턴스, 데이터와 메소드 생성하기
안녕하세요~!
오늘은 드디어! 환경설정을 마치고
vue.js입문강의를 보며 기초 다지기를 시작하려 합니다!
그럼 시작해 볼까요?
설명 전에 어떤 강의를 보고 따라 했는지 링크 첨부해 드리겠습니다!
저는 유튜브-코지코더 강의를 보고 따라 하였습니다.
https://www.youtube.com/@kossiecoder/featured
코지 코더 Kossie Coder
호주에서 웹개발자로 일하고 있는 코지 코더의 채널입니다! 실용적인 개발 영상들로 처음 코딩을 접하시는 분들이 따라하시고 기본을 익힐수 있는 영상들을 만들고 있습니다. 감사합니다 ^^
www.youtube.com
1. 파일 생성하기.
2. 빌드 및 열기
파일을 생성한 후!+Tab을 누르면 저렇게 html 틀이 나옵니다!
틀이 나오면 title명을 자유롭게 바꿔줍니다.
그리고 script 부분에 빌더를 추가해 줍니다.
이건 vuejs 가이드 홈페이지 > 설치방법 > #CDN
부분에 연습용 빌더 script를 복사해서 붙여 넣어줍니다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
그리고 body 부분에 <div> 추가해준 후 '헬로 월드'를 입력해 줍니다.
어떻게 뜨는지 확인해 볼까요??
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
v2.ko.vuejs.org
프로젝트 파일에서 방금 만든 index파일을 실행시켜 줍니다.
실행하게 되면 다음과 같이 title과 body 부분에 우리가 작성한
문구를 보실 수 있습니다.
이렇게 빌드는 성공적으로 되었습니다.
본격적으로 인스턴스와 메서드를 작성하고 사용하는 방법에 대해 알아보도록 하겠습니다.
3. vue 인스턴스 생성하기.
<script></script>를 하나 만들어주고
그 안에 new Vue({}) 인스턴스를 만들어 줍니다.
el: '#app'은 id값을 매핑시켜 주는 역할로 상단에 div의 id값(app)과 일치합니다.
가져다 쓸 data로 name값을 하나 만들어 준 후
div에서 가져다 쓸 때에는 {{ }} 괄호 속에 데이터 명(name)을 넣어줍니다.
이렇게 인스턴스를 생성하여 화면에 찍어줄 수 있습니다.
4. 메서드 생성하기
vue 인스턴스 안에methods:{}를 하나 만들어 줍니다.
nextYear라는 함수를 하나 만들어서 data를 가져다 사용하실 수 있습니다.
함수를 작성할 때에는 nextYear : function(){} 으로 작성하셔도 되고,
nextYear(){} 이렇게 function은 생략하여 간략하게 사용하셔도 됩니다.
return 값으로 this.name , this.age 로 data를 가져다 사용하실 수 있습니다.
메서드를 사용하실때는 상단과 같이 {{ }} 안에
nextYear() 이렇게 괄호를 붙여 메소드를 선언해줍니다.
5. 공통 요소 데이터를 object로 묶어주기
각자의 데이터인 name과 age는 한 사람의 정보입니다.
이처럼 정보를 묶고자 할때 객체를 하나 만들어줍니다.
person:{} 이라는 오브젝트를 만들어 그안에 name과 age를 담아줍니다.
사용하실때에는 person.name , person.age로 사용하고
메소드에서 사용할 때에는 동일하게 this.person.name , this.person.age로
사용하시면 됩니다.
오늘은 vue 빌더하고, 인스턴스와 객체, 메서드를 사용하는 방법을 알아보았습니다.
질문은 댓글로 남겨주세요~!!
감사합니다.
