Vue の単一ファイル コンポーネントを簡単に分析した記事

実際の開発では単一ファイルコンポーネントがよく使われますが、単一ファイルコンポーネントを作成するにはどうすればよいでしょうか?そこでこの記事では、単一ファイル コンポーネントについて簡単に紹介します。

1. 単一のファイル コンポーネントを作成します

1. ファイルを作成するディレクトリに切り替えます。デスクトップ ディレクトリに切り替えます。もちろん、コマンドは cd ディレクトリ/ファイル名

2 です。 cmd を入力して npm config set registry https://www.php.cn/link/591d4b6b2ae94b362529d9dcbe8ea63f と入力し、淘宝網ミラーに切り替え/設定します。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

グローバル vue スキャフォールディングのインストール (どこでも使用できるシンプルで便利な) npm install -g @vue/cli

インストールが成功したかどうかを確認するには、次の内容を参照してください。

3. vue create プロジェクト名を使用してプロジェクトを作成します。成功すると、vue のバージョンを選択できます (キーボードの下矢印を押して切り替えます)。ここでは Vue2

# を選択します。

# #コマンドの実行後、以下の図のようになれば、作成が成功したことを意味します (非常に慎重に、以下の青いコードの最初の行は、作成が成功したディレクトリに切り替えることを意味します) 、2 行目は vue プロジェクトを実行することです)

4. 作成が成功すると、下の図に示すようなプロジェクトが付属します (この時点では、スキャフォールディングに基づいた vue プロジェクトが完成します)

5. 作成したばかりのファイルを直接検索し、vscode に直接ドラッグできます (次のものがあります) src の下にコンポーネント フォルダーがあり、その中に HelloWorld.vue という名前のファイルがあります。これが上の図のコードです

以下は、プロジェクト内のファイルの簡単な概要です。ファイルの作成は終了です。これが何のためのものかを知る必要があります。

## 好奇心旺盛な友達は問題を見つけるでしょう。つまり、node_module の下に vue ファイルがあり、このファイルには次のようなさまざまなバージョンの vue も含まれています。

vue.js 、vue.runtime.js など。vue バージョンを積み重ねて、それらの違いを見てみましょう

##2 番目に、 Vue のさまざまなバージョンについて

vue.js

と vue.runtime.xxx の違い.js(1) .vue.js は、コア関数テンプレート パーサーを含む Vue の完全なバージョンです。

(2) . vue.runtime. xxx. js は Vue の実行バージョンであり、コア関数のみが含まれており、テンプレート パーサーはありません。

vue.runtime.xxx.js にはテンプレート パーサーがないため、テンプレート設定項目は使用できず、

を使用する必要があります。

render関数によって受け取られた createElement 関数は、特定のコンテンツを指定します。

3 つ目は、vue.config.js 設定ファイルです。

vue Inspection > Output.js を使用して、Vue スキャフォールディングのデフォルトを表示します。割り当て。

vue.config.js を使用してスキャフォールディングをカスタマイズします (以下は参考までに vue.config.js の構成です)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

4、ref 属性

1. 要素やサブコンポーネントへの参照情報を登録するために使用されます. id

2 を置き換えるために使用されるとも言えます。 htm1 ラベルで取得されるのは 実際の DOM 要素 であり、コンポーネント ラベルに適用されるのは コンポーネント インスタンス オブジェクト (VueComponent )

• 使用法: マーク:

  ....

  または Get: this.$refs. xxx

#5、構成アイテム props

関数:

コンポーネントに外部からデータを受信させます #(1) データを渡す:

(2) データを受け取る:

最初の方法 (受信のみ)

  props: ["name"]

2 番目の方法 (制限の種類)

  props: {
    name:string,
    age:Number
  }

3 番目の方法 (制限の種類、制限の要否、デフォルト値の指定)

  props :{
    name : {
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
    }
  }

注意: props は読み取り専用です。 , まだ大丈夫です。が変更されると、Vue の最下層が props の変更を検出します。変更が行われた場合は、警告が発行されます。本当に要件を変更する必要がある場合は、props の内容をデータにコピーします。を作成し、要件を達成するためにデータの内容を変更します

6、mixin(mix)

##機能

: 複数のコンポーネントで共有される構成をミックスインオブジェクトに抽出できます 使用方法:

最初のステップは、混合を定義することです (例: data(){ ....}、methods:{....}}。コンポーネントのメソッドまたはデータ構成項目を取り出して配置します)ここで、メソッドは mixin.js に配置されます

2 番目のステップは、mixin を使用することです

#7、プラグイン

関数: Vue を強化するために使用されますエッセンス: insta1l メソッドを含むオブジェクト。 install の最初のパラメータは Vue で、2 番目以降のパラメータはプラグイン ユーザーによって渡されたデータです。

1. プラグインを定義します: install = function (Vue, options) {//グローバル フィルター Vue.filter(....) を追加します。ここにカスタム フィルターなどの他のフィルターを追加することもできます。指示など

#2. プラグインを使用します: Vue.use()

8、スコープ付き

スコープ付きスタイルの役割: スタイルをローカルで有効にし、競合を防ぎます。

書き方:

通常、scoped はサブコンポーネントでのみ記述され、アプリ内で記述する必要はありません。アプリ内のスタイルは基本的なスタイルです。すべてのコンポーネントを使用できます。スコープ付きが追加された場合、このコンポーネントにのみ有効となり、他のコンポーネントはそれを使用できません

(学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上がVue の単一ファイル コンポーネントを簡単に分析した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。