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

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

青灯夜游

リリース： 2023-01-18 21:03:21

転載

1259 人が閲覧しました

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 )

使用法: マーク:
....
または < /School>Get: this.$refs. xxx

#5、構成アイテム props

関数:

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

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

最初の方法 (受信のみ)

  props: ["name"]

ログイン後にコピー

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

  props: {
    name:string,
    age:Number
  }

ログイン後にコピー

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

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

ログイン後にコピー

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