VUEの研究ノート(a)のエントリ

序文

フロントエンドの成長の強さと、優れたフロントエンド・エンジニアとして、より多くの需要さえあればVUEと反応しない、それが出て本当に多くの企業のために、フロントエンド開発、なぜあなたは言うのですか?このマップのカットに私の仕事の現場で、10社は9またはおなじみVUE反応が要求されているが、もちろん、とだけ精通している確かに十分ではありません、すべての後に、それ以外の場合は、可能であれば、鉄丼の彼の把握を保つために彼らは、VUE堪能を解雇したり反応し、それは長い時間がかかるかもしれませんが、とにかく、私は熟練したと言うことができない、それだけで理解を言うことができます。そして、それが何であるかを最終的にVUEを見てみましょう!

本章の目的

  • 何VUE理解されています

  • フレームワークとライブラリの違い

  • VUEのメリットについて学びます
  • 最初のインスタンスのVUEを取得

vue.js何ですか

まず言って、すべてのIニーズのある人々がvue.jsを開発することを、著者は特にユイシーであり、3回を言うために重要なこと:中国の著者は、著者が中国の人々で、著者は中国です!

ここでは、公式サイトをより詳細に説明されて説明し、すべての後、私はちょうど、公式サイトには説明して使用します、Vueのは(発音/vjuː/、ビューと同様に)ユーザーインターフェイスを構築するためのプログレッシブフレームワークです他のフレームの差がヴューが層によってボトムアップ層から印加されるように設計されて、大きいです。唯一のビュー層の上にVueのコアライブラリの焦点は、だけでなく、使いやすいだけでなく、簡単なサードパーティ製のライブラリまたは既存のプロジェクトを統合することです。一方、現代のツールチェーンとさまざまなサポートライブラリと組み合わせて使用し、Vueのも複雑な1ページのアプリケーションのためにドライブを提供することが十分に可能。私たちが知らないかもしれないプログレッシブの場合は、ここで私はあなたがプログレッシブ画像について作品を探して与えます。

宣言型のレンダリング:

共通するのは、V-場合、V-ため、V-htmlのあるVUEの主に基本的な構文です

システムのコンポーネント:

システムの構成要素は、我々はテンプレート、簡単なメンテナンスや管理、共通の親と子の通信コンポーネントとして再利用可能なコードを考慮することができます。

クライアントルート:

リンクは通常、単一ページのアプリケーションSPAとして使用することができるルーティングの言葉を理解することができます。

大規模な状態管理:

そして、状態管理、そして、ブロガーが一時的に理解していなかった追加するには戻ってきて、あなたは後に知っているので、後

ビルドツール:

すべての開発を待って、小さなブロックの小ブロック可能が完了すると、その後、主に小型のモジュールの統合をツールを構築した後、我々はいくつかのアイテムを開発している開発は、我々はVUE-cliの足場はちょうどこれをプレイしながら、これらのモジュールは、統合必要我々が話をした後、効果、VUE-cliの。

フレームとライブラリの違い

フレームワークへの参照は、多くの人々は、我々はライブラリ(jQueryの)を使用しているフレームワークへのアクセスがない場合には、すべての後、ライブラリーを考えるだろう、そして図書館が何であるかを、フレームワークそれは何ですか?私は次のように要約しました

フレーム

、反応、VUE三大の角度及び他のフロントエンドのフレームワークを:のような、問題とその特性に基づいて、ユーザーに完全なソリューションを提供するために開発された製品のクラスを解決するためのフレームワーク

ここでは、我々は準拠していない場合は、その手の中にイニシアチブは、我々は、我々はフレームまたはフレームを使用することはありません、それによって確立された一連の規則を遵守しなければならない、フレーム、あなたが理解することができ、フレームの意味を知らないかもしれません例えば、例外をスロー:方法は、属性として使用することができるようにVUEデータがデータで記述する必要があり、プロセスは方法で記述する必要があり、当然のことながら、いくつかを計算することができます。この我々は今だけの議論を開始し、後述します。

倉庫

、jQuey、zepto:ライブラリは、開発者のような、それらのライブラリの機能を実現するためのメソッドを呼び出すために、使用する開発者のための合成製品コードのセットであります

図書館、その後、我々はそれに使用されている使用、または約前に、それが何であるかを理解するために図書館に行く私自身の結論はでなかったと考えられている。例えば、私たちの手でイニシアチブのライブラリ、:jQueryのでは、我々はノードを取得します$(あります「[クラス名/ ID]」)このような操作が、我々はまた、JavaScriptでネイティブメソッドを使用することができますdocument.getElementById(「ID」)またはdocument.getElementsByClassName(「クラス」) 私たち自身の手で主導権を、我々は、中jQuey jQueyで使用するメソッドを使用するネイティブのjs方法は、元の生のJSを使用する方法であり、使用したいです。

このことについて話して、我々は、メインは私の個人的な理解であり、フレームワークやライブラリを理解するために役立つことがしたいです。

VUE利点

使いやすいです:

これは、CSSは、JSは始めるためにはHTMLます

柔軟性:

ますます繁栄の生態系は、自由にライブラリと包括的な枠組みの間で拡張性の高いことができます

効率的な:

20kBと分+ gzipのサイズ、超高速仮想DOM、最も心配の最適化

VUEの最初のインスタンス

中国の公式ウェブサイト:https://cn.vuejs.org/

英文官网:https://vuejs.org

教材:https://www.bilibili.com/video/av62914998?from=search&seid=6339600099504545137

Vueが作りの最初のインスタンスの前に、我々は見つけるの公式サイト、インストール方法の暫定的な3種類を入力した後、最初のダウンロードVUEに必要

直接  <script> 導入

直接ダウンロードして使用し  <script> たラベルの導入を、Vue それがグローバル変数として登録されます

CDNを導入しました

1.プロトタイピングか何かを学ぶためには、最新バージョンを使用することができます。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.本番環境のために、私たちは新しいバージョンに起因する不測の損害を避けるために、バージョン番号とビルドファイルへの明確なリンクをお勧めします。< スクリプトSRC = 「https://cdn.jsdelivr.net/npm/[email protected] 0.0「> </ スクリプト>

あなたはネイティブESモジュールを使用する場合は3、互換性のESモジュールのビルドファイルもあります:< スクリプトタイプの= 「モジュール」> インポートのVue から「https://cdn.jsdelivr.net/npm/[email protected]/dist /vue.esm.browser.js' </ スクリプト>

NPMインストール

NPMは、Vueの持つ大規模なアプリケーションを構築する際にインストールすることをお勧めします。NPM同様のWebPACK、パッケージまたはモジュールBrowserifyと共に使用。一方、Vueのは、組立単一ファイルを開発するためのツールをサポートしています。

コマンド:NPMは、VUEをインストール

ここで私は今ケースを見て、比較的容易に変更することが間違っているニーズを行ったものを、私たちのためにデバッグにvue.js開発環境をより便利に、vue.js開発環境ではなく、生産vue.js環境の使用を提唱します!

<!DOCTYPE HTML>
<HTML>
    <ヘッド>
        <メタ文字セット= " UTF-8 " >
        <タイトル>第一の例を取得VUE </ TITLE>
    </ head>の
    <身体>
        <DIV ID = " アプリ" >
            {{MSG}}
        </ div>
        <スクリプトSRC = " ../js/vue.js "タイプ= " テキスト/ javascriptの"文字セット= " UTF-8 " > </ SCRIPT>
        <スクリプトタイプ= " テキスト/ javascriptの" > 
            VUEましょう = 新しい{(Vueのを
                上:' #app ' 
                データ:{
                    MSG:' こんにちは'
                }
            })
        </ SCRIPT>
    </ BODY>
</ HTML>

注:データは、データの内部に記述する必要があります

概要

 この章では、我々は主に会談の4つの側面から、すなわちVUE、VUEエントリー最初のインスタンスの利点を理解するために、フレームワークとライブラリの違いをVUEを理解するために、この章では、比較的簡単です記事場合、メインエントリは、最初のVUEの一例ですそこに誤解がある、またはあなたがより良い説明があると思うところ、以下のサポートへの感謝をあなたのコメントを残してください!ライフサイクルの次の章とVUEフック関数を学習します。この章では、以上です。

おすすめ

転載: www.cnblogs.com/jjgw/p/11780203.html