Vue 面接に関する知識ポイント

今回は、Vue のインタビューに関する知識ポイントをお届けします。必要な方は、編集者をフォローしてご覧ください。

[関連する推奨事項: vue の面接の質問 (2020)]

1. vue の紹介

vue は、ユーザー インターフェイスを構築するためのフレームワークです。これは、Angular と同様に、いわゆる双方向データ バインディング、データ駆動型およびコンポーネント ベースのフロントエンド開発であり、シンプルな API を通じて応答性の高いデータ バインディングとビュー コンポーネントの組み合わせを実装します。使いやすくてコンパクトです。

2. Chrome で vue のデバッグを容易にするために vue-devtools プラグインをインストールします。デバッグを容易にするために vue-devtools がコードをチェックできるかどうかを構成します。vue.config.devtools = false。

vue.config.productionTip =false;本番メッセージの開始を防ぎます。

3. よく使用されるコマンド。

v-model 双方向データ バインディング。通常はフォーム要素に使用されます。

v-forは、配列またはオブジェクトに対してループ操作を実行します。v-repeatの代わりにv-forを使用します

v-onは時間をバインドするために使用されます。使用法: v-on : time = 'function'

v-show/v-if は要素を表示または非表示にするために使用され、v-show は表示を通じて実装され、v-if は削除のたびに作成されます

4. イベントと属性

v-on : click = " 略語 @click=""

$event イベント オブジェクト。イベント ソース、時間タイプ、オフセットなどのイベント関連情報が含まれます。

イベント バブリング、ネイティブ JS メソッドは、次のものに依存します。イベント オブジェクト、vue モードはイベント オブジェクトに依存しません。イベントのバブリングを防ぐための @click.stop

キーボード イベント: @keydown.13 または keydown.enter

イベント修飾子 .stop は、event.stopPropagation ( );

v-bind は属性バインディングに使用されます。使用法は v-bind:attribute="" 例 v-bind:src="" 省略形: src=""

5 vue.js は HTML を使用します。 vue インスタンスで dom をデータ テンプレートにバインドするための -based テンプレート構文。{{}} はデータをバインドしてページに表示するために使用されます。

単一アイテム バインディング{{}} はちらつきの問題を引き起こす可能性があります

v-text v-html を使用することもできます

v-pre は変更されず、そのまま直接表示されます

。 6. フィルター

は、モデル データをフィルターし、データ ペアを処理してフィルターしてから

構文: {{data | filter (parameter)}}

Built-inフィルタリング 2.0 以降は削除されます。これを使用すると、lodash data-fns、日付形式、accounting.js、通貨形式およびカスタマイズなどのサードパーティ ライブラリを使用できます。

。

vue 自体は送信をサポートしていません。Ajax リクエストは vue-resource axios などのプラグインを使用して実装する必要があります。axios を使用することをお勧めします。

axios は、リクエストの送信に使用される、Promise ベースの http リクエスト クライアントです。

基本的な使用法:

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

注: axios がデフォルトでデータを送信するとき、データ形式は、で使用される形式ではなく、リクエスト ペイロードです。ベッドのデータ形式なので、パラメーターはキーと値のオブジェクトとして渡す必要があります

、パラメーターは JSON 形式で渡すことはできません

パラメーターを渡す方法: キーと値のペアを自分で結合し、transformrequst を使用してリクエストを送信する前にデータをリクエストします 変換するか、変換に qs モジュールを使用します

axios はクロスドメインリクエストをサポートしていません。vue-resource を使用してクロスドメインリクエストを送信できます。

ドメイン間でリクエストを送信する: this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue ライフサイクル

vueインスタンスの作成から破棄までのプロセスがライフサイクルになります

9。計算プロパティ

計算プロパティは、データの保存にも使用されます。データを論理的に処理できることと、計算プロパティ内のデータを監視できることです。

10.vue インスタンスのプロパティとメソッド

プロパティ vm.$el vm.$data vm.$options vm.$refs

メソッド vm.$mount() vm.$destroy vm.$ nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)

11、カスタムコマンド

カスタムグローバルコマンドビュー。ディレクティブ (ディレクティブ ID、定義オブジェクト)

12. トランジション (アニメーション)

vue は、更新または dom を挿入するときにプロセスを適用するためのさまざまな方法を提供します。

基本的な使い方です。 : トランジション コンポーネントを使用して、変更されたコンポーネントにアニメーション化する要素を配置します

サードパーティのアニメーション ライブラリ animater.css と一緒に使用します

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13。コンポーネント

vue の強力な機能。コンポーネントを HTML 要素と組み合わせて、コードをカプセル化して再利用できます。

コンポーネント メソッドを定義するには、まずコンポーネント コンストラクターを作成し、次にコンポーネント コンストラクターを使用してコンポーネントを作成します。 b>

を直接作成してテンプレート