> For the complete documentation index, see [llms.txt](https://hgy5710.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hgy5710.gitbook.io/vue/master.md).

# vue

https\://kr.vuejs.org/v2/guide/

## vue설치

```
npm i -g @vue/cli
```

```
vue create 파일명

Manually select features
```

![](https://2434360750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MOZu0IOsIxKXU3PEf_U%2F-MOZvWhM6qOdMJGPUgMI%2F-MO_0jZ63Ln-aapGdHjg%2Fimage.png?alt=media\&token=ac4c2c08-0afa-4926-9325-db4134b4b73a)

![](https://2434360750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MOZu0IOsIxKXU3PEf_U%2F-MO_5HyGQsp5PYwnD7_w%2F-MO_6Zb5yE_g4gJcA4rb%2Fimage.png?alt=media\&token=88753b22-a26a-498b-af4f-31722d69fa01)

### 뷰설치중...

![](https://2434360750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MOZu0IOsIxKXU3PEf_U%2F-MO_1G1NDvOMMOYbJisN%2F-MO_5DMLpJR3DUPGBV17%2Fimage.png?alt=media\&token=ba73b908-7b39-4628-a7c4-4ede480724a1)

![설치 완료](https://2434360750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MOZu0IOsIxKXU3PEf_U%2F-MO_5HyGQsp5PYwnD7_w%2F-MO_7-D1JwMIPLilXG0h%2Fimage.png?alt=media\&token=bc613b78-6fcb-4a4e-bb8e-477b5f18aae1)

### 뷰 열기

```
npm run serve
```

![ctrl 누르고 "Local" click](https://2434360750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MOZu0IOsIxKXU3PEf_U%2F-MO_75uRp7IpoKIZ2w4b%2F-MO_86cjml7L0-g5BLrw%2Fimage.png?alt=media\&token=aad0bffa-4058-4629-9141-3c3c400a5b25)

### vuetify

```
vue vuetify
```

![vue vuetify](https://2434360750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MOZu0IOsIxKXU3PEf_U%2F-MP7aKC5Nl1kjw8Ohk1P%2F-MP85LpF8-cFapZNT7Hn%2Fimage.png?alt=media\&token=2fd7eb42-326e-4f28-acd5-a72c63239975)

## vue router

## 선언적 렌더

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.

```markup
<template>
  <div id="wrap">
    <main id="main">
      <section id="mainCont">
        <div class="mainCont">
            <div>{{ msg }}</div>
            <div>{{ msg }}</div>
            <div>{{ msg }}</div>
            <div>{{ msg }}</div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'WE PROVIDE'
    }
  }
}
</script>
```

## 조건문

```markup
<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

//이제 나를 볼 수 있어요
```

## 반복문

```markup
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})
```

## 컴포넌트

#### 전역 등록 <a href="#undefined" id="undefined"></a>

이전 섹션에서 다음을 사용하여 새 Vue 인스턴스를 만들 수 있음을 알게 되었습니다.