以前にVUEフレームワークについて少し知っていました。ここでは、簡単に忘れて知らない知識をいくつか記録します
1.vueはプログレッシブjsフレームワークです
2.宣言データの表示に加えて、既存の変数をポイントすることもでき、デフォルトで双方向バインディングが確立されています。いずれかを変更すると、もう一方も変更されます。
var myData = {a：1};
var app = new Vue（{
the： '＃app'、
data：myData
}）;
console.log（app .a）// 1
//属性を変更します。元のデータも変更されます
app .a = 2;
console.log（myData .a）// 2
//元のデータが変更され、属性値も変更されます
myData .a = 3;
console.log（app .a）// 3
3.ライフサイクル
大きく3つのカテゴリーに分かれています（公式サイトを中心に、公式サイトとは若干異なる場合があります）：
create：インスタンスの作成後に呼び出され、データ検出はこの段階で完了しますが、マウントされていません。$ elはまだ利用できません。データを初期化する必要がある場合に役立ちます。
マウント：インスタンスにマウントされた後に呼び出されます。通常、最初のビジネスロジックはここから始まります。
beforeDestory：インスタンスが破棄される前に使用されます。主に、addListenerを使用してイベントをリッスンする一部をバンドル解除します。
4.v-pre {{}}タグを表示するときに使用します
5.フィルター-フィルター
直列に接続でき、パラメータも受け入れることができます
//タンデム
{{メッセージ| fiter1 | filter2}}
//パラメータを受け入れる
{{メッセージ| er a、b）}}
6.計算された属性---計算済み
6.1すべての計算された属性にはゲッター（読み取り属性）とセッター（設定属性）属性が含まれます
計算された：{
フルネーム：{
get：function（）{}
set：function（newValue）{}
}
}
6.2計算された属性の依存関係キャッシュ（houseメソッドのメソッドとは異なる点）：計算された属性が依存するデータが変更されると、彼は再評価します。テキストが変更されない限り、計算された属性は更新されません。
7.方法と計算の違い
キャッシュに依存することに加えて、（）を呼び出すときにメソッドmethodを追加する必要があり、計算は必要ありません。
8.オブジェクト構文または配列構文は、クラスをコンポーネントにバインドします
<component：class = '{active：isActive}'> </ component>
<component：class = '[{active：isActive}、errorclass]'> </ component>
9.基本的な手順（他の人は記録せず、自分の死角のみを記録する）
v-clock：式は不要、display：noneと組み合わせて使用、1つの文を追加するだけ：[v-clock] {display：none}
ページのフラッシュによるページ初期化の遅延の問題を解決することをお勧めします。これは単純なプロジェクトには実用的ですが、webpack、vue-routerなどのエンジニアリングプロジェクトがあります。プロジェクトのHTML構造には、空のdiv要素しかありません。残りの部分はコンテンツはすべて、さまざまなコンポーネントをマウントするルーティングによって行われるため、v-clockは必要ありません。
10. HTMLでテンプレートを使用できます：v-if、v-for、v-show（使用できません）
<div id = "app>
<template v-if = "index == 1">
<p> </ p>
</テンプレート>
</ div>
11.フィルタリングとソート
元の配列を変更したくない場合、配列のコピーを使用して表示をフィルター処理して並べ替える場合は、calculatedプロパティを使用して、フィルター処理され並べ替えられた配列を返すことができます。
<div id = "app>
<ul>
<template v-for = 'book in fiterbook'>
<li>书名：{{book.name}} </ li>
</テンプレート>
</ ul>
</ div>
<スクリプト>
var app = new Vue（{
el： "＃app"、
データ：{
本：[{name： '"vue.js実際の戦闘"}}
}、
計算：{
fitersbook：function（）{
this.books.fiter（function（books）{を返す
戻りbooks.name.match（/ javascript /）
）}
}
}
}）
</ script>
12. v-forレンダリングの場合、vueはすべての更新ではなく、更新が必要なもののみを更新し、パフォーマンスを向上させます
ただし、例外があり、以下の変更された配列では、vueを検出できず、ビューの更新がトリガーされません。
app.books [3] = {}など、アイテムをインデックスから直接設定します
app.books.length = 0など、配列の長さを変更します
解決する：
最初の質問（2つの方法）：
（1）組み込みのsetメソッドを使用する
a：Vue.set（app.books.3、{
名前： '"Cssシークレット" "、
著者Lea 'Lea Verou'
}）
b。webpackでコンポーネント化されたメソッドを使用する場合、デフォルトでインポートされるvueはないため、$ setを使用できます
this。$ set（app.books、3、{}）（これは現在のVueインスタンスを指します）
c。非Webpackモードで$セットを使用することもできます。
解決するd.splice
app.books.splice（3,1、{}）
2番目の質問：app.books.splice（1）
13. vモデル修飾子
（1）。レイジーは変更イベントで同期するように変更され、データはリアルタイムで変更されず、フォーカスが失われたとき、またはEnterキーを押したときにのみ更新されます
（2）。トリム修飾子は、入力された最初のスペースを自動的にフィルタリングできます
14.コンポーネントの登録
グローバルコンポーネント：このコンポーネントを親インスタンスで使用するには、インスタンスを作成する前にコンポーネントを登録する必要があります
<div id = "app">
<my-component> </ my-component>
</ div>
<スクリプト>
Vue.component（{
テンプレート： '<div> hahahhahha </ div>'
）}
var app = new Vue（{
the： '＃アプリ'
}）
</ script>
15. vueコンポーネントテンプレートは、HTMLによって制限される場合があります。たとえば、<table>は、<tr>、<td>、<th>などのこれらのテーブル要素の使用のみを許可するため、<table>でコンポーネントを直接使用すると、無効です。解決策：special is属性を使用してコンポーネントをマウントする
<div id = "app">
<表>
<tbody is = 'my-component> </ tbody>
</ table>
</ div>
<スクリプト>
Vue.component {'my-component'、{
テンプレート： '<div> sffsfsgg </ div>'
}
var app = new Vue（{
the： '＃アプリ' '
}）
</ script>注：tbodyがレンダリングされると、コンポーネントのコンテンツで置き換えられます。一般的な制限要素は、<ul>、<ol>、<select>です。
16.スコープスロット
スロットは、単一スロット、名前付きスロット、スコープスロットに分かれています。
<div id = 'app'>
<children-component>
<template scope = 'props>
<p>親コンポーネントのコンテンツ</ p>
<p> {{props.msg}} </ p>
<テンプレート>
</ children-component>
</ div> <script>
Vue.component {'children-componenet、{
テンプレート： `<div class = 'container'>
<slot msg = ``サブコンポーネントのコンテンツ ''> </ slot>
</ div> `
}
var app = new Vue（{
the： '＃アプリ'
）}
</ script>
スロット要素には、コンポーネントにデータを渡すための同様の小道具があります。Msg= "子コンポーネントのコンテンツ"、データはスロットに渡されます。親コンポーネントはテンプレート要素を使用し、scop = 'props'機能がありますここで、propsは単なる一時変数です。-for= 'item in items'について考えてください。テンプレート内のアイテムは、テンプレートの一時変数propsを介してサブコンポーネントスロットからデータメッセージにアクセスできます。
17.名前付きスロットにアクセスできます。$ Slot.defaultから$ slotには、名前付きスロットに含まれていないすべてのノードが含まれます
18.コンポーネントの高度な使用法
（1）。再帰的なコンポーネント
コンポーネントに名前オプションが設定されている限り、コンポーネントは自分のテンプレートで再帰的に呼び出すことができます
Vue.component（{
名前： '子コンポーネント'
テンプレート： `<div class = 'child'>
<子コンポーネント
：count = 'count + 1'
v-if = 'count <3'> </ child-component>
</ div> `
}）
（2）。インラインテンプレート
コンポーネントを使用する場合は、コンポーネントラベルに「インラインテンプレート」機能を使用します。コンポーネントは、コンテンツの配布ではなく、コンテンツをテンプレートとして使用するため、テンプレートがより柔軟になります。
<div id = 'app'>
<子コンポーネントのインラインテンプレート>
<div>
<h2>親コンポーネントで子コンポーネントのテンプレートを定義する</ h2>
<p> {{msg}} </ p> //親コンポーネントの変数
<p> {{message}} </ p> //サブコンポーネントの変数
</ div>
</ child-template>
</ div>
<スクリプト>
Vue.component（ 'child-component'、{
data：function（）{
return（
msg： 'サブコンポーネントで宣言されたデータ'
）
}
}）
var app = new Vue（{
the： '＃app'、
データ：{
メッセージ：「親コンポーネントで宣言されたデータ」
}
}）
</ script>
親コンポーネントで宣言されたデータメッセージと子コンポーネントで宣言されたデータメッセージの両方をレンダリングできます（同じ名前が使用されている場合、子コンポーネントのデータが推奨されます）が、これはインラインテンプレートの欠点です-スコープは理解しにくいです非常に特殊な使用シナリオでは、インラインテンプレートを簡単に使用しないことをお勧めします。
（3）動的コンポーネント
vue.jsは、Is機能を使用してマウントするコンポーネントを選択することで、さまざまなコンポーネントを動的にマウントするための特別な要素<component>を提供します
<component is = 'template-one'> </ component>
（4）。非同期コンポーネント
パフォーマンスの問題。最初にすべてのコンポーネントをロードする必要はありません。さいわい、vue.jsでは、コンポーネントを動的に解析するファクトリ関数としてコンポーネントを定義できます。vue.jsは、コンポーネントをレンダリングする必要がある場合にのみファクトリー関数をトリガーし、後でレンダリングするために結果をキャッシュします。
Vue.component（{
window.setTimeout（funtion（）{
resolve（{
テンプレート： '<div>非同期でレンダリング</ div>'
）}
}、2000）
}）
var app = new Vue（{el： '＃app'}）
19. $ nextTick
リストを非同期に更新する
質問：vueはDOMを更新しますが、DOMは引き続き作成されます。$ nextTickは、DOM更新が完了したときにガイドするために使用されます
Vueは、データの変更を監視するときにDOMを直接更新しませんが、キューを開き、同じイベントループで発生するすべてのデータ変更をバッファーに入れます。不要な計算とDOM操作を回避するために、バッファリング中に重複データが削除されます。次に、次のイベントループティックで、vueはキューを更新し、実際の（重複排除された）作業を実行します。したがって、forループを使用してデータを100回動的に変更します。実際には、最後の変更のみが適用されます。そのようなメカニズムがない場合、DOMは100回再描画するため、オーバーヘッドが大きくなります。
方法：{
getText：function（）{
this.showDay = true;
var text = document.getElementById（ 'div'）。innerHTML
}
}
に：
方法：{
getText：function（）{
this。$ nextTick（function（）{
this.showDay = true;
var text = document.getElementById（ 'div'）。innerHTML
}
}
}
20.X-テンプレート
<div id = 'app'>
<my-component> </ my-component>
<script type = 'text X-Template' id = 'my-component'>
<p>これはコンポーネントのコンテンツです</ p>
</ script>
</ div>