Vueの学習手順

序文：

Vue の公式 Web サイトでは、次のように合計 14 個の手順が提供されています。

• v-text

• v-html

• v-show
• v-if ☆☆☆
• v-else ☆☆☆
• v-else-if ☆☆☆
• v-for ☆☆☆
• v-on ☆☆☆
• v-bind ☆☆☆
• v-model ☆☆☆
• v-slot

• v-pre

• v-cloak

• v-once

注：☆は重要かつよく使われるものを表します

1. v-text (v-instruction name = "variable"、変数には値を提供するためのデータが必要です)

<p v-text="情報"></p>
<p v-text="'abc' + 情報"></p>
<スクリプト>
    新しいVue({
        el: '#app',
        データ： {
            情報: 'a'
        }
    })
</スクリプト>

v-text="info"はページ結果を にレンダリングしますaは変数なので、変数に対応する値が直接表示されますinfo

v-text="'abc' + info"は、ページの結果をabcaとしてレンダリングします。文字列と変数を連結する場合は、文字列に一重引用符を追加して、プログラムが文字列であると認識できるようにします。文字列 + info 変数の最終結果は、文字列abca

2. v-html (HTML構文を解析できる)

場合によっては、 Vueオブジェクト内またはバックグラウンドで、レンダリングする必要のあるネイティブhtmlコードの一部が返されます。{{}} を介して直接レンダリングすると、 htmlコードは文字列として扱われます。現時点ではv-html命令を通じてこれを実現できます。

サンプルコードは次のとおりです。

<p v-html="'<b>OK</b>'"></p>
<p v-text="'<b>OK</b>'"></p>

上記の 2 行のコードには、異なるvue命令を使用していることを除いて違いはありません。まず結果を示しましょう。

わかりました
<b>わかりました</b>

v-html htmlタグを解析でき、 text文字列を渡します。文字列の具体的な内容が何であっても、元の文字がそのまま表示されます。

3. v-once (要素とコンポーネントを1回だけレンダリングする)

要素とコンポーネントを 1 回だけレンダリングします。以降の再レンダリングでは、要素/コンポーネントとそのすべての子は静的コンテンツとして扱われ、スキップされます。これを使用して更新パフォーマンスを最適化できます。

<input type="text" v-model="msg" v-once> // 一度だけレンダリング<p v-once>{{ msg }}</p>  
 

4. v-cloak（ページのちらつきを防ぐ）

このディレクティブは、関連付けられたインスタンスのコンパイルが完了するまで要素に残ります。 [ v-cloak] { display: none }などのCSSルールと一緒に使用すると、このディレクティブはインスタンスの準備ができるまでコンパイルされていないMustacheマークアップを非表示にすることができます。

5. v-pre（理解）

この要素とその子要素のコンパイルをスキップします。生のMustacheタグを表示するために使用できます。命令のない多数のノードをスキップすると、コンパイルが高速化されます。

<div id="アプリ">
  <span v-pre>{{メッセージ}}</span>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: 「こんにちは」
    }
  })
</スクリプト>

通常、 helloをコンパイルしてWebページ上に表示しますが、 v-preディレクティブを使用すると、コンパイルをスキップして元のタグコンテンツ、つまり{{message}}を直接表示します。

6. vバインド

6.1 バインディングプロパティ

Vueオブジェクト内の変数をhtml要素の属性にバインドする場合は、 v-bindを使用する必要があります。

<div id="アプリ">
  <a v-bind:href="baidu" rel="external nofollow" >バイドゥ</a>
  <img :src="imgSrc" alt="">
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: "こんにちは",
      百度：「https://www.baidu.com」、
      画像ソース: "upload/2022/web/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
    }
  })
</スクリプト>

バインドされたプロパティの前にv-bind : を追加するだけです。 もちろん、省略形: を使用してコロンだけを記述することもできます。

6.2 バインディングクラス

Classをバインドする方法は2つあります。1つは配列バインディング、もう1つはオブジェクトバインディングです。

これはオブジェクトを通じて実現されます:

<div id="アプリ">
  <p v-bind:class="{color:isColor}">こんにちは、世界</p>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      isColor: 真
    }
  })
</スクリプト>
<スタイル>
    。色{
        色: 青;
    }
</スタイル>

オブジェクトメソッドは上記のコード{color:isColor}のようで、 keyはcolor 、 valueはisColorで、 valueがtrueの場合はレンダリングされ、 falseの場合はレンダリングされません。

これは配列を使用することで実現できます:

<div id="アプリ">
  <p :class="[classname1, classname2]">{{メッセージ}}</p>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: "こんにちは",
      クラス名1: "pcolor",
      クラス名2: "fontSize"
    },
  })
</スクリプト>
<スタイル>
    .pcolor{
        色: 赤;
    }
    .フォントサイズ{
        フォントサイズ: 30px;
    }
</スタイル>

class 2つの属性をバインドする必要がある場合は、配列を使用できます。

6.3 スタイルバインディング

Style をバインドする方法も 2 つあります。1 つは配列を介してバインドする方法、もう 1 つはオブジェクトを介してバインドする方法です。

オブジェクトを通じて実装:

<div id="アプリ">
  <p :style="{fontSize:'100px'}">{{メッセージ}}</p>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: 「こんにちは」
    }
  })
</スクリプト>

注意:オブジェクトをバインドする場合、camelCase 命名法 fontSize のみを使用できます。font-size は使用できません。そうしないとエラーが報告されます。100px にシングルクォートを付ける場合は文字列ですが、シングルクォートを付ける場合は変数です。データに変数を追加する必要があります。

これは配列を使用することで実現できます:

<div id="アプリ">
  <p :style="[style1, style2]">{{メッセージ}}</p>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: "こんにちは",
      スタイル1: {背景:'赤'},
      スタイル2: {フォントサイズ:'30px'},
    }
  })
</スクリプト>

Vue コマンドの学習に関するこの記事はこれで終わりです。Vue コマンドに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。