ホームページ >ウェブフロントエンド >jsチュートリアル >Vue.js_vue.js の *.Vue ファイルの最初の紹介

Vue.js_vue.js の *.Vue ファイルの最初の紹介

韦小宝オリジナル: 2018-01-04 10:14:282391ブラウズ

vue.js は、ユーザーインターフェイスを構築するための進歩的なフレームワークであり、ボトムアップのインクリメンタル開発設計を採用しています。この記事では、Vue.Js の穴埋め日記*.Vue ファイルの最初の概要を紹介します。

Vue.jsとは何ですか?

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

*.vue ファイルとは

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

その中で、3697a7f5a76a5cc8f90c7194b255fc4a はプリコンパイル済み言語での記述をサポートします。たとえば、私たちのプロジェクトでは 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 &#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 構造を表しており、誰でも理解できると思います。ただし、コードを d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2 でラップするだけで十分だと言っているのではなく、すべてのコードをラップするには html タグを内部に配置する必要があることに注意してください。この例では、e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 タグを使用します。

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

スクリプト部分

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

import Header from &#39;../components/header.vue&#39;
import Footer from &#39;../components/footer.vue&#39;

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

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

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

components: { Header, Footer },

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

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

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

created () {
  this.getData()
},

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

りー

style 部分

这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：

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

到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。

附录

勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图

总结

以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件，希望对大家有所帮助！

Vue.js_vue.js の *.Vue ファイルの最初の紹介

関連記事