Vueはカウンターのシンプルな生成を実装します

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです。

プロセスの考慮事項

  • vue インスタンスを作成する場合: el (マウント ポイント)、data (データ)、methods (メソッド)。
  • v-on ディレクティブはイベントをバインドするために使用され、@ と省略されます。
  • data 内のデータは、メソッド内の this キーワードを通じて取得されます。
  • v-text ディレクティブの機能は、{{}} と省略される要素のテキスト値を設定することです。
  • v-html 命令の機能は、要素の innerHTML を設定することです。

実際のコードとスクリーンショット

<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カウンター</title>
</head>
<本文>
    <div id="アプリ">
        <!--カウンター機能エリア-->
        <div class="input-num">
            <ボタン @click="sub">
                -
            </ボタン>
            <span>{{数値}}</span>
            <ボタン @click="追加">
                +
            </ボタン>
        </div>
    </div>
        <!-- 開発バージョン、便利なコマンドライン警告を含む -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
    //vueインスタンス var app = new Vue({
        el:"#アプリ",
       データ： {
            番号:1
       },
       メソッド: {
           追加:関数(){
               //コンソール.log('追加')
               if(this.num<10){
                this.num++; 
               }それ以外{
                alert('クリックしないでください。一番大きいものです!');
               }
           },
           サブ:関数(){
               //コンソールログ('sub')
               if(this.num>0){
                this.num--; 
               }それ以外{
                alert('クリックしないでください。最小値です!');
               }
           }
       },
    })
</スクリプト>
</本文>
</html>

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue実装のカウンターケース
  • PC側Vue UIコンポーネントライブラリをゼロから作成する（カウンターコンポーネント）
  • Vuex の使い方と簡単な例 (カウンター)
  • Vuex はカウンターとリストの表示効果を実装します
  • Vuexはシンプルなカウンターを実装する
  • Vueカウンターの実装

<<:  Linux での MySQL の文字化け問題の解決方法

>>:  win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

推薦する

複数のネットワークカードを備えた Linux システムでのルーティング構成の詳細な説明

Linux でのルーティング設定コマンド1. ホストルーティングを追加する ルートを追加 -host...

MySQL接続クエリの原理と応用

概要MySQL の最も強力な機能の 1 つは、データ取得を実行しながらテーブルを結合できることです。...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)

導入：スライダー ドラッグ検証は現在、多くの場所で使用されています。週末に 1 つ作成しようと思い、...

Docker を使用した SQL Server の実行の実装

現在、.net Core はクロスプラットフォームであり、誰もが Linux と Docker を使...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

静的リソースファイルのアクセスログをフィルタリングするNginxの実装

乱雑なログ日常的に使用される Nginx は、静的リソース サーバーとリバース プロキシ サーバーの...

uniappとvueの違いの詳細な説明

目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...

ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い

概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティス...

nginxリバースプロキシのマルチポートマッピングの実装

コードの説明1.1 http:www.baidu.test.com のデフォルトは 80 で、リバー...

Winows Server 2019 アクティベーション コードとボリューム ライセンス エディション KMS インストール キー GVLK

最近、社内文書の整理とファイルサーバーの構成を予定しています。以前はサーバー2003を使い慣れていま...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法

idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...

Node.js のモジュール性、npm パッケージ マネージャーの説明

目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...