개발하는 햄팡이

[Web입문] Vue.js 시작하기 본문

Front-End/Vue

[Web입문] Vue.js 시작하기

hampangee 2024. 4. 30. 15:54

https://v2.ko.vuejs.org/v2/guide

Vue.js란?


사용자 인터페이스를 만들기 위한 JavaScript 프레임워크.
Vue는 기존 기술 스택과 함께 사용할 수 있도록 개발되어 기존 프로젝트에 점진적으로 도입하고 기존 코드와의 호환성을 유지하면서 새로운 기능을 추가할 수 있어 전체 코드를 대규모로 변경하지 않고도 Vue를 사용할 수 있게 한다.

Vue의 장점

  1. 쉬운 학습 및 간편한 문법 : Vue는 직관적이고 간결한 문법을 가지고 있거 쉽게 배우고 사용할 수 있다.
  2. 반응성 시스템 : 데이터의 변경에 따라 자동으로 화면이 업데이트되는 반응성 시스템을 제공
  3. 모듈화 및 유연한 구조 : 컴포넌트 기반 아키텍처를 채택하여 어플리케이션을 작은 조각으로 나눌 수 있어 코드의 재사용성을 높이고 유지보수를 용이하게 한다.
  4. 간결하고 직관적인 문법 : React나 Angular에 비해 Vue는 더 간결하고 직관적인 문법을 사용한다.
  5. 커뮤니티 : 활발한 커뮤니티를 가지고 있어 문서, 튜토리얼, 예제 및 최신 업데이트 및 트렌드 리소스를 공유받을 수 있다.

 

Vue의 두가지 핵심 기능

  1. 선언적 렌더링 (Declarative Rendering) : 표준 HTML을 템플릿 문법으로 확장하여 JavaScript상태를 기반으로 화면에 출력될  HTML을 선언적으로 작성
  2. 반응성(Reactivity) : JavaScript 상태변경을 추적하고 변경이 발생하면 DOM 업데이트를 자동으로 수행

 

 

Vue 시작하기 (CDN 방식)

1. body에 cdn추가

<!-- 1. vue cdn-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

 

 

2. HTML 구조 설정

Vue앱이 마운트 되는 곳을 생성.

<div id="app">
	<h2>{{ message }}</h2>
</div>

 

3. Vue 앱 인스턴스 생성

const { createApp, ref } = Vue

 

4. app.mount() 함수

앱 인스턴스는 .mount() 메서드가 호출되기전에는 아무것도 렌더링 하지 않는다. 컨테이너가 될 실제 DOM엘리먼트 또는 셀렉터 문자열을 필요로함. 아래 예시에서는 div id를 app으로 하여 mount()함수의 파라미터로 '#app' 을 전달.

<!-- 1. vue cdn-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
</div>

<script>
    const {createApp, ref} = Vue

    const app = createApp({})

    app.mount('#app')
</script>

 

5. setup() 함수 설정

'setup()' 함수 내에 Vue컴포넌트의 초기 설정을 수행. setup함수는 Vue3의 Composition API에서 도입된 것으로 컴포넌트의 상태 및 동작을 설정하는 역할을 한다.

const {createApp, ref} = Vue

const app = createApp({
    setup() {
      const message = ref('Hello, Vue')
      return {
        message
      }
    }
})

app.mount('#app')

 

6. 데이터와 템플릿 바인딩

return문에서 message변수를 반환하여 데이터와 템플릿을 연결한다. body의 div태그에서 mustache(콧수염처럼 생겼다고 해서 콧수염 문법이다....)문법을 사용하여 HTML에 데이터를 렌더링한다.

<body>
  <!-- 1. vue cdn-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <!-- mustache문법 적용 -->
  <div id="app">
    <h2>{{ message }}</h2>
  </div>
  
  <script>
  const {createApp, ref} = Vue

  const app = createApp({
    setup() {
      const message = ref('Hello, Vue')
      return {
        message
      }
    }
  })
  app.mount('#app')
  </script>
</body>

 

 

활용하기. 이벤트 핸들러

Vue3의 이벤트 리스너를 활용하여 반응형 변수를 실시간으로 렌더링할 수 있다.

<body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="app">
    <h1>User Profile</h1>
    <p>Name: {{user.name}}</p>
    <p>Age: {{user.age}}</p>
    <button @click="changeName">Change Name</button>
    <button @click="changeAge">Change Age</button>
  </div>

  <script>
    const { createApp, ref } = Vue

    const app = createApp({
      setup() {
        const user = ref({
          name: 'Alice',
          age: 30
        })

        const changeName = function() {
          user.value.name = prompt('Enter new name : ')
        }

        const changeAge = function() {
          user.value.age = prompt('Enter new Age : ')
        }

        return { user, changeName, changeAge }
      }
    })
    app.mount('#app')
  </script>
</body>