1.MVVMの理解
MVVMのフルネームはModel-View-ViewModelです。
モデルはデータモデルを表します。データとビジネスロジックはモデルレイヤーで定義されます。これは通常、バックエンドで実行されるさまざまなビジネスロジック処理とデータ操作を指し、フロントエンドの場合は、バックエンド。ビューはUIビューを表し、データの表示を担当します。ビューレイヤーはユーザーインターフェイスです。フロントエンドは主にHTMLとCSSで構成されています。ViewModelは、モデル内のデータ変更を監視し、ビューの更新を制御し、ユーザー操作操作を処理する役割を果たします。
Vueはデータ駆動型であり、Vue自体のDOMとデータバインディング、作成されたバインディング、DOM、およびデータは同期され、データが変更されるたびにDOMの変更が続きます。ViewModelはVueのコアであり、Vueのインスタンスです。Vueインスタンスのスコープ内の特定のHTML要素のHTML要素は、本体または特定のIDによって参照される要素にすることができます。
2つ、vueの一般的な手順
1. v-text v-textは、主にtextContentを更新するために使用されます。これは、JSのtext属性と同等です。
<span v-text = "name"> </ span>
または
<span>補間式{{name}} </ span>
2. v-htmlは、JSのinnerHtml属性と同等です。
<div v-html = "content"> </ div>
3. v-cloakは、関連するインスタンスが終了するまで要素を保持して、ちらつきの問題を解決するためにコンパイルするために使用されます。
<div id = "app" v-cloak>
<div>
{{msg}}
</ div>
</ div>
<script type = "text / javascript">
new Vue（{
el： '＃app'、
data： {
msg： 'hello world'
}
}）
</ script>
通常、ページが読み込まれるとちらつき、最初に表示されます。
<div>
{{msg}}
</ div>
コンパイル後にのみ表示されます：
<div> hello world！ </ div>
v-cloakコマンドを使用して、補間式のちらつきの問題を解決し、cssの属性セレクターを使用してv-cloakを表示するように設定できます。
4. v-onceに関連付けられたインスタンスv-onceは、一度だけレンダリングされます。再レンダリング後、インスタンスとそのすべての子ノードはスキップされた静的コンテンツと見なされ、更新のパフォーマンスを最適化するために使用できます。
<span v-once>これは決して変更されません：{{msg}} </ span> //単要素
< divv -once> //有子要素
<h1>コメント</ h1>
<p> {{msg} } </ p>
</ div>
<my-component v-once：comment = "msg"> </ my-component> //組み合わせ件
<ul>
<li v-for = "i in list"> {{i }} </ li>
</ ul>
上記の例では、msg、listが変更されても、再レンダリングされません。
5. v- v-ifが条件付きレンダリングを実現できる場合、Vueは式の値の真と偽の条件に従って要素をレンダリングします
<av-if = "true">表示</a>
6. v-else v-elseはv-ifとともに使用され、v-ifまたはv-else-ifの直後に続く必要があります。そうでない場合は機能しません。
<av-if = "true">表示</a> <av-else>非表示</a>
7. v-else-if v-else-ifは、v-ifのelse-ifブロックとして機能します。これは、チェーン内で複数回使用できます。switchステートメントはより便利に実装できます。
<div v-if = "type === 'A'"> A </ div> <div v-else-if = "type === 'B'"> B </ div> <div v-else- if = "type === 'C'"> C </ div> <div v-else> A、B、Cではない </ div>
8. v-showは、条件に基づいて要素を表示するためにも使用されます。v-ifとは異なり、v-ifの値がfalseの場合、要素は破棄され、domにはありません。ただし、v-showの要素は常にレンダリングされ、domに保存されます。これは、cssのdispaly属性を切り替えるだけです。
<span v-show = "true"> hello world </ span>
注：v-ifの方がスイッチングコストが高く、v-showの方が初期レンダリングコストが高くなります。したがって、頻繁に切り替える場合は、v-showの方が適しています。実行時に条件が変更される可能性が低い場合は、v-ifの方が適しています。
9. v-forは、v-for命令を使用して、トラバーサル配列に従ってレンダリングします。
<div v-for = "（item、index）in items"> </ div> //使用する、indexはオプションのパラメータで、現在のアイテムのインデックスを示します
10. v-bind v-bindは、1つ以上の機能を動的にバインドするために使用されます。パラメータがない場合は、キーと値のペアを含むオブジェクトにバインドできます。多くの場合、クラスとスタイルを動的にバインドするために使用されます。そしてhrefなど。コロンと略されます[：]
<div id = "app">
<div：class = "{'is-active'：isActive、 'text-danger'：hasError}"> </ div>
</ div>
<script>
var app = new Vue（ {
el： '＃app'、
data：{
isActive：true、
hasError：false
}
}）
</ script>
コンパイル後
<div class = "is-active"> </ div>
11. v-modelは、フォームに双方向のデータバインディングを作成するために使用されます
<div id = "app">
<input v-model = "name">
<p> hello {{name}} </ p>
</ div>
<script>
var app = new Vue（{
el： '＃app '、
データ：{
名前：'小明 '
}
}）
</ script>
モデル修飾子は
.lazy（変更イベントで再同期）> v-model.lazy .number（ユーザーの入力値を数値タイプに自動的に変換します）> v-model.number .trim（ユーザーの入力の先頭と末尾のスペースを自動的にフィルタリングします） > v-model .trim
12. v-on v-onは主に、いくつかのコードブロックを実行するためにdomイベントを監視するために使用されます。式はメソッド名にすることができます。省略形：[@]
<div id = "app">
<button @ click = "consoleLog"> </ button>
</ div>
<script>
var app = new Vue（{
el： '＃app'、
methods：{
consoleLog：function（event ）{
console.log（1）
}
}
}）
</ script>
イベント修飾子
.stopは、イベントが伝播し続けるのを防ぎます。preventイベントはページをリロードしなくなりました。captureはイベントキャプチャモードを使用します。つまり、要素自体によってトリガーされたイベントがここで処理され、次に内部要素によって処理されます。 event.targetがisの場合にのみself処理関数は、現在の要素自体のときにトリガーされます。onceイベントは1回だけトリガーされます。Passiveは、イベントのデフォルトの動作を妨げたくないことをブラウザーに通知します。
3. v-ifとv-showの違いは何ですか？
共通点：v-ifとv-showの両方で要素を表示および非表示にできます
違い：
1. v-showは単純な制御要素の表示プロパティであり、v-ifが条件付きレンダリングの場合（条件がtrueの場合、要素がレンダリングされ、条件がfalseの場合、要素が破棄されます）2。v-show has v-ifの最初のレンダリングコストははるかに小さいが、最初のレンダリングコストは高い。3。v-ifのスイッチングコストは高く、v-showのスイッチングコストは低い。4。v-ifのv-else-が一致するifとv-else、およびv-showには5がありません。v-ifはテンプレートで使用できますが、v-showでは使用できません。
第四に、CSSを現在のコンポーネントでのみ機能させる方法は？
コンポーネントスタイルをスコープに追加します
<スタイルスコープ> ... </ style>
5.キープアライブの役割は何ですか？
keep-aliveが動的コンポーネントをラップすると、非アクティブなコンポーネントインスタンスがキャッシュされます。これは主に、コンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。
6.Vueでプラグインを使用する手順
1. ES6のimport…from…構文またはCommonJSdのrequire（）メソッドを使用してプラグインを導入します。2。グローバルメソッドVue.use（plugin）を使用してプラグインを使用すると、オプションオブジェクトVue.use（MyPlugin、{ someOption：true}）
セブン、Vueのライフサイクル
8.Vueコンポーネント間で通信する方法は何ですか
Vueコンポーネント間の通信とは、親子コンポーネント通信、世代間コンポーネント通信、兄弟コンポーネント通信の3種類の通信のみを指します。
9つ目は、計算シナリオと監視シナリオの違いとアプリケーションシナリオです。
計算された：それは他の属性値に依存して計算された属性であり、かつ計算された値がキャッシュされ、それは変化に依存属性値が、時のみ。 計算された値が計算された値が取得され、次回に再計算されます。 見て：一部のデータリスナーコールバックと同様に、「監視」効果の多くは、監視対象の後続の操作 がシナリオを使用するときにデータが変更されるたびにコールバックが実行されます。 数値計算が必要な場合、および他のデータに応じて計算を使用する必要がある場合 必要なデータ変更中に非同期またはコストのかかる操作を実行する場合は、監視を使用する必要があります
10、いくつかのvue-routerルーティングモードがあります
ハッシュ：URLのハッシュ値をルートとして使用します。すべてのブラウザをサポートします。
履歴：HTML5履歴APIとサーバー構成以降。公式ウェブサイトのHTML5履歴モードを参照してください
要約：すべてのjavascript操作モードをサポートします。ブラウザAPIがないことが判明した場合、ルートは自動的にこのモードに強制されます。
11. SPAシングルページの理解、その長所と短所は何ですか
SPA（シングルページアプリケーション）は、Webページが初期化されるときに、対応するHTML、JavaScript、およびCSSのみをロードします。ページがロードされると、SPAはユーザー操作のためにページをリロードまたはジャンプしません。代わりに、ルーティングメカニズムを使用してHTMLコンテンツ変換、UI、およびユーザーインタラクションを実装し、ページの再読み込みを回避します。利点：
1.ユーザーエクスペリエンスは良好で高速です。コンテンツの変更はページ全体をリロードする必要がないため、不要なジャンプや繰り返しのレンダリングを回避できます。2。上記の点に基づいて、SPAはサーバーへのストレスが比較的少なくなります。3。前面の分離-エンドエンドとバックエンドの責任、明確な構造、フロントエンドは相互作用ロジックを実行し、バックエンドはデータ処理を担当します
短所：
1.初期読み込みに時間がかかる：単一ページのWebアプリケーション機能と表示効果を実現するには、ページの読み込み時にJavaScriptとCSSを均一に読み込む必要があり、一部のページはオンデマンドで読み込まれます。および後方ルーティング管理：1つのページが1つに適用されるため、すべてのコンテンツがページに表示されるため、ブラウザーの前方および後方機能を使用できません。すべてのページ切り替えでは、スタック管理を自分で構築する必要があります。3.SEOはより困難です：すべてのコンテンツが動的に置き換えられて1ページに表示されるため、SEOに含まれます。自然な弱点があります。