싱글파일컴포넌트 2

Vue.js 시작하기 11. 싱글컴포넌트 사용하여 개발 시작하기

App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자. 기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다. 코드를 통해 알아보자 {{str}} #1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 , 그 안에 header던, body던 생성을 해줘야 한다. #2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식 #3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다. 그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다. #싱글파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트를 등..

Study/Vue 2022.01.22

Vue.js 시작하기 10. Vue CLI

Vue CLI 를 사용하기 위해서 https://cli.vuejs.org/guide/installation.html 에 접속해서 명령어를 확인하고, 비주얼 스튜디오 코드에서 터미널을 열어 해당 명령어들을 실행해준다. npm install -g @vue/cli # OR yarn global add @vue/cli 뷰 버전이 4가 넘어가면 defaule( ver2) 로 설정해주어야 한다. 🎉 Successfully created project vue-cli. 👉 Get started with the following commands: $ cd vue-cli $ npm run serve gayoung@yungayeong-ui-MacBookAir learn-vue-js-master % cd vue-cli gay..

Study/Vue 2022.01.22