Vue CLI 없이 Vue.js 애플리케이션을 개발하는 방법

최근에는 매우 인기 있는 JavaScript 라이브러리인 Vue.js가 단일 페이지 애플리케이션(SPA) 개발에 널리 사용되었습니다. Vue.js의 장점은 간단한 API, 사용 용이성 및 유연한 옵션입니다. 하지만 Vue.js를 사용하여 SPA를 구축하려면 Vue CLI가 필수 선택이 된 것 같습니다. 하지만 실제로 개발을 위해 반드시 Vue CLI를 사용할 필요는 없습니다. 이번 글에서는 Vue CLI 없이 Vue.js 애플리케이션을 개발하는 방법을 소개하겠습니다.

1. 전제 조건

Vue.js로 애플리케이션을 구축하기 전에 다음을 마스터할 수 있어야 합니다:

1. HTML, CSS, JavaScript 기본.
2. Vue.js 기본.

2. 개발 시작

1. 참조 Vue.js

응용 프로그램에서 CDN을 사용하여 Vue.js를 참조하거나 Vue.js를 다운로드한 다음 HTML에서 참조할 수 있습니다.

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

2. Create Vue 인스턴스

Vue.js를 사용하려면 먼저 Vue 인스턴스를 만들어야 합니다. 이 예에서는 데모 "hello-world" 애플리케이션을 생성합니다.

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

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, World!'
    }
  })
</script>

(1)el

"el" 옵션은 필수이며 Vue 인스턴스가 마운트할 HTML 요소를 지정하는 데 사용됩니다.

(2)data

"data" 옵션은 선택 사항이며 Vue 인스턴스의 초기 데이터를 지정하는 데 사용됩니다.

3. 계산된 속성

Vue.js에서 계산된 속성은 결과가 다른 데이터를 기반으로 계산되는 속성을 선언하기 위한 코드 솔루션입니다. 계산된 속성의 장점은 의존하는 데이터가 변경될 때 자동으로 업데이트된다는 것입니다. 아래는 계산된 속성을 사용한 예입니다.

<div id="app">
  <p>{{ fullName }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

4. Listeners

Vue.js에서는 감시자를 사용하여 특정 속성을 모니터링하고 값이 변경될 때 일부 작업을 수행할 수 있습니다. 아래는 리스너를 사용하는 예입니다.

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment()">Increment</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment: function () {
        this.count++
      }
    },
    watch: {
      count: function (value) {
        console.log(value)
      }
    }
  })
</script>

이 예에서는 카운터를 만들고 값이 변경되면 감시자를 통해 콘솔에 인쇄합니다.

5. Components

Components는 Vue.js의 가장 중요한 개념 중 하나입니다. 이를 통해 사용자는 페이지를 재사용 가능한 작은 부분으로 나누고 코드를 더 쉽게 구성하고 유지 관리할 수 있습니다. Vue.js에서는 Vue.extend() 메서드를 통해 구성 요소가 생성됩니다.

<div id="app">
  <todo-item></todo-item>
</div>

<script>
  var todoItem = Vue.extend({
    template: '<p>Learn Vue.js</p>'
  })

  new Vue({
    el: '#app',
    components: {
      'todo-item': todoItem
    }
  })
</script>

이 예에서는 "todo-item"이라는 구성 요소를 만든 다음 이를 Vue 인스턴스에 등록하고 템플릿에서 사용합니다.

3. 요약

이번 글에서는 Vue CLI를 사용하지 않고 Vue.js를 사용하여 SPA를 만드는 방법을 소개했습니다. 이 목표를 달성하려면 HTML, CSS, JavaScript 기본 및 Vue.js 기본과 같은 지식 포인트가 필요합니다. 다음으로, "hello-world" 애플리케이션을 만들고, 계산된 속성, 리스너 및 사용된 구성 요소를 사용하여 애플리케이션을 개발하여 애플리케이션을 재사용 가능한 작은 부분으로 나눴습니다. Vue CLI는 매우 편리한 도구이지만 Vue.js 자체는 Vue CLI를 사용하지 않고도 유연하고 사용하기 쉽습니다.

위 내용은 Vue CLI 없이 Vue.js 애플리케이션을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!