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

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要素の操作が省略されていることです。

要約:

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

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条件付きレンダリンググループを使用する

複数の要素を切り替える必要がある場合は、 templatev-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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue nextTick の使い方と原理の詳細な研究
  • Vueコンポーネントの例を学ぶ
  • Vue.js の条件付きレンダリングを学ぶ
  • Vue.js の計算プロパティを学ぶ
  • シンプルな学習 Vue ディレクティブ
  • Vueの最初のプログラムを書くための勉強ノート

<<:  Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

>>:  MySql で正規表現クエリを使用する方法

推薦する

Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明

ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...

vue+elementuiは、共有箇条書きボックスの追加と変更の完全なコードを実装します。

目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

XHTML コードで Marquee タグを使用する方法

フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...

Nginx の高同時実行最適化の実践

1. チューニングの必要性​ 私は、どのように書けばいいのか本当に分からないので、共有するために最適...

TomcatはXMLを解析し、リフレクションを通じてオブジェクトを作成します。

次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...

JavaScript 配列の重複排除とフラット化関数の紹介

目次1. 配列の平坦化(配列の次元削減とも呼ばれる)方法1: 削減メソッドを使用する方法2: スタッ...

CSS スタイルを変更してグレーの Web ページ (色なし、明るい白黒のみ) を実現するいくつかの方法

通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...

Element-ui レイアウト (行と列コンポーネント) の実装

目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

CentOS7 で ethereum/Ethereum を最初からインストールする

目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...

Ubuntu に MySQL 5.7 をインストールし、データ ストレージ パスを構成する方法

1. MySQLをインストールするこの記事はAPT経由でインストールされており、インストールされてい...

Unicode署名BOMによる事故原因の分析

ここでは、通常ヘッダーとフッターに対して行われるインクルード ファイルを使用している可能性があります...