Vue 学習の実践: 簡単なカウンターを作成する-フロントエンドQ&A-php.cn

Vue 学習の実践: 簡単なカウンターを作成する

PHPz

リリース： 2023-04-13 11:25:08

オリジナル

1138 人が閲覧しました

Vue は、フロントエンド開発、特にシングルページアプリケーションの開発において使用率が高く、強力な機能を備えた軽量の JavaScript フレームワークです。 Vue の学習曲線は比較的スムーズで、簡単に始めることができ、ドキュメントは非常に詳細であり、参考となるチュートリアルや事例もインターネット上に多数あります。

Vue の最初の例は、主に Vue の基本的な使用法を紹介するために使用される簡単なカウンターを作成することです。一緒に見てみましょう。

まず、Vue JS ファイルを HTML ページに導入します。

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

ログイン後にコピー

次に、HTML でカウンタ領域を定義し、2 つのボタンを追加します。1 つはカウンタの値、A 値を増やすためのものです。カウンタを減らすために使用されます:

<div id="app">
  <p>计数器的值是：{{ counter }}</p>
  <button v-on:click="add">增加</button>
  <button v-on:click="minus">减少</button>
</div>

ログイン後にコピー

この領域の上部で、カウンタ値を表示するための  ラベルを定義します。ここでは { {}}# を渡します。 Vue データ、つまり counter 変数の値をバインドする ## 構文。 2 つのボタンで、add メソッドと minus メソッドをそれぞれバインドし、クリックイベント v-on:click を指定しました。

最後に、JavaScript で Vue インスタンスを定義し、counter 変数と対応するメソッドを定義します。

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    add: function() {
      this.counter++;
    },
    minus: function() {
      this.counter--;
    }
  }
})

ログイン後にコピー

ここでは、Vue インスタンスを定義します。そのel 属性は、Vue が制御する領域、つまり上で定義した id="app" の DIV 領域を指定します。 counter 変数は data 属性で定義されており、その初期値は 0 です。 methods

属性には 2 つのメソッドが定義されており、1 つはカウンターの値を増やすために使用され、もう 1 つはカウンターの値を減らすために使用されます。

ここで、HTML ページを開くと、初期値 0 のカウンタがページ上に表示されることがわかります。「増加」ボタンをクリックするとカウンタ値が 1 増加し、「減少」ボタンをクリックするとカウンタ値が 1 減少します。これは Vue の最初の例です。

Vue の学習にはまだまだ長い道のりがありますが、この簡単な反例を通して、Vue の基本的な使用法を一般的に理解することができます。次に、Vue のコンポーネント、命令、フィルター、その他の高度な使用法を学習して、フロントエンド開発をより簡単かつ効率的にすることができます。

以上がVue 学習の実践: 簡単なカウンターを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。