VueJS 기초

저는 최근에 VueJS에 대해 조금 배우기 시작했습니다. 다른 사람들이 Vue를 시작하는 데 도움을 주고 제 이해를 확고히 하기 위해 제가 배운 것을 공유하고 싶습니다. 이 튜토리얼은 HTML, CSS 및 JavaScript에 익숙하다고 가정합니다. 또한 live-server과 같은 일종의 로컬 개발 서버가 필요하므로 더 이상 고민하지 않고 시작하겠습니다.

프로젝트 설정



선택한 프로젝트 디렉터리로 이동하여 다음 콘텐츠로 index.html 및 app.js 파일 2개를 만듭니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import VueJS from CDN. In a production app, we wouldn't do 
    it this way. Instead, we would download the libraries locally or 
    use vue-cli -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      body {
        width: 80%;
        margin: auto;
      }
    </style>
    <title>Vue Basics</title>
  </head>

  <body>
    <!-- This will be our "root" element for Vue
    Everything that we do with Vue will be rendered inside
    this tag. 
     -->
    <div id="app">
      <!-- In app.js, we are giving the Vue engine a data object. 
      One of the properties of this object is :title. The following 
      line tells the Vue engine to output that value -->
      <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
  </body>
</html>



// app.js

// Here we are initializing the Vue engine, telling it where 
// we want to render, and giving it some data
new Vue({
  // the "el" property tells the Vue engine where in the DOM we 
  //want to render our content. Below, we are telling Vue to use 
  // the element with id=app
  el: "#app",
  // The "data" property is where we give the Vue engine our data. 
  // In this case, we're giving a title
  data: {
    title: "Welcome to Vue!"
  }
});

이제 개발자 서버를 시작하고 브라우저에서 적절한 URL로 이동합니다. 라이브 서버는 http://localhost:5500/ 에서 시작해야 합니다. 코드의 주석이 지금까지 무슨 일이 일어나고 있는지 충분히 보여주기를 바랍니다. HTML에서 이중 괄호{{}}를 사용하면 Vue 인스턴스의 데이터에 액세스할 수 있습니다. 이제 조금 더 흥미로운 것을 해보자.

사용자 정의 방법



Vue 엔진이 사용할 커스텀 메소드를 생성할 수 있습니다. 이제 실제로 실행해 보겠습니다. app.js에서 아래와 같이 다른 데이터 속성과 메서드를 추가해 보겠습니다.

new Vue({
  el: "#app",
  data: {
    title: "Welcome to Vue!",
    name: "Big Boss"
  },

  methods: {
    greet() {
      return `Hello ${this.name}`;
    }
  }
});

이제 다음과 같이 View에서 메서드를 사용하겠습니다.

<!-- For brevity I'm only showing the "root" element where Vue is 
rendering -->
<div id="app">
  <h1>{{ title }}</h1>
  <h2>{{ greet() }}</h2>
</div>

다시 말하지만, 이중 괄호 안의 Vue 인스턴스에서 메서드를 호출할 수 있습니다. 브라우저에서 페이지에 렌더링된 "Hello Big Boss"가 표시되어야 합니다. 이제 간단한 데이터 바인딩을 확인해보자.

v-bind를 사용한 데이터 바인딩



데이터 바인딩을 사용하면 뷰 요소를 모델 속성에 바인딩하여 모델이 업데이트될 때 뷰가 자동으로 업데이트되도록 할 수 있습니다. 이것은 모델에서 보기로의 단방향 바인딩입니다. 우리는 곧 양방향 바인딩을 확인할 것입니다. 지금은 요소의 클래스 속성을 모델 속성에 바인딩하는 간단한 단방향 바인딩을 수행해 보겠습니다. 우리는 이것을 v-bind 지시어로 합니다. app.js에서 아래와 같이 데이터 객체를 업데이트합니다.

// app.js
data: {
    title: 'Welcome to Vue!',
    name: 'Big Boss',
    my_cool_class: 'cool'
}

index.html에서 기존 코드 아래(여전히 "app"div 안에 있음)에서 h1 태그를 만들고 해당 클래스를 "my_cool_class"속성에 바인딩합니다.

<!-- Data-binding -->
<!-- Bind our class attribute to a model property -->
<h1 v-bind:class="my_cool_class">Hi there {{ name }}</h1>

인라인 CSS에서 .cool이라는 클래스 선택기를 추가하고 원하는 대로 스타일을 지정하여 우리가 수행한 작업의 효과를 볼 수 있습니다. 렌더링된 후 DOM에서 위의 h1 요소를 검사하면 "멋진"클래스가 있음을 알 수 있습니다. 참고 사항: v-bind 지시문에 대한 약식 구문을 사용할 수 있습니다. 이것은 다음과 같이 바인딩하려는 속성이 뒤에 오는 것입니다.

<!-- Data-binding (shorthand) -->
<h1 :class="my_cool_class">Hi there {{ name }}</h1>

양방향 바인딩



좋아, 그래서 꽤 멋졌다. 뷰 속성을 데이터 속성에 바인딩할 수 있었지만 단방향이었습니다. 이제 v-model 지시문을 사용하여 name 속성에 양방향 바인딩을 수행해 보겠습니다. index.html에서 앱 div에 다음을 추가합니다.

<!-- Two-way binding with v-model -->
<input type="text" v-model:value="name" />

브라우저에서 볼 때 입력 상자에 이미 "Big Boss"값이 포함되어 있어야 합니다. 이 값을 변경하면 이전 h1 태그의 값도 업데이트된 것을 볼 수 있습니다. 얼마나 멋진데요?! 정답은 아주 멋집니다. v-model 지시문은 Vue가 특정 속성에 바인딩하고 뷰에서 변경할 때 해당 속성을 업데이트하도록 지시합니다. 나는 당신이 이것으로 더 실험하기를 권장합니다. 내부 CSS에 다른 스타일 선택기를 만들고 my_cool_class에 양방향 바인딩을 사용하여 놀 수 있습니다.

결론



이 게시물에서는 VueJS를 사용하는 매우 기본적인 사항을 살펴보았습니다. 나는 이 시리즈를 계속해서 다음과 같은 최소한의 기본적인 것들을 다룰 계획입니다.
  • 이벤트 처리
  • 조건부 렌더링
  • 루핑

  • 그리고 아마도 더 많은 것을 지켜봐 주시기 바랍니다. 이것이 도움이 되었기를 바라며 의견/비판/요청은 항상 환영합니다!

    Github repo

    좋은 웹페이지 즐겨찾기