今回は、Vue の基本原理とコンポーネント間の通信についてお届けします。Vue の基本原理とコンポーネント間の通信の注意点について、実際の事例を見てみましょう。
vue の基本原理?
vue コンポーネント間の通信?
JS のデータ型を決定するメソッドはいくつありますか?
最も一般的な決定方法: typeof
既知のオブジェクトの型を決定するメソッド:instanceof
オブジェクトのコンストラクターに基づいて判断します:コンストラクター
無敵で全能のメソッド: jquery .type()
vueとangularの違いは?
1.vueはmvvmの単なるビューレイヤーであり、フレームワークではなく、jqueryのような単なるツールライブラリです、angular は mvvm フレームワークです。
2. Vue の双方向ボンディングは、ES5 の 3. getter/setter に基づいて実装されますが、angular は、いわゆる「ダーティ」チェックを必要とする独自のテンプレート コンパイル ルールのセットを実装しますが、vue は必要ありません。したがって、Vue はパフォーマンスの点でより効率的ですが、IE9 より前のブラウザではサポートされないという代償を伴います。
4.vue はインスタンス化のために el オブジェクトを提供する必要があり、後続のすべてのスコープも el オブジェクトの下にありますが、angular は HTML ページ全体です。ページには複数の Vue インスタンスを含めることができますが、Angular はこのようには機能しないようです。
5.vue は始めるのが非常に簡単で、学習コストも比較的低いですが、公式ドキュメントは比較的単純で、包括的な使用例があまりありません。高度な使い方をするには、少なくとも現時点では、ソース コードを自分で調べる必要があります。
angular ダーティ チェックについての理解について教えてください。
Angular では、データが変更されたかどうかを判断できないため、いくつかの条件を設定します。これらの条件をトリガーすると、すべてのデータを走査し、変更された場所を比較して、変更を実装します。
このテストは非常に非科学的です。そして効率は高くなく、冗長な箇所が多いため、正式にはダーティチェックと呼ばれています。
active-class はどのコンポーネントのプロパティですか?
vue-router モジュールの router-link コンポーネント。
ネストされたルーティングを定義するにはどうすればよいですか?
実際のプロジェクトでは、ネストされたコンポーネントの複数の層に遭遇しますが、ネストされたルーティングはどのように実装すればよいでしょうか?したがって、ルーティングのネストを適切に実装できるように、VueRouter のパラメーターで子の設定を使用する必要があります。
index.html には、ルーティング アウトレット
<p id="app">
<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</p>
ログイン後にコピー
main.js が 1 つだけあります。ルーティングのリダイレクトは、ページが読み込まれるとすぐにホーム コンポーネントを表示します。これは、リダイレクトがホーム コンポーネントを指し、リダイレクトがポイントするためです。 to パスと一致している必要があります。子の中にサブルートがあります。もちろん、サブルートをサブルートの中にネストすることもできます。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home组件
{
path: "/home", component: home,
children: [
{ path: "/home/game", component: game }
]
}
]
//创建路由实例
const router = new VueRouter({routes})
new Vue({
el: '#app',
data: {
},
methods: {
},
router
})ログイン後にコピー
home.vue で [表示] をクリックすると、サブルートが表示されます。サブルートの出口は親ルート内にある必要があります。そうでない場合、サブルートは表示できません。
<template>
<p>
<h3>首页</h3>
<router-link to="/home/game">
<button>显示<tton>
</router-link>
<router-view></router-view>
</p>
</template>
ログイン後にコピー
game.vue
<template>
<h3>游戏</h3>
</template>
ログイン後にコピー
vue-router の動的ルーティングを定義するにはどうすればよいですか?渡された動的パラメータを取得するにはどうすればよいですか?
ルーターディレクトリ内のindex.jsファイルで、path属性に/:idを追加します。
ルーターオブジェクトのparams.idを使用します。
vue-router にはどのような種類のナビゲーション フックがありますか?
3 つのタイプ、
1 つ目: これはグローバル ナビゲーション フック: router.beforeEach(to,from,next) で、その機能はジャンプする前に判断してインターセプトすることです。
2 番目のタイプ: コンポーネント内のフック
3 番目のタイプ: 排他的なコンポーネントを個別にルーティングする
scss とは何ですか? vue.cli のインストールと使用手順は何ですか?その主な特徴は何ですか?
CSSの事前コンパイル。
使用手順:
ステップ 1: npm を使用して 3 つのローダー (sass-loader、css-loader、node-sass) をダウンロードします。
ステップ 2: ビルド ディレクトリで webpack.base.config を見つけます。 js で、extensions 属性に extension.scss を追加します
ステップ 3: 同じファイル内でモジュール属性を設定します
ステップ 4: 次に、コンポーネントの style タグに lang 属性を追加します。例: lang= scss の主な機能は何ですか?巣作りができる
ミントウイとは何ですか?使い方？コンポーネントの使用方法を少なくとも 3 つ挙げてください。
Vue ベースのフロントエンド コンポーネント ライブラリ。 npm をインストールし、スタイルと js をインポートすると、vue.use (mintUi) がグローバルに導入されます。単一コンポーネントでローカルに導入されます: 「mint-ui」から {Toast} をインポートします。
コンポーネント 1: トースト (「ログイン成功」);
コンポーネント 2: mint-header;
コンポーネント 3: mint-swiper
v-model とは?使い方？ Vue でイベントをタグにバインドするにはどうすればよいですか?
双方向バインディング、命令(v-class、v-for、v-if、v-show、v-on)を実現できます。 vue のモデルレイヤーのデータ属性。バインディング イベント:
iframe の長所と短所は何ですか?
iframe は埋め込みフレームとも呼ばれ、フレーム付き Web ページに似ており、Web ページのフレームとコンテンツを既存の Web ページに埋め込むことができます。
利点:
アイコンや広告などのサードパーティコンテンツの読み込みが遅いという読み込みの問題を解決
セキュリティサンドボックス
スクリプトの並列読み込み
ナビゲーションバーの作成に便利
欠点:
iframeがOnloadをブロックしますメインページのイベント
インスタントコンテンツは空であり、ロードに時間がかかります
セマンティクスがありません
SassとLessについて簡単に説明し、違いを説明してください?
それらは、動的スタイル言語、CSS プリプロセッサ、CSS 上の抽象化レイヤーです。これらは、特別な構文/言語を使用して CSS にコンパイルされます。
変数記号は異なります。less は @、Sass は $;
Sass は条件文をサポートしており、if{}else{}、for{} ループなどを使用できます。 Less はサポートしていません。
Sass は Ruby ベースでサーバー側で処理されますが、Less は Less コードを処理してブラウザに CSS を出力するには、less.js を導入する必要があります
axios とは何ですか?使い方？これを使用してログイン機能を実装するプロセスについて説明してください。
バックグラウンドリソースを要求するモジュール。 npm install axios -S がインストールされ、ドメイン間で送信されます。これは、構成ファイル config/index.js で設定する必要があります。背景がTp5の場合、リソースルートを定義します。 js で import を使用してから、.get または .post を使用します。成功した場合は .then 関数で返され、失敗した場合は .catch 関数で返されます
axios+tp5 の進化では axios.post('api/user を呼び出す操作は何ですか。 ')？ axios.put(‘api/user/8’) はどうでしょうか?
クロスドメイン、ユーザー操作の追加、操作の更新。
vuexとは何ですか?使い方？どの機能シナリオで使用されますか?
vue フレームワークでの状態管理。 main.jsにstoreを導入して注入します。新しいディレクトリ ストアが作成され、エクスポートされます。シナリオには次のものが含まれます。 シングルページ アプリケーション内のコンポーネント間のステータス。音楽の再生、ログイン状況、ショッピングカートに追加
mvvmフレームワークとは何ですか?他のフレームワーク（jquery）との違いは何ですか？どのシナリオが適していますか?
model+view+viewModel フレームワーク、データ モデル モデル、viewModel は 2 つの
を接続します。 違い: Vue データ駆動型で、ノード操作ではなくデータを通じてビュー レイヤーを表示します。
シナリオ: 大量のデータ操作を含むシナリオ、より便利
命令 (v-check、v-focus) をカスタマイズする方法は何ですか?どのようなフック機能がありますか?他のフック関数のパラメータは何ですか?
グローバルに定義されたディレクティブ: vue オブジェクトのディレクティブ メソッドには 2 つのパラメーターがあり、1 つはディレクティブ名、もう 1 つは関数です。コンポーネントで定義された命令: ディレクティブ
フック関数:bind (バインディングイベントによってトリガーされる)、inserted (ノードの挿入時にトリガーされる)、update (コンポーネント内の関連する更新)
フック関数パラメーター: el、binding
Name at少なくとも 4 Vue の指示とその使用法は何ですか?
v-if: 非表示にするかどうかを決定します; v-for: データをループアウトします; v-bind:class: 属性をバインドします; v-model: 双方向バインディングを実装します
vue-router とは何ですか?どのようなコンポーネントが含まれていますか?
vue はルーティングを記述するために使用されるプラグインです。 router-link と router-view
のナビゲーション フックとは何ですか?それらにはどのようなパラメータがあるのでしょうか?
ナビゲーションフックは次のとおりです:
a/グローバル フックとコンポーネント専用のフック。 b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
パラメータ:
to (行くルート)、from (抜けるルート)、next (次のルートに行くにはこの関数を使用する必要があります。そうでない場合はインターセプトします)これらは最も一般的に使用されるものです
Vue の双方向データ バインディングの原理は何ですか?
vue.js は、パブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックを使用し、Object.defineProperty() を使用して、データが変更されると、サブスクライバーにメッセージをパブリッシュし、対応するモニタリングをトリガーします。折り返し電話。
具体的な手順:
ステップ 1: サブ属性オブジェクトの属性を含めて、観測のデータ オブジェクトを再帰的に走査する必要があり、セッターとゲッターが追加されます
この場合、特定の値をこのオブジェクトに追加すると、セッターがトリガーされ、データの変更を監視できるようになります。 ステップ 2: コンパイルはテンプレート命令を解析し、テンプレート内の変数をデータに置き換えて、レンダリング ページ ビューを初期化し、更新関数をバインドします。各命令に対応するノードに追加し、データが変更されたら通知を受け取り、ビューを更新します
ステップ 3: ウォッチャー サブスクライバーは、オブザーバーとコンパイルの間の通信の橋渡しをします。 :
1. 変換時に自分自身を属性サブスクライバー (dep) に追加します。
2. update() メソッドが必要です。独自の update() メソッドとトリガーのコンパイルをバインドすれば完了です。
ステップ 4: データ バインディングの入り口として、MVVM はオブザーバー、コンパイル、ウォッチャーを統合し、オブザーバーを使用して独自のモデル データの変更を監視し、コンパイルを使用してテンプレート命令を解析およびコンパイルし、最後にウォッチャーを使用してオブザーバー間の接続を構築します。データ変更間の通信ブリッジ -> 更新の表示、インタラクティブな変更 (入力) の表示 -> データ モデル変更の双方向バインディング効果。
vue のライフサイクルについての理解を詳しく説明してください。
合計8つのステージ: 作成前/後、ロード前/後、更新前/後、破棄前/後
作成前/後: beforeCreatedステージでは、vueインスタンス$elの実装要素データ オブジェクトのデータはすべて未定義であり、まだ初期化されていません。作成されたフェーズでは、vue インスタンスのデータ オブジェクト データは利用可能ですが、$el は利用できません。
ロード前/後: beforeMount ステージでは $el と vue インスタンスの data が初期化されますが、以前の仮想 dom ノードはまだマウントされており、data.message は置き換えられていません。マウントされたフェーズでは、vue インスタンスがマウントされ、data.message が正常にレンダリングされます。
更新前/後: データが変更されると、beforeUpdate メソッドと updated メソッドがトリガーされます。
破棄前/後: destroy メソッドの実行後、データへの変更によって周期関数がトリガーされなくなります。これは、vue インスタンスがイベントの監視と dom へのバインドを解放したが、dom 構造はまだ存在していることを示します
vueコンポーネントをカプセル化するプロセスを教えてください。
まず第一に、コンポーネントはプロジェクト全体の開発効率を向上させることができます。ページを複数の比較的独立したモジュールに抽象化することができ、効率の低さ、メンテナンスの困難さ、再利用性、その他の問題といった従来のプロジェクト開発の問題を解決します。
次に、Vue.extend メソッドを使用してコンポーネントを作成し、Vue.component メソッドを使用してコンポーネントを登録します。子コンポーネントにはデータが必要で、props での定義を受け入れることができます。子コンポーネントはデータを変更した後、そのデータを親コンポーネントに渡したいと考えます。放出メソッドを使用できます。
vuexをどのようにして知りましたか?
vuex は、開発モデルまたはフレームワークとして理解できます。たとえば、PHP には thinkphp、Java には Spring などがあります。 ステータス (データソース) を通じてドライバーコンポーネントの変更を一元管理します (Bean を一元管理する Spring の IOC コンテナーなど)。
アプリケーション レベルのステータスはストアに集中します。ステータスを変更する方法は、非同期ロジックをアクションにカプセル化する必要がある変更を送信することです。
vue-loaderとは何ですか?それを使用する用途は何ですか?
.vue ファイルを解析し、template/js/style を js モジュールに変換するローダー。
使い方：jsはes6で書ける、スタイルはscss以下、テンプレートはjadeで追加できるなど
vue.cliプロジェクトのsrcディレクトリ内の各フォルダとファイルの使い方を教えてください。
アセット フォルダーは静的リソース用、コンポーネントはルーティング関連の設定を定義するためのフォルダー、app.vue はメイン アプリケーション コンポーネントです。 cli のコンポーネント?何か問題が発生しましたか?
ステップ 1: コンポーネント ディレクトリにコンポーネント ファイル (smithButton.vue) を作成します。スクリプトはデフォルトの {
ステップ 2: 必要なページ (コンポーネント) にインポートします: import smithButton from '../components/smithButton .vue'
ステップ 3: これを vue のサブコンポーネントのコンポーネント属性に挿入します。components:{smithButton}
ステップ 4: テンプレート ビューで使用します。/ smith-button>
問題は、smithButton という名前を付けることです。これを使用する場合、それは smith-button になります。
Vue.js テンプレートのコンパイルについての理解について話してください。
つまり、最初に AST ツリーに変換され、その後、結果のレンダリング関数が VNode (Vue の仮想 DOM ノード) を返します
詳細な手順: まず、コンパイルを通じてテンプレートを AST にコンパイルしますコンパイラ構文ツリー (抽象構文ツリーはソース コードの抽象構文構造をツリー表現したもの)、compile は createCompiler の戻り値であり、createCompiler はコンパイラの作成に使用されます。さらに、コンパイルはオプションのマージも行います。
その後、AST は、generate (AST 構文ツリーをレンダー関数文字列に変換するプロセス) を通じてレンダー関数を取得します。render の戻り値は VNode です。VNode は、(ラベル) を含みます。名前、子ノード、テキストなど)
vue の履歴 history レコード内で前進または後退のステップが何ステップあるか
vuejs、angularjs、react の違いは何ですか? 1. 相違点
AngularJS との類似点:
どちらも命令をサポートします: 組み込み命令とカスタム命令。
どちらもフィルターをサポートしています: 組み込みフィルターとカスタムフィルター。
どちらも双方向のデータ バインディングをサポートしています。
ローエンドのブラウザはサポートされていません。
相違点:
1. AngularJS は依存性注入機能の追加など、学習コストが高くなりますが、Vue.js 自体が提供する API は比較的シンプルで直感的です。
2. パフォーマンスの点では、AngularJS はデータのダーティ チェックに依存しているため、Watcher が増えるほど速度が遅くなります。
Vue.js は依存関係追跡ベースの観察を使用し、非同期キュー更新を使用します。すべてのデータは独立してトリガーされます。
大規模なアプリケーションの場合、この最適化の違いは非常に明らかです。
2. React との違い
同じ点:
React は特別な JSX 構文を使用します。Vue.js もコンポーネント開発で .vue 特別なファイル形式を記述することを推奨しており、ファイルの内容については両方とも必須です。編集。
中心的な考え方は同じです。すべてはコンポーネントであり、コンポーネントのインスタンスはネストできます。
すべてが合理的なフック関数を提供し、開発者がニーズをカスタマイズできるようにします。
コアパッケージにはAJAX、Route、その他の機能は組み込まれておらず、プラグインとしてロードされます。
コンポーネント開発におけるミックスイン機能をサポートします。
違い:
React は Virtual DOM に依存しますが、Vue.js は DOM テンプレートを使用します。 React によって使用される仮想 DOM は、レンダリングされた結果に対してダーティ チェックを実行します。
Vue.js はテンプレート内に命令やフィルターなどを提供しており、DOM を非常に便利かつ迅速に操作できます。
vue ライフサイクルのインタビューの質問
vue ライフサイクルとは何ですか? Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。つまり、作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンインストールなどの一連の処理をVueのライフサイクルと呼びます。
vue ライフサイクルの役割は何ですか? そのライフサイクルには複数のイベントフックがあり、Vue インスタンス全体のプロセスを制御する際に適切なロジックを簡単に形成できるようになります。
vue のライフサイクルには何段階ありますか?
作成前/後、読み込み前/後、更新前/後、破棄前/後、合計8つの段階に分けることができます
最初のページ読み込み時にどのフックがトリガーされますか?
フック beforeCreate、created、beforeMount、mount は、ページが初めて読み込まれるときにトリガーされます
DOM レンダリングはどのサイクルで完了しますか?
マウントされた DOM レンダリングが完了しました
各サイクルがどのシナリオに適しているかを簡単に説明してください。
ライフサイクルフックを使用するいくつかの方法: beforecreate: インスタンスのロード時にトリガーされるロードイベントをここに追加できます: ロードイベントがここで終了する場合、初期化が完了したときのイベントがここに書き込まれます。 、非同期リクエストもここで呼び出されます: 要素をマウントして DOM ノードを更新します: データが均一に処理される場合は、ここに対応する関数を記述します beforeDestroy: 停止イベントを確認するための確認ボックスを作成できます nextTick: Operateデータ更新直後のdom
引数は疑似配列でトラバーサルインターフェイスがないのでトラバースできません
cancasとSVGの違いと違い
SVG
SVGは2D グラフィックスを記述するための XML。
SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。
SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。
Canvas
Canvas は JavaScript を使用して 2D グラフィックを描画します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
CanvasとSVGの比較
Canvas
解像度に依存
イベントハンドラーのサポートなし
テキストレンダリング機能が弱い
結果画像を.pngまたは.jpg形式で保存する機能
画像を多用するゲームに最適これらのオブジェクトの多くは頻繁に再描画されます
SVG
解像度に依存しません
イベント ハンドラーをサポート
レンダリング領域が大きいアプリケーション (Google マップなど) に最適
複雑性が高いため、レンダリングが遅くなります (DOM を過度に使用するアプリケーション)は速くありません)
ゲームアプリケーションには適していません
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
nodejs+mysqlによるデータベースの操作方法
webpack+vue環境LANの使用方法
以上がVue の基礎となる原則とコンポーネントの通信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
