ホームページ >ウェブフロントエンド >jsチュートリアル >Vue.jsの*.Vueファイルの説明

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

小云云オリジナル: 2017-12-18 13:53:393369ブラウズ

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

*.vue ファイルとは

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

その中で、はプリコンパイル済み言語での記述をサポートしています。たとえば、私たちのプロジェクトでは scss プリコンパイルを使用するので、次のように記述します:

<style lang="scss">

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

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

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

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

<template>
  <p>
    <Header></Header>
    <p class="article_list">
      <ul>
        <li></li>
      </ul>
    </p>
    <Footer></Footer>
  </p>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get('topics', 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ファイルの説明

関連記事