Vueフレームワークで習得しなければならない重要な知識を学びます

1. Vueとは何か

Vue は、ユーザーページを構築するためのプログレッシブフレームワークです。他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てているため、使い始めるのが簡単なだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンとさまざまなサポートライブラリと組み合わせると、Vue は複雑なシングルページアプリケーションを完全に実行できるようになります。

2. ネイティブJSとの違い

これを小さな事例で実証してみましょう

例: spanタグ内の入力ボックスの情報をリアルタイムで表示する

ネイティブJS

<本文>
 <入力id='txt' タイプ="テキスト">
 <span id='con'></span>
</本文>
<スクリプト>
 document.querySelector('#txt').addEventListener('keyup', 関数 () {
 document.querySelector('#con').innerHTML = this.value
 })
</スクリプト>

ビュー

<本文>
 <div id="アプリ">
 <input id='txt' type="text" v-model="msg">
 <span id='con'>{{メッセージ}}</span>
 </div>
</本文>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
 アプリを新しいVue({
 el: "#app",
 データ： {
  メッセージ: ""
 }
 })
</スクリプト>

違い：明らかな違いは、DOM要素の操作が省略されていることです。

要約:

DOM要素を作成し、それをVueインスタンスのマウントポイントにします。Vueインスタンス内のすべてのデータはマウントポイントで使用できます。
```
<div id=アプリ>
</div>
```
new Vueを通じてインスタンスオブジェクトを作成する
el属性は現在のVueインスタンスのマウントポイントを指定します。
data内のデータは、現在の Vue インスタンスに依存するモデルデータです。コンソールにapp.msgと入力すると、データを表示できます。
データ内のデータは補間式を通じて使用できる

3. データバインディング

データバインディングは、マウントポイントのVueインスタンスのデータ属性のデータを表示することです。

1. コンテンツのバインディング

データ内のデータをコンテンツとして表示する

<div id='アプリ'>
 <p>{{メッセージ}}</p>
</div>

HTML タグを表示する場合は、タグ内でv-htmlを使用します。

<div id='アプリ'>
 <p v-html>{{メッセージ}}</p>
</div>

2. プロパティバインディング

データ内のデータを要素の属性値として使用する

v-bindを使用するだけです。属性は組み込みまたはカスタマイズできます。短縮形は次のとおりです:

<p v-bind:id="id" :class="class">{{メッセージ}}</p>

3. フォームタグの値

v-modelディレクティブを使用して、フォームタグで双方向データバインディングを使用できます。コントロールの種類に基づいて、要素を更新するための正しい方法が自動的に選択されます。

1. テキストボックスとテキストフィールド

<入力タイプ:'テキスト' v-model="msg"></input>
<テキストエリア v-model:'msg'><テキストエリア>

2. チェックボックス

<div id='アプリ'>
	<ラベル:'水泳'><ラベル>
 <input type='checkbox' id=swim v-model='isSwim'/>
 <label for="read">読む</label>
 <input type="checkbox" id="read" v-model="isRead">
 <label for="play">ゲーム</label>
 <input type="checkbox" id="play" v-model="isPlay">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
 	アプリを新しいVue({
 el:"#アプリ",
 データ：{
  isSwim:true、
  isRead:true、
  isPlay:false
 }
 }) 
 </スクリプト>

ラジオボタン

<div id="アプリ">
	<label for="man">男性</label>
 <input type="radio" id="man" value="man" v-model="性別">
 <label for="women">女性</label>
 <input type="radio" id="女性" value="女性" v-model="性別">
 {{性別}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
 	アプリを新しいVue({
 el:"#アプリ",
 データ：{
  性別：''
 }
 }) 
 </スクリプト>

ドロップダウンボックス

<div id="アプリ">
 <v-model="city">を選択します
 <option disabled value="">選択してください</option>
 <option value="bj">北京</option>
 <option value="sh">上海</option>
 </選択>
 {{市}}
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
 	アプリを新しいVue({
 el:"#アプリ",
 データ：{
 市：""
 }
 }) 
 </スクリプト>

パラメータの受け渡し

<div id='アプリ'>
	<button v-on:click="showInfo('hello')">ボタン</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
	アプリを新しいVue({
 el:"#アプリ",
 データ：{
  タイトル:「元旦」
 },
 方法:{
  showInfo:関数(メッセージ){
  console.log(メッセージ)
  }
 }
 })
</スクリプト>

4. イベント処理

v-onディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。

<div id=アプリ>
 <button v-on:click='挨拶'></button>
</div>

var アプリ = 新しい Vue({
 el:'#app',
 データ：{
 名前:「holle Vue」
 },
 //メソッド内でメソッドを定義する:{
 挨拶:関数(イベント){
  // this はメソッド内の Vue インスタンスを指します alert(this.name + '!')
  if (イベント) {
 		アラート(イベント.ターゲット.タグ名)
 	}
 }
})

5. リストのレンダリング

v-forディレクティブを使用して、配列に基づいてリストをレンダリングできます。 v-forディレクティブには、 item in items形式の特別な構文が必要です。ここで、 itemsデータのソース配列であり、 item反復される配列要素のエイリアスです。

<div id='アプリ'>
	<ul>
 		<li v-for="blogs in blogs">{{blog}}</li>
 </ul>
 <ul>
 <li v-for="stu in stus">名前: {{stu.name}} 年齢: {{stu.age}}</li>
 </ul>
</div>

var アプリ = 新しい Vue({
 el:"#アプリ",
 データ：{
 ブログ:[『三国志演習』、『西遊記』、『老師Q』]、
 スタス:[
  {名前:'シャオミン',年齢:18},
  {名前:'シャオ・チャン',年齢:11},
  {名前:'シャオ・ワン'、年齢:12}
 ]
 }
})

サーバーからデータを取得する

<本文>
 <div id="アプリ">
 <ul>
 <li v-for="書籍内のアイテム">{{item.title}}</li>
 </ul>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <スクリプト>
 アプリを新しいVue({
 el: '#app',
 データ： {
  書籍: [],
 },
 作成: 関数 () {
  フェッチ('data.json')
  .then((res) => {
  res.json() を返す
  })
  .then((res) => {
  this.books = レコード
  })
 },
 })
 </スクリプト>

6. 条件付きレンダリング

1. `v-if`ディレクティブは、条件付きでコンテンツをレンダリングするために使用されます。

<div v-if=true>こんにちは Vue</div>

2. `v-else`を使ってelseブロックを追加することもできます

<div v-if=false>こんにちは Vue</div>
<div v-else>こんにちは世界</div>

3. `<template>`要素に`v-if`条件付きレンダリンググループを使用する

複数の要素を切り替える必要がある場合は、 templateにv-ifを追加できます。 <template>要素は非表示の要素であるため、レンダリングされた結果には<template>要素は含まれません。

<テンプレートv-if="ok">
 <h1>タイトル</h1>
 <p>段落 1</p>
 <p>段落 2</p>
</テンプレート>

4. `v-if-else` 、その名前が示すように、 `v-if`のelse ifブロックとして機能し、連続して使用できます。

<div v-if="スコア==100">
 満点</div>
<div v-else-if="スコア>=80 && スコア<100">
 良い</div>
<div v-else-if="スコア>=70 && スコア<=60">
 パス</div>
<div v-else-if="スコア<60">
 失敗しました</div>
<div v-else>
 正しいスコアを入力してください</div>

5. `v-show`条件に基づいて要素も表示します

<div v-show="ok">こんにちは</div>

v-ifとは異なり、 v-show要素は常にレンダリングされ、DOM 内に残ります。

一般的に、 v-ifは切り替えコストが高く、 v-showは初期レンダリングコストが高くなります。したがって、非常に頻繁に切り替える必要がある場合はv-showを使用する方が適切であり、実行時に条件がほとんど変化しない場合はv-if使用する方が適切です。

7. クラスとスタイルのバインディング

v-bindを使用してクラス名やインラインスタイルをバインドすることができます

バインドクラスはクラスを動的に切り替えることができ、通常のクラスと共存することもできます

<div class="static" v-bind:class="{active:isActive,'text-danger:hasError'}"></div>

データ{
 アクティブ:true
 エラー:false
}

レンダリング結果は次のとおりです。

<div class='静的アクティブ'></div>

インラインレベルのスタイルのバインディング

構文v-bind:style

<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}'></div>

データ：{
 アクティブカラー:"赤",
 フォントサイズ:13
}

スタイルオブジェクトに直接バインドすることもできるので、テンプレートがより明確になります。

<div v-bind:style="active"></div>

データ：{
 アクティブ：{
 色: '赤',
  フォントサイズ:'30px'
 }
}

8. 計算プロパティ

テンプレート内の値を計算する必要がある場合は、計算プロパティ（computed）を使用できます。

<div id="#app">
 <p>{{メッセージ}}</p>
 <p>{{リバースメッセージ}}</p>
</div>

var アプリ = 新しい Vue({
 el:"#アプリ",
 データ：{
 メッセージ:「こんにちは」
 },
 計算:{
 リバースメッセージ(){
  this.message.split('').reverse().join('') を返します
 }
 }
})

9. リスナー

リスナーは、Vue インスタンス上のデータの変更を監視し、それに応答できます。

<div id="アプリ">
 <div>
 質問: <input v-model="question">
 </div>
 
 <div>{{回答}}</div>
</div>

 var アプリ = 新しい Vue({
 el: "#app",
 データ： {
  質問： ""、
  答え： []、
 },
 時計：
  質問(新しい値) {
  this.getAnswer()
  }
 },
 メソッド: {
  答えを得る: 関数() {
  それを = これとする
  axios.get('http://localhost:3000/answer.php?q=' + this.question)
   .then(関数 (応答) {
   that.answer = 応答.データ
   })
  }
 }
 })

PHPコード

<?php
 $question = $_GET['q'];
	$回答=[];
	スイッチ($question){
 ケース「小さい」:
 $answer=['小さな子供', '小さな妹', '小さな新鮮な肉'];
 壊す;
 ケース「リトルフレッシュミート」：
 $answer=['新鮮な肉とは何か'、'新鮮な肉の用途は何'、'新鮮な肉は食べられるか'];
  壊す;
 ケース「若くてハンサムな男の演技」：
 $answer=["若い俳優の演技は偽物すぎる","若い俳優は禁止された","若い俳優は俳優になれない"];
 壊す;
 }
json_encode をエコーします($answer);
?>

デモ

nswer = 応答データ

php コード ```php
<?php
 $question = $_GET['q'];
	$回答=[];
	スイッチ($question){
 ケース「小さい」:
 $answer=['小さな子供', '小さな妹', '小さな新鮮な肉'];
 壊す;
 ケース「リトルフレッシュミート」：
 $answer=['新鮮な肉とは何か'、'新鮮な肉の用途は何'、'新鮮な肉は食べられるか'];
  壊す;
 ケース「若くてハンサムな男の演技」：
 $answer=["若い俳優の演技は偽物すぎる","若い俳優は禁止された","若い俳優は俳優になれない"];
 壊す;
 }
json_encode をエコーします($answer);
?>

デモ

10. スロット

スロットの内容

var el_div = {
 テンプレート：
	<div><スロット></スロット></div>
}

<div id=アプリ>
	<el-div>
 <span>スロットの内容</span>
 </el-div>
</div>

コンポーネントがレンダリングされると、 slot <span>插槽內容</span>に置き換えられます。スロットには任意のテンプレートコードを含めることができます

フォールバックコンテンツ

コンテンツが提供されていない場合にのみレンダリングされる、スロットに特定のフォールバック (つまり、デフォルト) コンテンツを設定すると便利な場合があります。たとえば、 <submit-button>コンポーネントの場合:

<ボタンタイプ="送信">
 <スロット></スロット>
</ボタン>

ほとんどの場合、この<button>で「送信」というテキストをレンダリングする必要があります。「Submit」をフォールバックコンテンツとして使用するには、それを<slot>タグ内に配置します。

<ボタンタイプ="送信">
 <slot>送信</slot>
</ボタン>

ここで、親コンポーネントで<submit-button>を使用し、スロットコンテンツを提供しない場合は次のようになります。

<送信ボタン></送信ボタン>

フォールバックコンテンツ「送信」がレンダリングされます。

<ボタンタイプ="送信">
 提出する
</ボタン>

しかし、コンテンツを提供すると、

<送信ボタン>
 保存
</送信ボタン>

次に、フォールバックコンテンツの代わりに提供されたコンテンツがレンダリングされます。

<ボタンタイプ="送信">
 保存
</ボタン>

名前付きスロット

場合によっては、複数のスロットが必要になることがあります。たとえば、次のテンプレートを持つ<base-layout>コンポーネントの場合:

<div class="コンテナ">
 <ヘッダー>
 <!-- ここにページヘッダーを配置します -->
 </ヘッダー>
 <メイン>
 <!-- ここにメインコンテンツを配置します -->
 </メイン>
 <フッター>
 <!-- ここにフッターを配置します -->
 </フッター>
</div>

このような場合、 <slot>要素には特別な属性nameがあります。この属性は追加のスロットを定義するために使用できます。

<div class="コンテナ">
 <ヘッダー>
 <スロット名="ヘッダー"></スロット>
 </ヘッダー>
 <メイン>
 <スロット></スロット>
 </メイン>
 <フッター>
 <スロット名="フッター"></スロット>
 </フッター>
</div>

nameのない<slot>出口には、暗黙の名前「default」が付けられます。

名前付きスロットにコンテンツを提供する場合は、 <template>要素でv-slotディレクティブを使用し、その名前をv-slotの引数として提供します。

<ベースレイアウト>
 <テンプレート v-slot:header>
 <h1>ここにページタイトルがあるかもしれません</h1>
 </テンプレート>

 <p>メインコンテンツの段落。</p>
 <p>そしてもう一つ。</p>

 <テンプレート v-slot:footer>
 <p>連絡先情報はこちら</p>
 </テンプレート>
</ベースレイアウト>

これで、 <template>要素内のすべてのコンテンツが対応するスロットに渡されるようになります。 v-slotを持つ<template>でラップされていないコンテンツはすべて、デフォルトスロットのコンテンツとして扱われます。

ただし、より明示的にしたい場合は、デフォルトスロットの内容を<template>でラップすることもできます。

<ベースレイアウト>
 <テンプレート v-slot:header>
 <h1>ここにページタイトルがあるかもしれません</h1>
 </テンプレート>

 <テンプレート v-slot:default>
 <p>メインコンテンツの段落。</p>
 <p>そしてもう一つ。</p>
 </テンプレート>

 <テンプレート v-slot:footer>
 <p>連絡先情報はこちら</p>
 </テンプレート>
</ベースレイアウト>

これらはいずれもレンダリングされます:

<div class="コンテナ">
 <ヘッダー>
 <h1>ここにページタイトルがあるかもしれません</h1>
 </ヘッダー>
 <メイン>
 <p>メインコンテンツの段落。</p>
 <p>そしてもう一つ。</p>
 </メイン>
 <フッター>
 <p>連絡先情報はこちら</p>
 </フッター>
</div>

上記は、Vue を学習する上で習得しなければならない重要な知識の詳細な内容です。Vue の重要な知識の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: