[Vue.js | Vue 3] Vue.js CDN으로 시작하기

[Vue.js | Vue 3] Vue.js CDN으로 시작하기

 

이전 글

2022.05.25 - [JS & Framework/vue.js] - [Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN)

 

 

Vue.js를 CDN으로 시작할 수 있습니다. Vue.js 라이브러리 링크를 걸어서 개발하는 것이죠.

<!-- Vue.js Library Linking -->
<script src="https://unpkg.com/vue@3"></script>

 

다음은 Vue.js를 CDN으로 처음 시작할 수 있는 가장 간단한 코드입니다.

<!-- index.html -->

<script src="https://unpkg.com/vue@3"></script>

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

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

위 코드 샘플은 모든 API가 전역 Vue 변수 아래에 노출되는 Vue의 전역 빌드를 사용합니다. ref API 사용하려고 한다면 다음과 같이 사용할 수 있습니다. 

const { createApp, ref } = Vue

 

그리고 위 코드를 실행하면 화면에 'hello Vue!'가 나타나 있을 거예요.

 

반응형

 

Vue에 버튼과 메서드를 추가하고, 버튼 클릭 시 'Hello Vue Method!'라는 텍스트로 변경되도록 코드를 작성합니다.

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}
  <button @click="change">change</button>
</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }, 
    methods: {
      change : function() {
        this.message = 'Hello Vue Method!'
      }
    },
  }).mount('#app')
</script>

 

 

버튼을 클릭하면 Vue 문법에 의해 메서드에 등록된 change 함수가 실행되어 현재 화면에 보이는 'Hello Vue!' 텍스트를 변경하여 'Hello Vue Method!'라는 텍스트로 변경된 것을 볼 수 있습니다.

---

오늘은 [ Vue.js | Vue 3 ] CDN으로 시작하는 방법에 대해서 알아보았습니다.

 

 

도움이 되셨다면 좋아요♡

광고 한 번 클릭해주시면,

제게 큰 힘이 됩니다! : )