tutorials,

Vue.js CDN으로 시작하기

FreeVue FreeVue Follow Apr 15, 2019 · 3 mins read
Vue.js CDN으로 시작하기
Share this

앞으로 Vue에 관하여 소개를 해볼 생각입니다. cdn으로 이용하는 방법에서 vuex까지 소개를 해볼 생각입니다. 이 포스팅들을 읽기 전에 ES6에 대한 기본적인 지식이 필요합니다. 그리고 html과 css의 기본적인 지식도 필요로 합니다.

먼저 cdn으로 Vue를 활용하는 방법을 알아보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>CDN 이용하기</title>

    <!-- Vue CDN 링크. -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>

  <body>
    <h1>CDN을 이용하여 페이지를 그립니다.</h1>

    <!-- Vue를 이용하여 message를 받을 #app 태그. -->
    <div id="app">{{ message }}</div>

    <script>
      /* Vue를 선언 후 #app에 그려줄 message 작성. */
      var App = new Vue({
        el: '#app',
        data: {
          message: 'Hello World',
        },
      })
    </script>
  </body>
</html>

이런 식으로 cdn을 사용하면은 html 문법을 활용하는 곳에서 언제든지 사용할 수 있습니다. (제이쿼리를 이용하듯…)

위 코드로 작성을 하면 아래와 같은 결과를 얻을 수 있습니다.

결과 이미지 1

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

를 이용하여 Vue.js 파일을 불러옵니다. 그리고

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

Element를 지정해줄 id를 가진 태그를 만듭니다.

var App = new Vue({
  el: '#app',
  data: {
    message: 'Hello World',
  },
})

그리고 Vue의 el : ‘#app’부분을 이용해서 Element를 지정해줍니다.

data에는 위 ‘<div id="app">‘태그안에 있는 {{ message }}에 담을 내용을 추가하는데 콧수염 표현식 또는 보간법이라 불리는 {{ … }} 이 안에 있는 객체와 data안에 있는 객체의 이름이 같아야 합니다.

조금 더 응용을 하면은

var model = 'Hello World'

var App = new Vue({
  el: '#app',
  data: {
    message: model,
  },
})

이렇게 작성을 하면 data관리를 조금 더 쉽게 할 수 있습니다.

여기서 조금 더 테스트를 해보겠습니다.

var model = '<h3>Hello World</h3>'

var App = new Vue({
  el: '#app',
  data: {
    message: model,
  },
})

결과 이미지 2

이미지처럼 태그가 문자로 들어갑니다. 만약 태그로 한번 더 감싸고 싶으면

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

이렇게 부분을 원하시는 태그로 한번 더 감싸면 원하는 결과가 나옵니다.

결과 이미지 3

또 다르게 응용을 해보겠습니다.

var model1 = 'Hello World'
var model2 = '오늘은 여기까지'

var App = new Vue({
  el: '#app',
  data: {
    message1: model1,
    message2: model2,
  },
})

이렇게 data에 model을 하나 더 만들어서 추가하고

<div id="app">
  <h3>{{ message1 }}</h3>
  <p>{{ message2 }}</p>
</div>

‘<div id="app">‘에 message를 받아오는 부분을 ‘<p>‘태그를 이용하여 추가했습니다.

결과 이미지 4

이런 식으로 응용할 수 있습니다.

최종 코드입니다.

<h1>CDN을 이용하여 페이지를 그립니다.</h1>
<div id="app">
  <h3>{{ message1 }}</h3>
  <p>{{ message2 }}</p>
</div>

<script>
  var model1 = 'Hello World'
  var model2 = '오늘은 여기까지'

  var App = new Vue({
    el: '#app',
    data: {
      message1: model1,
      message2: model2,
    },
  })
</script>
vue.js javascript