Vue CLI を使用せずに Vue.js アプリケーションを開発する方法

近年、Vue.js は非常に人気のある JavaScript ライブラリとして、シングルページ アプリケーション (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. 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. Listener

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. コンポーネント

コンポーネントは Vue.js の最も重要な概念の 1 つです。これにより、ユーザーはページを再利用可能な小さな部分に分割し、コードを整理しやすくなります。そして維持します。 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 を使わずに SPA を開発することも可能です。

以上がVue CLI を使用せずに Vue.js アプリケーションを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。