1. ディレクトリ構造を暗唱する
1.Vueインスタンスを作成する
2.Vueオプション名(8種類)
3. Vue インスタンスのマウント要素
4. Vue インスタンスのバインディング データ
5. vue.js が提供するインスタンスのプロパティとメソッド
6. データバインディング
(1) テキスト補間
(2) HTMLコンテンツを出力する
(3) HTML属性のバインド
(4) HTML 属性をバインドするための省略表現
7. フィルター
(1) 表明フォーム
(2) グローバルフィルターを定義する
(3) ローカルフィルタの定義
8. 状態判定命令
(1) 単一要素判定
(2) 要素群の判定
9. ループ命令
(1) 配列の走査命令と2つの使用形態
(2) 一連の要素をループする
(3) トラバースオブジェクトの使用形態
(4) 整数の走査
10. 配列の更新方法
11. 計算された属性の定義と形式
12. リスニング属性と計算属性の違い（2点）
13. 監視属性の定義と使用方法
14. クラス属性のバインディング
(1) インラインバインディング
(2) 非インラインバインディング
15. スタイルバインディング
(1) インラインバインディング
(2) 非インラインバインディング
16. イベント監視の指示と略語
17. フォーム要素の双方向バインディング命令
18. バインドチェックボックス
(1) 単一のチェックボックスのバインド
(2) 複数のチェックボックスのバインディング
19. v-model モディファイア
(1) 遅延同期
(2) ユーザー入力を数値型に変換する
(3) 入力文字列の先頭と末尾のスペースをフィルタリングする
20. カスタム命令の登録
(1) グローバルカスタム命令とサンプルの登録
(2) ローカルカスタム命令の登録
21. カスタム命令でよく使用されるフック関数
22. コンポーネントの登録
(1) グローバルコンポーネントとサンプルの登録
(2) ローカルコンポーネントの登録
(3) コンポーネントのデータとテンプレートのオプション
23. 親コンポーネントはデータを子コンポーネントに渡します
24. 動的Propを渡す方法と例
25. 親コンポーネントは子コンポーネントの情報と例を受け取ります
26. コンテンツ配信の定義
27. スロットの使用例
(1) 基本的な使い方
(2) 名前付きスロット
28. 一般的に使用される vue コンポーネント宣言サイクル関数
29. 動的コンポーネントのメソッド
30. コンポーネントを動的に切り替えた場合の状態保存方法
31. ルーティング、データリクエスト、状態管理を実装するプラグインの名前
32. vue-routerの役割
33. vue-routerの基本的な使い方
34. ネスティングルーティングの方法
35. Vue の組み込みダイナミック ナビゲーション メソッド
36. ルーティングビューでのマルチインターフェース表示方法
37. Axiosのgetリクエストメソッドが返す成功/失敗とその対応例
38. vuexの役割
39. vuex におけるストアの役割と組み込み
40. vuex の動作原理
41. vuex の ...mapState 関数と ...mapActions 関数
-------------------------------------------------- -------------------------------------------------- ------------
2. 対応内容
1.vueインスタンスを作成する
var vm=新しい Vue({})
2.Vueオプション名(8種類)
el / データ / メソッド / 計算 / ウォッチ / フィルター / ディレクティブ / コンポーネント
3. Vue インスタンスのマウント要素
el オプションを使用します (例: el: "#app")
4. Vue インスタンスのバインディング データ
データオプションを使用する
5. vue.js が提供するインスタンスのプロパティとメソッド
vm.$data.company など、プレフィックスが $ の場合
6. データバインディング
(1) テキスト補間
{ { message }} などの、{ {}} 二重中括弧タグを 使用します 。
(2) HTMLコンテンツを出力する
v-html="message" などの v-html ディレクティブを使用します。
(3) HTML属性のバインド
テキスト補間を直接使用することはできません。v-bind:src="src" などの v-bind:attribute 命令を使用する必要があります。
(4) HTML 属性をバインドするための短縮形式
: 属性、例: src="src"
7. フィルター
(1) 表明フォーム
{ { message | myFilter }}のように、パイプ記号「|」で示されます。
(2) グローバルフィルターを定義する
Vue.filter(ID, function(){})
(3) ローカルフィルタの定義
Vue によって作成されたコンストラクターでフィルター オプションを適用します。
8. 状態判定命令
(1) 単一要素判定
v-if / v-else / v-else-if
例: <p v-if="a<b">
(2) 要素群の判定
<template> 要素をラッパー要素として使用する
例: <template v-if="show">
9. ループ命令
(1) 配列の走査命令と2つの使用形態
v-for ディレクティブ
使用形式：v-for=”item in items” / “(item, index) in items”
(2) 一連の要素をループする
<template> 要素をラッパー要素として使用する
<template v-for=”項目内の項目”>
(3) トラバースオブジェクトの使用形態
v-for=”オブジェクト内の値” / v-for=”オブジェクト内の(値, キー)”
(4) 整数の走査
v-for=”n in 5”
10. 配列の更新方法
プッシュ() / ポップ() / シフト() / アンシフト() / スプライス() / ソート() / リバース()
例: vm.items.push()
11. 計算された属性の定義と形式
計算された属性で定義され、属性が依存するデータが変更されると属性値が更新され、属性に依存するデータ バインディングも更新されます。
例えば：
計算結果: {
newstr: function(){}
}
12. リスニングプロパティとコンピューティングプロパティの違い
- 計算されたプロパティの値は computed で定義され、リスナーは data で定義されます。
- 計算されたプロパティの値はキャッシュできますが、監視対象のプロパティは毎回計算されます。
13. 監視属性の定義と使用方法
監視対象のプロパティが変更されるたびに、特定のアクションが実行されます。
使用方法: watch オプションで定義するか、インスタンス メソッド vm.$watch() を使用します。
14. クラス属性のバインディング
(1) インラインバインディング
要素のクラス属性をオブジェクトの形式に直接バインドします。
v-bind:class=”{active: isActive}”
(2) 非インラインバインディング
data オプションで要素の class 属性にバインドされるオブジェクトを定義します
v-bind:class=”クラスオブジェクト”
15. スタイルバインディング
(1) インラインバインディング
要素のスタイルプロパティをオブジェクトに直接バインドします。
v-bind:style=”{fontWeight: ウェイト}”
(2) 非インラインバインディング
data オプションで要素の style 属性にバインドされるオブジェクトを定義します。
v-bind:style=”styleObject”
16. イベント監視コマンドの形式と略称
v-on ディレクティブ
例: v-on:click="show" または @click="show"
17. フォーム要素の双方向バインディング命令
v-model ディレクティブ
18. バインドチェックボックス
(1) 単一のチェックボックスのバインド
v-model を使用してブール値をバインドします
例えば：
<input type=”checkbox” v-model=”checked”>
次に、データオプションをチェックインしました: false
(2) 複数のチェックボックスのバインディング
v-model を使用して配列をバインドする
例えば：
<input type=”checkbox” value=”A” v-model=”brand”>
<ラベル>A</ラベル>
<input type=”checkbox” value=”B” v-model=”brand”>
<ラベル>B</ラベル>
次に、データ オプションでブランドを指定します: []
19. v-modelの修飾子
(1) 遅延同期
Lazy 修飾子を追加した後、同期に変更イベントを使用するように変換されます。
(2) ユーザー入力を数値型に変換する
数値修飾子を使用する
(3) 入力文字列の先頭と末尾のスペースをフィルタリングする
トリムモディファイアを使用する
20. カスタム命令の登録
(1) グローバルカスタム命令とサンプルの登録
Vue.directive(id, Definition) メソッドを使用します。定義は特定の命令フック関数です。
例：
Vue.directive('フォーカス', {
挿入: function(el){
el.focus();
}
})
(2) ローカルカスタム命令の登録
ディレクティブオプションにローカルカスタムディレクティブを登録します。
21. カスタム命令でよく使用されるフック関数
bind: ディレクティブが初めて要素にバインドされるときに、1 回だけ呼び出されます。
insert: バインドされた要素が親要素に挿入されるときに呼び出されます。
update: バインド値が変更されたときに呼び出されます
22. コンポーネントの登録
(1) グローバルコンポーネントとサンプルの登録
Vue.component(tagName, options) メソッドを使用します。
例：
Vue.component('私のコンポーネント', {
テンプレート: '<div> グローバル コンポーネントの登録</div>'
})
(2) ローカルコンポーネントの登録
コンポーネントオプションに部分コンポーネントを登録します。
(3) コンポーネントのデータとテンプレートのオプション
コンポーネントのデータ オプションはオブジェクトではなく関数である必要があります。
templateはhtmlのページ情報です
23. 親コンポーネントはデータを子コンポーネントに渡します
これは Prop 関数によって実現されます。
子コンポーネントは props オプションを使用して明示的に Prop を宣言する必要があり、親要素はこの属性を通じて子コンポーネントにデータを渡します。
24. 動的Propを渡す方法と例
親コンポーネントのデータは、v-bind を通じて子コンポーネントに渡されます。
例：
<my-component v-bind:boxoffice=”boxoffice_data”>
25. 親コンポーネントは子コンポーネントの情報と例を受け取ります
子コンポーネントは、組み込みの $emit() メソッドを呼び出してイベント名を渡すことによってカスタム イベントをトリガーし、親コンポーネントは v-on を通じて子コンポーネント インスタンスのカスタム イベントをリッスンします。
Emit メソッドの形式:
vm.$emit(イベント名, パラメータ)
親コンポーネントは、$event を通じて渡されたパラメータにアクセスします。
例：
サブコンポーネント内:
this.$emit('拡大', 値);
親コンポーネント内:
v-on:enlarge=”fontSize += $even”
26. コンテンツ配信の定義
Vue.js が提供する親コンポーネントのコンテンツと子コンポーネントのテンプレートを混合する方法。
子コンポーネントの <slot> 要素を元のコンテンツのスロットとして渡します。
27. スロットの使用例
(1) 基本的な使い方
親要素:
<my-slot>{ { メッセージ }} </my-slot>
サブアセンブリ:
<slot></slot> をテンプレートに追加します
親コンポーネントの {message}} は、レンダリング時に 子コンポーネントの <slot> タグを置き換えます。
(2) 名前付きスロット
コンポーネント テンプレートで複数のスロットを使用するには、<slot> 要素の name 属性を使用する必要があります。v-slot ディレクティブは、名前付きスロットにコンテンツを提供するときに <template> 要素で使用できます。v-slot ディレクティブのパラメーターは、子コンポーネントのスロット要素の名前の値と一致する必要があります。
親要素:
<マイスロット>
<テンプレート v-スロット:タイトル>
{ { タイトルデータ }}
</テンプレート>
</my-slot>
サブアセンブリ:
<slot name="title"></slot> をテンプレートに追加します
28. 一般的に使用される vue コンポーネント宣言サイクル関数
created: インスタンスの作成後に呼び出されます
Mounted: el が新しく作成された vm.$el に置き換えられ、インスタンスにマウントされるときに呼び出されます。
updated: データが変更されたときに呼び出されます
29. 動的コンポーネントのメソッド
<component> 要素を使用して is 属性に動的にバインドし、is 属性の値に基づいて使用するコンポーネントを決定します。
30. コンポーネントを動的に切り替えた場合の状態保存方法
切り替えられた状態をメモリ内に保持してレンダリングの繰り返しを避けるには、 <keep-alive> 要素を使用して動的コンポーネントをラップします。
31. ルーティング、データリクエスト、状態管理を実装するプラグインの名前
ルーティング管理: vue-router
データリクエスト: axios
状態管理: vuex
32. vue-routerの役割
各パスを対応するコンポーネントにマッピングし、ルーティングを通じて各コンポーネント間を切り替えます。
33. vue-routerの基本的な使い方
(1) ページ面
router-link を介して移動します。to 属性はリンクを指定します。
次に、ルーティング出口 router-view を設定します。
（2）脚本端
ルーティングコンポーネントを定義する
ルートを定義する
var Route = [{パス: '/first'、コンポーネント: first}]
ルーターインスタンスを作成する
var router = new VueRouter({routes});
ルートインスタンスをマウントする
var app = new Vue({router}).$mount('#example');
34. ネスティングルーティングの方法
ルートを再定義する場合は、パスとコンポーネントの情報に加えて、子の情報を追加します。パスやコンポーネントの情報も子にあります。
35. Vue の組み込みダイナミック ナビゲーション メソッド
this.$router.push({name: '<url-name>'})
36. ルーティングビューでのマルチインターフェース表示方法
ルータービューに名前情報を追加
例えば：
<router-view name=”left”></router-view>
<router-view name=”right”></router-view>
37. Axiosのgetリクエストメソッド、リターン成功・失敗処理とその対応例。
axios.get()
.then(関数(応答){コンソール.ログ(応答.データ);})
.catch(関数(エラー){コンソール.ログ(エラー);})
38. vuex の役割:
コンポーネントの状態の変化は他のコンポーネントに影響を与えるため、コンポーネントもそれに応じて変更されます。
39. vuex におけるストアの役割と組み込み
アプリケーション全体で共有する必要があるデータまたは状態情報を保存するために使用されます。
含まれる情報は次のとおりです。
状態: 定義された状態情報
ゲッター: 計算されたプロパティと同等
突然変異: 状態を変更するための突然変異関数を定義します。
アクション: ミューテーションでメソッドを送信して状態を変更するアクションを定義します。
40. vuex の動作原理
Vue コンポーネントのディスパッチ メソッドを通じてアクションをトリガーし、アクションの commit メソッドを通じてミューテーションを送信し、ミューテーションに対応する関数を通じて新しい状態値を変更すると、vuex は新しい状態値をコンポーネントにレンダリングします。
41. vuex の ...mapState 関数と ...mapActions 関数
...はオブジェクト エクスパンダです。つまり、その後に展開可能な配列が続きます。
mapState 関数は、ストア内の状態をマップする配列オブジェクトを返します。このオブジェクトは、this.$store.state を通じてストア内の状態データを 1 つずつ取得する必要がなく、テンプレート内で直接使用できます。
例:
computed:{ ...mapState(['name', 'age']) // state の名前と同じ、name、age をテンプレートで直接使用できます}
それ以外の場合、計算されたプロパティ:
name: state => this.$store.state.name
age: state => this.$store.state.age
したがって、store.js と同じ名前の場合、mapState を使用すると記述が簡素化されます。
mapActions ツール関数は、ストア内のディスパッチ メソッドをコンポーネントのメソッドにマップします。
例:
...mapActions([
'logoutAction'
])
mapActions が使用される場合、次のように記述されます:
logoutAction(){ this.$store.dispatch('logoutAction') }したがって、store と同じ名前の場合.js では、mapActions を使用すると書き込みが簡素化されます。