> 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

## vue설치

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

```
vue create 파일명

Manually select features
```

![](/files/-MO_0jZ63Ln-aapGdHjg)

![](/files/-MO_6Zb5yE_g4gJcA4rb)

### 뷰설치중...

![](/files/-MO_5DMLpJR3DUPGBV17)

![설치 완료](/files/-MO_7-D1JwMIPLilXG0h)

### 뷰 열기

```
npm run serve
```

![ctrl 누르고 "Local" click](/files/-MO_86cjml7L0-g5BLrw)

### vuetify

```
vue vuetify
```

![vue vuetify](/files/-MP85LpF8-cFapZNT7Hn)

## 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 인스턴스를 만들 수 있음을 알게 되었습니다.