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インスタンス内のすべてのデータはマウントポイントで使用できます。
-
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);
?> デモ
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の最初のプログラムを書くための勉強ノート
|