[Vue.js] 기초 - 설치/Vscode extension/Data binding

Latest update : 2021.04.19 - 수정 완료

---

Vue.js

vue 3 버전 기준

---

<Vue.js 설치>

• Node.js 설치 (nodejs.org/ko/download/)
• 작업할 폴더에서 npm install -g @vue/cli (or) yarn global add @vue/cli
• (vscode 기준) 에디터 확장 기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
• npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)
• vue create 프로젝트명 -> Default (Vue 3 Preview).. 선택 후 엔터

 

npm install -g @vue/cli

(or)

yarn global add @vue/cli

(and)

// (vscode 기준) 에디터 확장기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
// npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)

vue create 프로젝트명

(and)

Default (Vue 3 Preview).. 선택 후 엔터

설치 완료 후 App.vue에서 작업 진행합니다.

 

---

<Vue.js 구성>

1. <template></template>

HTML을 짭니다.

 

2. <script></script>

JS를 짭니다.

 

3. <style></style>

CSS를 짭니다.

 

tip) 터미널에 npm run serve를 입력하면 미리보기가 가능합니다.

 

 

폴더 or 파일	설명
node_modules (폴더)	프로젝트에서 사용하는 라이브러리 모음입니다. (자동 설치됩니다.)
src (폴더)	소스코드를 담는 폴더입니다.
public (폴더)	html, img 등 컴파일이 필요없는 파일을 담습니다.
package.json (파일)	설치된 라이브러리 버젼 정보, 프로젝트 설정 내역 등이 기록됩니다.

 

 

데이터 바인딩 예시

<template>

  <div>
    ...
    <p :style="mystyle">{{ data1 }}</p>
    // {{ }} => 수정 시 자동렌더링되는 데이터
    // :속성="데이터이름" 으로 바인딩 가능
  </div>
  
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관
      data1 : 1,
      mystyle : 'color: black', // html에 적용 가능
    }
  },
  components: {
  }
}

</script>