この記事では、Vue の習熟度をテストし、正しく答えられるかどうかを確認するために、Vue で必ず聞かれる面接の質問 3 つを紹介します。
この質問は、インタビュアーの Vue の基本を調べるためのものです。一般に、Vue を使用したことがある人は必ず v-show と v-if を使用します。 (学習ビデオ共有: vue ビデオ チュートリアル)
v-if
命令はコンテンツの一部を条件付きでレンダリングするために使用され、v-show
条件付き表示要素にも使用されます。
v-show
を使用する要素はレンダリングされて DOM に保持され、CSS 表示を使用して要素の表示と非表示を制御します。 v-show
は <template>
要素をサポートしておらず、v-else
もサポートしていません。
v-if
の使用は「真」の条件付きレンダリングであり、要素のイベント リスナーとサブコンポーネントは破棄されて再構築されます。 v-if
も lazy です。初期条件が false の場合、レンダリングされず、true になるまで最初のレンダリングはトリガーされません。そして v-show は条件に関係なくレンダリングを行い、display 属性に応じて表示・非表示を制御します。
一般的に、v-if は切り替えオーバーヘッドが大きく、v-show は初期レンダリング オーバーヘッドのみです。要素を頻繁に切り替える必要がある場合は v-show を使用し、条件がほとんど変わらない場合は v-の方が良いです。
v-model
コマンドは、主に <input>
、<select>
、# で使用されます。 # #
イベントを使用します;
イベントを使用するを選択します;
<input v-model='something'> <!-- 等价于 --> <input v-bind:value="something" v-on:input="something = $event.target.value">
<!-- 父组件: --> <ModelChild v-model="message"></ModelChild> <!-- 子组件: --> <template> <div>{{value}}</div> </template> <script> export default { props:{ value: String }, methods: { test1(){ this.$emit('input', '小红') }, }, } </script>
#props / $emit
これは Vue の最も基本的なデータ通信方法でもあります。 、後でそれについて話すことはできなくなります。
ref
コンポーネントで使用すると、コンポーネントのインスタンス オブジェクトを取得し、データを操作できます
: データ操作のために親/子インスタンス オブジェクトにアクセスすることもできます
EventBus ($emit/$on) このメソッドは、シーン内の空の Vue インスタンスをイベント センターとして使用し、それを使用してイベントをトリガーします。イベントをリッスンすることで、コンポーネント間の通信を実現します。 Using
EventBusこのメソッドには多くの欠点があります。プロジェクトですべての人に使用することはお勧めできません。この実装アイデアだけは知っておいてください。
$attrs
/ $attrs
: コンポーネントのプロパティやカスタム イベントではない親スコープ内の属性バインディングとイベントが含まれており、v-bind="$attrs"
経由で渡すことができます。内部コンポーネント。
v-on="$listeners"
を介して内部コンポーネントに渡すことができます。 注: Vue 3 では削除されました。イベント リスナーは
$attrs
provide / inject
(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)
以上があなたの Vue の習熟度をテストするために、面接で必ず聞かれる 3 つの質問をチェックしてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。