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>

を直接作成してテンプレート d477f9ce7bf77f53fbcf36bec1b69b7a で参照します。コンポーネント data; 関数内のデータは、vue インスタンスに格納されているデータとは異なります。 :is="" コンポーネント、複数のコンポーネント 同じハング ポイントを使用し、動的に切り替えます。

キープアライブ キャッシュ コンポーネントを使用して再作成を回避し、より効率的です

7c9485ff8c3cba5ae9343ed63c2dc3f7 の使用方法95543a64d6150a5d6f46db7704427e2a

データ転送: 親子コンポーネント。1 つのコンポーネント内に別のコンポーネントが定義され、これを親子コンポーネントと呼びます。

       子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自付组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed 

付组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据

单项数据流：

props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接

修改付组件中的数据

解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件，使用.sync  2.3开始支持，或者将付组件数据包装成udixiang，

然后在子组件中修改对象的属性。

非父子组件间通信：

可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名，数据)；  发送数据

Event.$on(事件名，data=>{})  监听接收数据

slot内容分发：

用来获取组件中的元内容，就是组件标签中的内容；

获得指定标签内容可以给标签定义  slot="s1"   获取  f995f70ae2091cccd4738847b20f1f7b

14.vue-router 路由

使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。

bower info vue-router    cnpm install vue-router -S

<p id="itany">
<p>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</p>
<p>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</p>
</p>

<script>
//1.定义组件
var Home={
template:&#39;<h3>我是主页</h3>&#39;
}
var News={
template:&#39;<h3>我是新闻</h3>&#39;
}

//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]

//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});

//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点：30e8033e360bcffb1ce9b4703e10b64c /* scoped表示该样式只在当前组件中有效 */

路由嵌套和参数传递：

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

ルーティングインスタンスのメソッド:

router.push(); ルートを追加します。関数は 6a078d9a0c4b84a49fc544194c8dfb2b と同じです。どちらもジャンプページです。

router.replace() ルートを置き換えます。関数は次のとおりです。上記と同様、履歴は生成されません

単一ファイル コンポーネント:

.vue ファイルは、vue.js のカスタム ファイル形式であり、カプセル化された個別のポイズン アローです。ファイル内

別個の js css html

.vue ファイルは 3 つの部分で構成されています テンプレート スタイル スクリプト

vue-loader ブラウザ自体は .vue ファイルを認識しないため、.vue ファイルをロードして解析する必要があります。この場合、vue-loaderleisi が必要です。 html-loader、css-loader、style-loader、babel-loader などの多くのローダーがあります。vue-loader は webpack 用に計画されていることに注意してください。リソースモジュラーローダーとパッケージ化ツールの終了

関連するテンプレートをインストールします:

cnpm install vue-template-compiler -D //プリコンパイルされたテンプレート

マージ: cnpm install -D webpack webpack-dev-server vue-loader vue-html- loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

テストを実行します: npm run dev

15 Scaffolding vue-cli。

vue-cli は迅速に構築できる vue スキャフォールディングです プロジェクト構造、

一般的に使用されるプロジェクト テンプレート: webpack は EsLint コード仕様のチェックと単体テストを保証します、

webpack-simple にはコード チェックがありませんユニットテストと単体テスト

browserifyもより頻繁に使用されます

browserigy-simple

vue-cliをインストールし、vueコマンド環境を設定します cnpm install vue-cli -g vue --version

vue list

初期化プロジェクトを入力し、プロジェクト テンプレートを生成します
構文: vue init template name プロジェクト名
生成されたプロジェクト ディレクトリを入力し、モジュール パッケージをインストールします
cd vue-cli-demo
cnpm install
Run
npm run dev //テスト サービスを開始します
npm run build //プロジェクトをパッケージ化し、dist ディレクトリを出力します。プロジェクトがオンラインの場合は、dist ディレクトリをサーバーにコピーします
webpack テンプレートを使用します
vue init webpack vue-cli-demo2
ESLint はコード仕様を統一するために使用されるツールであり、インデント、スペース、記号などのスタイル。要件は比較的厳しいです

16. モジュラー開発


まず、vue init webpack-simple vue-cli-demo でディレクトリにプロジェクトを作成します ディレクトリ cd に入りますvue-cli-demo cmpn install 次に、npm run dev テストを実行します

cmpn install vue-router -S -S は運用依存関係を意味します ;

main.js を編集 import VueRouter form ''vue-router' vue.use(Vue/ router); 使用後はグローバルに使用できます

app.vue を編集 router.config,js を編集

cnpm install axios -S

axios を使用する 2 つの方法:

a. axios を使用するコンポーネントでは、axios をインポートする必要があります。 axios.get('url').then(resp ->{resp.data});.catch(eorr->) ;){}

b. main.js の「axios」から import axios をグローバルに導入し、それを vue プロトタイプ vue.prototype.$http=axios に追加します。その後、他のコンポーネントは

vue.$http.get() できます。 ; または this.$http.get();

カスタム コンポーネントのイベントを追加します:

たとえば、ボタンの Vue 登録をカスタマイズする場合、デフォルトでは @click.ntaive=send と記述するだけです。

17ui ライブラリ要素 ui

は、Ele.me が提供する vue 2.0 をベースにした UI コンポーネント ライブラリのセットです。URL を迅速に開発し、効率を向上させることができます。

要素 ui PC 側 mintui モバイル ターミナル。公式サイト element.eleme .io

cnpm install element-ui -S

npm run dev

このコンポーネントを main.js に導入して使用する import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default /index.css

vue.use(ElementUI); この導入方法は、すべてのコンポーネントコンテンツを導入することです

webpack.confgi.js にローダーを追加します test:/.css$/,loader:'style-loader!css-loader '

cnpm instal style-loader -D Font フォント ローダー設定

Webpack 設定の変更を再起動する必要があります

動的スタイルは使用量を少なくすることです

ローダーをインストールするために使用量を減らします。less-loader 設定テスト:/.less$/ ,loader:less-loader スタイルを指定します l ang=less はスタイルを指定する必要があります

カスタム グローバル コンポーネント:

グローバル コンポーネント: main.js で vue.use を使用してグローバル導入部を入力し、その後、次を使用できます

他のコンポーネントで作成します。 vue コンポーネント、index.js ファイルを作成 import './Login.vue' からログインexport デフォルト {

install:function(Vue){
Vue.component('Login',Login);
} }

共通コンポーネント: axios など、毎回導入する必要があります

18.vuex 状態管理モード

は、アプリケーションのすべてのコンポーネントのステータスを管理するために集中ストレージを使用します。データは Redux に似ており、React は Flux フロントエンド状態管理フレームワークに基づいています。

基本的な使用法: nmp install vuex -S

store.js ファイル、vuex 関連の設定を作成します。 main.js でインポート、インポート ストア fomr './store.js main.js ストア オプションを設定、サブグループ this.$store

import vue fomr vue import vuex from vuex vue.use(vuex);

vuex core ストアはストア インスタンスには、次の属性とメソッドが含まれます。

getter 属性の取得

actions メソッドの定義 プロセスの判定などのアクション 非同期リクエスト const action={メソッド名 (コンテキスト){})} コンテキスト オブジェクトにはコミットがありますdispatch state

commit は送信を意味し、データを変更する唯一の方法です。 conmit('add) は add

mutations と呼ばれる変更を送信します

var state= {count:6} //ストア オブジェクトを作成します const store=new Vuex .Store{{state}} vargetter ={count)(){return state.count}} デフォルトストアをエクスポートします;

編集アプリ。 js 編集ストア、計算された属性として: computed:(){return this.$store.state.count};

メソッド 1 this.#store アクセス メソッド 2 mapGetters mapActios アクセス

mapGetter 属性の取得

mapActions メソッドの取得

補助関数 import {mapGetter} from vuex

computed:mapGetters{('count')}

以上がVue 面接に関する知識ポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。