Meme's IT

[Vue] Vue의 기본 구조 본문

FrontEnd/Vue

[Vue] Vue의 기본 구조

Memez 2023. 11. 1. 11:50

우선 한번 냅다 따라 쳐보자

공식문서 참조

<body>
  <div id="app">
    <h1>{{ greeting }}</h1>
    <button @click="count++">누른 횟수: {{ count }}</button>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    const app = createApp({ 
      setup() {   // 단축 메서드
        const count = ref(0)
        const greeting = ref('Hello')
        return {
          count,  // 단축속성(key = value)
          greeting
        }
      }
    })

    app.mount('#app')

  </script>
</body>

중간중간 나오는 특이한 문법들은 밑의 글 참고

2023.10.25 - [JavaScript] - [JS] Object(객체)

 

 

# Vue의 핵심 기능

1. 선언적 렌더링

 HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JavaScript 데이터를 기반으로 어떻게 보이는지 설명할 수 있음

2. 반응형

 JavaScript 상태 변경 사항을 자동으로 추적하고, 변경사항이 발생할 때 DOM을 효율적으로 업데이트

 

 

 

# Vue를 사용하는 방법

1. CDN 방식

2. NPM 설치 방식

→ 우선은 CDN 방식으로 진행해 보자

 

 

# Vue의 기본 구조

1. CDN 가져오고 Application instance 작성하기

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } = Vue
    const app = createApp({})
</script>

 

  • const { createApp } = Vue : 파이썬의 import처럼 Vue에서 쓰는 함수들을 이곳에 가져와서 쓴다
  • const app = createApp({}) : 모든 Vue 애플리케이션은 createApp 함수로 새로운 Application instace를 생성하는 것으로 시작된다.

 

2. App안에 setup함수 + return 만들기

const app = createApp({
  setup() {
    const message = ref('Hello Vue!') //반응형 참조, 변수
    return {
      message
    }
  }
})

return은 꼭 객체를 반환해야 함!

 

⭐ ref 함수

반응형 상태(데이터)를 선언하는 함수

인자를 받아 .value 속성이 있는 ref 객체로 wrapping하여 반환

setup 내에서 ref 안의 변수값을 변경하고 싶다면 꼭 .value를 이용해서 접근해야한다

하지만 HTML상(템플릿)에서 쓸때는 {{ message }} 이런형식으로 사용함(.value 필요없음)

const {createApp, ref} = Vue

const app = createApp({
  setup() {
    const message = ref('Hello Vue!')
    console.log(message)    // ref 객체
    console.log(message.value)    // Hello Vue!
    return {
      message
    }
  }
})

추가적으로

더보기

반응형 변수와 일반 변수를 따로 설정해서 확인하면

ref로 묶어준 반응형 변수는 클릭함에 따라 같이 올라가지만, 

일반변수는 올라가긴하지만 화면에 실시간 반영이 안되는 것을 확인할 수 있음

<body>
  <div id="app">
    <p>반응성 변수: {{ reactiveValue }}</p>
    <p>일반 변수: {{ normalValue }}</p>
    <button @click="increment">값 업데이트</button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const {createApp, ref} = Vue
    const app= createApp({
      setup() {
        const reactiveValue = ref(0)
        let normalValue = 0
        const increment = function() {
          reactiveValue.value++
          normalValue++
        }
        return {
          reactiveValue,
          normalValue,
          increment
        }
      }
    })
    app.mount('#app')
  </script>
</body>

 

3. 템플릿 렌더링

<div id="app">
  <p>{{message}}</p>
</div>
  • 아까 setup에서 return한 반환된 객체의 속성은 템플릿에서 사용할 수 있음
  • Mustache syntax(콧수염 구문, {{ 이렇게 생긴거 }})를 사용하여 가져옴
  • 식별자나 경로만 쓸 수 있는게 아니라, 유효한 JavaScript 표현식을 사용 가능
<h1>{{ message.split('').reverse().join('') }}</h1>

 

# Vue에서 Event Listener 사용하기

'v-on' directive를 사용해서 DOM 이벤트를 수신할 수 있다

함수 내에서 refs를 변경해서 업데이트 가능!

<div id="app">
  <button v-on:click="increment">{{count}}</button>		// v-on 사용
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
      setup() {
        const count = ref(0)
        const increment = function() {	// 함수 넣는거 가능
          count.value ++
        }
        return {
          count,
          increment
        }  
      }       
    })
    app.mount('#app')
</script>

 

저작자표시 비영리

'FrontEnd > Vue' 카테고리의 다른 글

[Vue] v-on  (0) 2023.11.02
[Vue] v-bind (Attribute, Class, Style)  (0) 2023.11.02
[Vue] Directive  (0) 2023.11.02
[Vue] Template Syntax  (0) 2023.11.02
[Vue] Front-end 사전지식  (0) 2023.11.01
'FrontEnd/Vue' Related Articles more