[Doit!Vue.js]第2章~03-1章
02章学習ビューの開発環境の設定
本の中の配置の第一選択のパラメータ
vueプロジェクトを作成しました.前の記事を参照してください.
Vueインストールとプロジェクト作成1<-前の記事
Vueインストールとプロジェクト作成2<-前の記事
第3章画面の開発に必要な単位-インスタンスと構成部品
03-1ビューインスタンス
ビューインスタンスの定義とプロパティ
ビューインスタンスは、ビューで画面を開発するために必要な基本単位です.
ビューインスタンスのフォーマットは次のとおりです.new Vue({
...
});
サンプルコード
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
Hello Vue.js! new Vue()を使用して、画面にテキストを表示するビューインスタンスを作成します.
elプロパティを使用して、インスタンス内のビューインスタンスのペイントポイントを指定します.
Dataプロパティでmessage値を定義し、画面上の{message}}に関連付けます.
ビューインスタンス作成者
new Vue()でインスタンスを作成する場合、Vueをジェネレータと呼びます.
ビューライブラリをロードすると、Vue作成者がアクセスできます.
ジェネレータを使用する理由:ビューで開発する場合は、ジェネレータで必要な機能を事前に定義し、ユーザーがこれらの機能を再定義して使用できるようにする必要があります.
作成者とは?
1つの方法は、新しいオブジェクトを作成するときによく使用されるオプションと機能を特定のオブジェクトに予め保存し、新しいオブジェクトを作成するときに既存の機能を簡単に拡張しながら既存の機能を使用することです.
ビューインスタンスオプションのプロパティ
ビューインスタンスオプションプロパティとは、インスタンスの作成時に再定義するデータ、el、templateなどのプロパティです.
上記のサンプルコードでは、dataという事前定義属性が使用されています.
メッセージという名前の新しい属性を追加し、HelloVue.js!この値段をあげました.
elプロパティも予め定義されており、ビューで作成された画面の始点を示しています.
ビューインスタンスを使用してスクリーンをレンダリングする場合は、スクリーンを描画するドーム要素を指定する必要があります.<div id="app">
{{ message }}
</div>
elプロパティのappは、画面上のドーム要素にappという要素があることを示します.new Vue({
el: '#app',
});
ここで#セレクタはCSSのセレクタルール
CSSセレクタの#セレクタは、このIDを持つドーム要素を検索するために使用されます.
選択者は、クラスを持つドーム要素を検索するために使用します.
その他のプロパティー
属性説明テンプレート画面に表示するHTML、CSSなどの寸法要素を定義する属性、ビュー内のデータ、およびその他の属性を画面に描画できます.「≪メソッド｜Method｜emdw≫」は、スクリーン論理制御に関連付けられたメソッドのプロパティを定義するために使用されます.プロパティ.プロパティは、マウス・クリック・イベント処理などのスクリーン全体のイベントと、作成直後に実行されるスクリーン動作に関連する論理追加作成ビュー・インスタンスを定義するために使用されます.
ビューインスタンスの有効範囲
ビューインスタンスの有効範囲は?
ビューインスタンスを作成する場合、オプション属性はHTMLの特定の範囲内にのみ表示されます.
インスタンスの有効範囲はelプロパティに関連しています.
new Vue({
...
});<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html><div id="app">
{{ message }}
</div>new Vue({
el: '#app',
});ライブラリファイルのロード->インスタンスオブジェクトの作成->インスタンスを特定のスクリーン要素にペースト->インスタンス内容をスクリーン要素に変換->ユーザーが最終的に決定した変換スクリーン要素は
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});ブラウザで上記のコードを実行すると、次のようにelプロパティで指定したスクリーン要素(ドーム)にインスタンスがアタッチされます.
インスタンスをelプロパティにアタッチすると、インスタンスで定義されたオプションオブジェクトの内容が、elプロパティに指定されたスクリーン要素とその次のレベルのスクリーン要素に適用され、値が値に変換されます.
データ属性のメッセージ値HelloVue.js!に置き換えられます.
上のコードは下のように変わります.
<div id="app">
Hello Vue.js!
</div>検証インスタンスの有効範囲
インスタンスの有効範囲を超えたらどうなりますか?
<div id="app">
</div>
{{ message }}ビューインスタンスのライフサイクル
インスタンスのステータスに基づいて呼び出されるプロパティをライフサイクルプロパティと呼びます.
各ライフサイクル属性で実行されるベンチマークロジックをライフサイクル(hook)と呼びます.
created、beforeCreate、beforeMount、mounted、beforeUpdate、update、beforeDestiny、破棄の計8
ライフサイクルの段階は大きく4つの段階に分かれています.
1.作成
2.付着
3.更新
4.消滅
アタッチ->更新セグメントは、データが変更された場合にのみ実行されます.
beforeCreate
インスタンスを作成して最初に実行するライフサイクルフェーズ.
この手順では、データ属性とメソッド属性はインスタンスで定義されておらず、ドームなどのスクリーン要素にもアクセスできません.
created
作成前のライフサイクルフェーズの後に実行する手順
データ属性とメソッド属性が定義されています.
this.データまたはthis.論理は、fetchData()のような論理アクセスデータ属性およびメソッド属性で定義された値を使用して実行することができる.
テンプレートのプロパティで定義されたドーム要素は、インスタンスがスクリーンにアタッチされるまでアクセスできません.
beforeMount
作成後にtemplateプロパティに指定した寸法プロパティをrender()関数に変換し、elプロパティで指定したスクリーン要素(ドーム)にインスタンスをアタッチする前に呼び出す手順.
render()関数呼び出し前のロジックの追加
スクリーンドームの関数をrender()JavaScriptで描画します.
mounted
elプロパティで指定したスクリーン要素にインスタンスをアタッチして呼び出す手順.
templateプロパティで定義されたスクリーン要素(ドーム)にアクセスして、スクリーン要素の論理を制御する最適な手順を実行します.
インスタンスがドームにアタッチされると呼び出されるため、サブコンポーネントまたは外部ライブラリで追加されたスクリーン要素が最終HTMLコードに変換された時点とは異なる場合があります.
beforeUpdate
インスタンスがelプロパティで指定した画面要素に委任されると、インスタンスで定義したプロパティが画面に変換されます.
変換されたGOT共動は$watch属性で監視され、ビューの反応性を提供する.データ観測
updated
データ変更後に仮想ドームに再描画した後に実行する手順.
データ変更後のスクリーン要素制御に関連するロジックをよく追加します.
この手順では、データ値を変更すると無限ループに陥る可能性があるため、値を変更するにはcomputedやwatchなどのプロパティを使用する必要があります.
データ値を変更するロジックは、できるだけ更新前に追加します.
データを変更する画面要素の追加に関するロジックの更新を推奨します.
beforeDestory
ビューインスタンスが破壊される前に呼び出されたステップにアクセスできます.
ビューインスタンスデータを削除するには
destoryed
ビューインスタンスが破壊され、呼び出されるには
ビューインスタンスで定義されたすべてのプロパティが削除され、サブアイテムに宣言されたすべてのインスタンスも破壊されます.
ソース:Vue公式ホームページ
Reference
この問題について([Doit!Vue.js]第2章~03-1章), 我々は、より多くの情報をここで見つけました https://velog.io/@gudwnsepdy/Do-it-Vue.js-2장-3장テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol