Vue.jsの*.Vueファイルの説明

vue.js は、ユーザー インターフェイスを構築するための進歩的なフレームワークであり、ボトムアップのインクリメンタル開発設計を採用しています。 (ボトムアップ設計方法は、システムの機能要件に基づいており、特定のデバイス、ロジック コンポーネント、または同様のシステムから開始し、設計者の熟練したスキルと豊富な経験に依存して、それらを相互接続、変更、拡張して必要なシステムを形成します。) Vue のコア ライブラリはビュー層のみに焦点を当てており、開始するのが簡単であるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、Vue は、Vue エコシステムでサポートされている単一ファイル コンポーネントやライブラリと組み合わせることで、複雑な単一ページ アプリケーションを強化することもできます。

*.vue ファイルとは

まず、vue-cli スキャフォールディングを使用して構築したプロジェクトでは、index.vue や App.vue などの多くのファイルに遭遇しました。これはなに？ Vue 開発に慣れていない場合は、これまで見たことがないかもしれません。 *.vue ファイルは、HTML に似た構文を使用して Vue コンポーネントを記述するカスタム ファイル タイプです。各 .vue ファイルには、3 種類のトップレベル言語ブロック 、、および が含まれています。これら 3 つの部分はそれぞれ html、js、css を表します。

その中で、

<style></style>

html にも独自のプリコンパイル言語があり、vue もサポートしていますが、一般的に言えば、フロントエンド担当者は依然としてHTML のネイティブ言語なので、詳しくは説明しません。

さらに、App.vue ファイルで @import "./style/style"; を使用して、指定した場所にスタイルを書き込みました。したがって、コンテンツのこの部分は、今後のすべての記事に登場するわけではありません。すべてのスタイルは、src/style/ フォルダー内の対応する場所に書き込まれます。これの利点は、さまざまな scss 基本ファイルを繰り返し導入する必要がなく、プロジェクトのスタイル コードを制御できることです。

*.vue ファイルのコード分析

まず、簡単に見てみましょう:

<template>
  <p>
    <header></header>
    </p>
<p>
      </p>
<ul>
        <li>
      </ul>
    
    <footer></footer>
  
</template>
<script>
import Header from &#39;../components/header.vue&#39;
import Footer from &#39;../components/footer.vue&#39;
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get(&#39;topics&#39;, null, r => {
        console.log(r)
      })
    }
  }
}
</script>
<style>
  .article_list {margin: auto;}
</style>

上記は、単純な *.vue ファイルの基本構造です。部分ごとに説明しましょう。

テンプレート部分

以下では、*.vue ファイルとは呼びません。 vueコンポーネントに変更しました。まず、vue コンポーネントですが、そのテンプレートは html 構造を表しており、誰でも理解できると思います。ただし、コードを でラップするだけで十分だと言っているのではなく、すべてのコードをラップするには html タグを内部に配置する必要があることに注意してください。 この例では、

タグを使用します。

というコードを見たとき、誰もが非常に驚くはずです。これは何ですか?実際、これはカスタム コンポーネントです。他の場所でコンポーネントを作成したので、それをこの方法で導入できます。同様に、

もコンポーネントです。

スクリプト部分

まず、2 つのカスタム コンポーネントが必要です。最初に引用します。次の形式の方が理解しやすいです。

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

次に、参照ファイルに加えて、すべてのコードを次のコードでラップします:

export default {
  // 这里写你的代码，外面要包起来。
}

最初にヘッダーとフッターの 2 つのコンポーネントのソース ファイルを導入し、次に、参照されるコンポーネントをコンポーネント内で宣言する必要があります。このようにして、テンプレートで使用することができます。

components: { Header, Footer },

データは私たちのデータです。私たちのデモ コードでは、リストの空の配列データが提供されます。テンプレートでは、this.list を使用してデータを使用できます。これについては後の記事で説明しますので、ここでは詳しく説明しません。

data () {
  return {
    list: []
  }
},

created は、コンポーネントがロードされたときに実行する必要があるものを表します。たとえば、ここでは、読み込みが完了したときにコンポーネントに this.getData() という関数を実行させます。また、vuejs のフック関数の 1 つである created 。 (具体的なフック関数については付録を参照してください)

created () {
  this.getData()
},

methods はコンポーネントのメソッドであり、関数とも言えます。たとえば、上記のコードは、コンポーネントが getData() というメソッド関数をカスタマイズしていることを示しています。

methods: {
  getData () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}

ここでのスタイル部分

は比較的単純で、テンプレートのコンテンツに表示される HTML 要素のいくつかのスタイルを記述することです。以下に私のコードを示します:

<style>
.article_list {margin: auto;}
</style>

この時点で、vue コンポーネント ファイルについてある程度理解しているはずです。次のブログ投稿では、さらにさまざまな記述方法が含まれるため、この記事を読んだ後は、vue の公式ドキュメントを確認することに時間を費やすことをお勧めします。すべての文書を理解することはできないかもしれませんが、全体的な理解は必要です。そうでないと、その後の学習がより困難になります。

付録

フックは vuejs のライフサイクルとして理解できますが、関数はライフサイクルの各段階でのイベント メソッドです。以下のように

関連する推奨事項:

vue.js プロジェクトの実践的なヒントのまとめ

Vue.js でコンポーネントを分割する実装方法の紹介

Vue でよく使用される命令とは何ですか。 js

以上がVue.jsの*.Vueファイルの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。