• Vueにシンプルなメモ帳機能を実装

    この例では、参考のためにVueで簡易メモ帳機能を実装するための具体的なコードを以下のように共有します。 プレビュー画像です。 機能は以下のとおりです。 (1) タスクを入力し、Enterキーを押すとタスクリストに追加されます(重複して入力することはできません)。 (2) 削除をクリックすると、該当するタスクが削除されます (3) 「クリア」をクリックすると、すべてのタスクが削除されます。

    2022-01-13 23:11:35
  • vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ

    I. ネイティブウェブリクエスト 1. XMLHttpRequest (w3c標準)    // 約束がない場合の商品 当時は何でもかんでもコールバックだった、面倒くさすぎる 2. フェッチ    // プロミスが存在するため、ネットワークリクエストを簡略化するため。 Fetchの使い方 - Web APIインターフェ

    2022-01-13 22:40:48
  • vueのプロジェクトでモックを使用する方法を知っていますか?

    Mock.js は、フロントエンドのタッパーがバックエンドから独立して開発し、ユニットテストを書きやすくするために設計されたモックデータジェネレータです。以下のモック関数が提供されています。 データテンプレートに基づきモックデータを生成する Ajaxリクエストをシミュレートし、モックデータを生成して返す。 HTMLテンプレートに基づいたモックデータの生成 最初のス

    2022-01-13 22:35:32
  • vue3.0プロジェクトのアーキテクチャを構築するための便利なツール

    まえがき 私はvue-cliとvue-cli3のライブラリをGitHubでオープンソース化しており、記事の末尾にGitHubのリポジトリアドレスを記載することにしています。今回は2.0を書き換えて最適化しました。その後、2.0の機能とコードに従って、vue3.0の文法に従って完全に書き直した。名前はcliですが、実はどちらのライブラリもvue-cliをベースに作成されています。これを行う目

    2022-01-13 21:29:21
  • Vue+ElementUIによる大規模なフォームの処理例

    最近、業務再編により、以前の超長文フォームのロジックに変更が増えたので、リファクタリングを計画しました(退社したバックエンドが書いたもので、コメントもなく、コンポーネントが4000行以上書いてあり、本当に大変でした)。読むのに便利なように、ここではプロジェクトを14個のコンポーネントに分割して合理化しました。 全体像 /{h3 大きな帳票は、業務モジュールごとに分割 el-fo

    2022-01-13 21:21:02
  • Vueのフォームイベントのデータバインディングの説明

    <body> <div id="root"> <form action="" @submit.prevent="demo"> <label for="TW"> Name:</label> <input type="text" id="TW" v-mod

    2022-01-13 21:14:53
  • vue ディレクティブ v-html と v-text

    <スパン 1. v-text テキストレンダリングディレクティブ <ブロッククオート (テキストのみレンダリングし、タグはレンダリングしません) <div id="test"> <p v-text="message"></p> </div> <script src=". /js

    2022-01-13 19:34:48
  • vueにおけるfilterの適用シーンについて解説します。

    filter これは一般的に特定の値をフィルタリングするために使用されます。例えば、空のフィールドがあるが、フロントエンドに "-" を表示したい場合、これを使用することができます。 最近、他のフォームで表示される特定のフィールドに対して、"***" のように、非表示にする必要がある金額を表示する許可を設定できるようにする要件にぶつけました。 1. 金額のパーミッション取得

    2022-01-13 19:22:45
  • vueはopenlayersを使用してスカイマップとガオードマップをロードする

    I. スカイマップ部分 1. vueにopenlayersをインストールする npm i --save ol ここには、次のように書かれています。 vue は、scaffoldingをベースに構築されています。新しいページを作成することで、それは vue ファイルを作成し、ルートを設定します。そして、いよいよ自分のコードを直接入れて実行します。 <template>

    2022-01-13 19:13:02
  • Vueの要素ツリーコントロールに破線を追加する説明

    1. エフェクトの実装 画像 2. 実装コード ツリーコントロールのダッシュは主にcssを制御して追加しており、ツリーコントロールのインデントは0しかとれないので、class="mytree" <div class="mytree"> <! --indent can only be 0--> <el-tree

    2022-01-13 19:01:19
  • vueが定義するプライベートフィルタと基本的な使い方

    プライベートフィルタとグローバルフィルタのメソッドとコンセプトは同じですが、一方はグローバルに呼び出すことができ、プライベートフィルタは自分自身でのみ呼び出すことができます。 グローバルフィルターはこちら グローバルフィルター 使い方もグローバルフィルターと同じですが、定義される場所が異なります。 グローバルフィルターは script の中で Vue.f

    2022-01-13 17:20:58
  • Vueのフィルタの説明

    <body> <div id="root"> <h2> Show time after formatting</h2> <! -- Calculated property implementation --> <h2> now {{fmtTime}}</h2>

    2022-01-13 17:09:17
  • 親子コンポーネント通信を解決する3つのVueスロット

    プリアンブル スロットはVueにとって非常に重要な部分だと思います。私が学習し実践している中では、コンポーネントとスロットを一緒に使うと、より効果的に機能します。また、より便利になることが多いです。 今日はVueのスロットのうち、デフォルトスロット、ネームドスロット、スコープドスロットの3種類を紹介します。 環境整備 最初にハッとするような初期環境を構築してみましょう。ス

    2022-01-13 16:41:14
  • Vueでルートネスティングを実装する例

    1、ネストされたルートは、サブルートとも呼ばれ、実際には、通常、複数のネストされたコンポーネントの組み合わせによって、ネストされます。(実際には単なる入れ子操作で、バックエンドのビュージャンピングパスにかなり似ている)。 2. ユーザー情報コンポーネントを作成するために、Profile.vueという名前のビューコンポーネントをviews/userディレクトリに作成します。 プ

    2022-01-13 15:30:06
  • Vueの一般的な組み込みディレクティブの説明

    <body> <div id="root"> <h1 v-pre>Learn well</h1> <h1>{{name}}</h1> <h1 v-text="name"></h1> <h2 v-html="str"&

    2022-01-13 14:50:27
  • Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。

    1. 効果 2. タグによるツリーテーブル結合データ ツリーコントロールのツリーノードに画像やエレメントuiのアイコンを追加するには、ツリーフォームのバインドデータにラベルアイコンを追加することができます children: [ { icon: 'el-icon-top-right', label: ['b

    2022-01-13 14:27:41
  • vueディレクティブv-bindの使用と注意点

    1. v-bind:要素の属性に何らかのデータをバインドすることができる <div id="app"> <p v-bind:title="message" v-bind:id="pId">I am p tag</p> </div> <script src=". /js/vue.js"></script&gt

    2022-01-13 13:17:16
  • Vueの「データを聴く」原則を解説

    画像 <body> <div id="root"> <h1>Basic information about the student</h1> <button @click="student.age++">age+1 years</button> <button @c

    2022-01-13 12:49:20
  • Vueがechartsのtooltipにクリックイベントを追加するケーススタディ

    要求事項 詳細ページにジャンプするために、echartsのツールチップで学校名をクリックする必要がある。プロジェクトは上海から-->地区 ---->特定の学校(最後のレベルでツールチップのクリックイベントをバインド)。  このプロジェクトはvueとechartsで実装されており、新しいバージョン(^5.0.2)であるため、クリックイベントをウィンドウにバインドしていない

    2022-01-13 12:23:43
  • Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している

    この例では、Vueが水平方向にスクロールするランニングライトスタイルのテキストを実装するための具体的なコードを、参考のために以下のように共有します。 必要条件 Vueプロジェクトのトップ、テキストを左右にスクロールさせるため ステップ 1. 自分でコンポーネントをラップするか、自分で書くか、次のコードをコピーしてください。 2. ラッピング後、必要なコンポーネントに導

    2022-01-13 11:54:25