[整理して共有] 効率の向上に役立ついくつかの Vue コマンド!

この記事では引き続き Vue について学び、効率を向上させるためにいくつかの Vue の手順を整理して共有します。

Vue を使用する多くの学生は、指示を簡単に無視する傾向があります。ここでは、初心者の多くは、Vue を導入する前に Vue に触れ始めてさえいないと考えているためです。 clos まず、有名な v-model

v-model

を使用して小さなデモを作成しましょう v-model については、誰もがよく知っていると思います。 フォーム コントロールとコンポーネント上に作成された双方向のデータ バインディングです。

まず、小さな Vue 環境を構築し、HTML ページに Vue.js を導入します。

ここで皆さんにちょっとしたお役立ち情報をご紹介します:

  <div>
    <input><br>
    这里是文本框输入的值——{{message}}
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好，几何心凉!&#39;,
    },
  })</script>

非常に単純な例を実行した結果は、疑いの余地がありません。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

これで、双方向の関係がわかります。より直接的に

1. コンソールでモデルのデータを変更します

の値を変更していることがわかります。モデル内のメッセージに応じて、ビュー内の値が変化します。

2. テキスト ボックスのビュー内の値を変更することで、モデル内の変更を確認します。

テキスト ボックスを通じてビューの値を変更すると、それに応じてモデルの値も変更されることがわかります。

概要
上記の例を通じて、Vue の双方向バインディングについてより深く理解できましたか。これは、フォーム要素を使用してデータの表示を実行することしかできないからです。もちろん、他の要素も使用できます。 form 要素も変更できるため、1 つずつリストすることはしません;

v-model modifier

1. .lazy
上のアニメーションでは、テキスト ボックスの値が変更される限り、v-model によってバインドされたテキスト ボックスがモデル データに更新されることがわかります。継続的に機能しますが、パフォーマンスに影響するため、テキスト ボックスがフォーカスを失ったときにテキスト ボックスの値を同期するのに役立つ .lazymodifier
を使用します。 # 効果を確認するには

2.

.number まだそれを採用しています テキストボックスを例として取り上げます多くの場合、ユーザーに入力してもらうための値が必要になりますが、この値は計算に使用する数値である可能性があり、このとき、多くの生徒は変換、入力、判断など、さまざまな方法を考えます。しかし実際には、v-model には、この要件を満たすのに役立つ修飾子があります。
小さな栗を通して見てみましょう。まず、2 つのテキストのそれぞれに値を入力します。

結果をご覧ください

結果が私たちが望むものではないことがわかります。それは合計ではなく結合として使用されています。次に、.number 修飾子を追加して試してみましょう

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
    },
  })</script>

結果を見てみましょう

3.

.trim これは誰にとっても馴染みのあるもので、比較的一般的に使用されています。ただし、テキスト ボックスの中央ではなく、両端のスペースが削除されるだけです。

  <div>
   <h3>我是求和——{{num1+num2}}</h3>
<input><input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
      num1: &#39;&#39;,
      num2: &#39;&#39;,

    },
  })</script>

効果を確認してください

# #ちょっとした常識:

実際、ここでテキスト ボックスにバインドされている v-model は、単なる構文シュガーです。これで、value 属性と input イベントを使用して双方向バインディングが完了します。テキスト ボックスの値が変化すると、入力イベントをトリガーしてバインドした値を変更します。同時に、テキスト ボックスの値もメッセージ

# にリンクされます。 ##v-cloak

v-cloak は具体的に何をするのですか? まず次のコードを見てみましょう

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,

    },
  })</script>

それから、ページがレンダリングされると、次の瞬間に次のことがわかります。表示されます

すぐにフラッシュされます

#この現象は、実際の開発プロセス中に、特にネットワークの状態があまり良くない場合やバックエンド インターフェイスの応答が遅い場合に発生するため、v-cloak

# を使用します。 ##実際には、その原理は、display:none です。それを理解する必要があります。つまり、データにバインドされた変数に値がある場合、Dom 要素は非表示になるため、上記の問題は発生しません。

(学習ビデオ共有:

vuejs 入門チュートリアル 、

基本プログラミング ビデオ

)

以上が[整理して共有] 効率の向上に役立ついくつかの Vue コマンド!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。