Vueの研究ノート（a）のエントリ

EDITORIAL言葉

Vueが集まったから、自分の感情や経験を少しと組み合わせ、主に公式ドキュメントを参照して、一連の記事を学びます

不備はまた、第一次書類にVueの公式を添付して、私を修正してください。

チュートリアル：https://cn.vuejs.org/v2/guide
API：https://cn.vuejs.org/v2/api/
スタイルガイド：https://cn.vuejs.org/v2/style-guide/
クックブック：https://cn.vuejs.org/v2/cookbook/

1、インストール

（1）によって<script>導入

学習プロセスでは、最新バージョンを使用することができます。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

開発環境では、（2.6.10が最新の安定版である）明示的なバージョンを使用するのが最適です。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

本番環境では、圧縮されたバージョンを使用します。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

開発版と警告のフル開発バージョンが含まれている製品版が、製品版との違いは、より速いスピードを持っています

（2）NPMインストール

大規模なアプリケーションを構築するとき、私たちは、推奨NPMインストールを（これに先立ち、コンピュータが環境関連のために設定されていることを確認してください）：

$ npm install vue

同時に、Vueのも公式のCLIを提供しています、あなたはすぐに複雑な足場を構築することができます

$ npm install vue-cli

ので、ここで、CLIをお勧めしていないときしかし、非常に初心者のための特定を導入することではありません

2.はじめに

各アプリケーションVueが経由でVue始まるのVueのインスタンスを作成する機能

var vm = new Vue({
  // 选项
})

次のように簡単な例を示します。

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue"
            },
            methods: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

まず第一に、私たちが<head>されている<script>タグのVueを導入

次いで、内表示方法及びメッセージデータreversedMessage（）タグに結果を返します<body><div>

次に、私たちは、主に見我々はコンストラクタのVueを宣言タブを、<body><script>

この単純なVueのコンストラクタでは、それぞれ、3つのパラメータを持っているel、dataとmethods

（1）エル - Vueの特定のインスタンスがマウント

エルは、CSSセレクタ（文字列型）であってもよい事例かもしれのHTMLElement

例示的な実施形態では'#app'CSSセレクタは、Vueのアプリを結合するHTML要素のインスタンスIDを示します

後続のすべての操作は、すべての影響を受けずにHTML要素に上記の指定されたHTML要素内にあります

（2）データ - ヴューデータ・オブジェクト・インスタンス

オブジェクト型は、データのいずれかであるか、またはタイプ機能であってもよいです

一般に、データは、データは、したがって、オブジェクトは、（ゼロ以上のキーと値のペアを含む）の純粋なオブジェクトでなければならないべきです

もう一つは、コンポーネントを定義する際に、データが初期データオブジェクト関数を返すように宣言されなければならないということです

コンポーネントがデータである場合、オブジェクトの複数のインスタンスを作成するために使用することができるので、すべてのデータ・オブジェクトの同じインスタンスを共有します

インスタンスが作成されたら、インスタンスのプロパティことができvm.$data、元のデータオブジェクトへのアクセス

それと同時に、また、エージェントのデータ対象のすべてのプロパティの例、つまり、アクセスがvm.a訪問することと等価ですvm.$data.a

（3）方法 - 方法のVueの例

一般に、この例の方法では、自動的にVueのにバインドされます

私たちは、矢印の機能を使用する場合ただし、これはこのバインディングコンテキスト親スコープので、Vueのインスタンスのために結合されることはありません

方法は、私たちができる、すなわち、Vueのインスタンスに組み込まれるvm.functionName()これらのメソッドにアクセス

私たちは何を学びましたか？ - オプション

データ

データ√

方法√

計算されました

時計

小道具

プロピレンデータ

JUDGMENT

√

テンプレート

与えます

でrenderError

ライフフック関数

リソース

組み合わせ

他の