Vue-基礎入門

フレームワークの基本を学習VUE

ライブラリとは何ですか?:ライブラリーは、合成製品コードセット、私たちはその機能を実現するために呼び出すことができるメソッドライブラリです。
フレームワークとは何ですか?:フレームワークは、問題のクラスと製品の開発を解決することであり、我々は良いコードは、我々が呼ぶときの助けにフレームワークを使用して、場所を指定した書き込み。

  • (背景)は、インターネット技術の継続的な発展に伴い、フロントフレームプログラマは常に角度三脚状況、本ヴューに、などの変更、以前に使用したjQueryの、ブートストラップ・フレームワークからフロントフレーム、と反応更新され
    ヴュープログレッシブJavaScriptフレームワークのユーザーインターフェイスのセットを構築するために使用されます。界面結合双方向データによって駆動され、他の大きいフレーム差分はヴューが層によってボトムアップ層から印加されるように設計されています。Vueのコアライブラリの焦点は、サードパーティのライブラリのビュー層、利便性と統合のか、既存のプロジェクトの
    目標は可能なAPIとして、単純なように、コンポーネントを組み合わせてVueの応答とビューをデータバインディングを達成することである
    ヴュー自体はすべての周りのフレームではありません-のみビュー層に焦点を当てました。
    Vueがコアは、単純な宣言構文テンプレートの使用はDOMシステムにデータをレンダリングすることができますさ:
    Vueが特徴:使いやすい、柔軟、効率的、進歩的なフレームワークを。

           VUEが広く国で使用することができる主な理由は、それが開発フレームワークを行うMVVMに基づいていること、MVVMは、1つの非常に影響力のあるモードのフロントエンドの開発である MVVMで、mはモデルである代表的なモデル、集中粗い変数のモデルであります変数の値は、ビュー即ちビューのV表す、集中ストレージ、HTMLやCSS、VMは、二つの名前、ビューモデル、ビュー及びモデルデータ処理、結合応答双方向のデータを達成するためのパターンの組み合わせです。
MVCとMVVMパターンのコントラストモード:
ここに画像を挿入説明
従来のコントローラでモデル及びロジックの観点に加えて、MVC、維持する制御論理の複雑さが難しい原因で、MVVMのビューおよびモデル、ビューモデルを介してすべての相互作用の間には直接的な関係がありません。
Vueのサンプルコードを作成します:
Vueのは、VueのVueの機能の新しいインスタンスを作成することである各アプリケーションは、で始まります

 <script src="VueJs/vue.js"></script>
    <script>
        //new一个vue对象
        //objVue--data数据也会放到objVue中,成员属性以$开头-$data
        //objVue.$nextTick()dom关联的元素执行完毕执行
        //  objVue.$mount('#app');关联元素和el等效
        //页面加载完成之后获取元素并绑定
        onload = function() {
            var objVue = new Vue({
                //element:元素(关联元素)
                //el: '#app',//objVue.$mount('#app')等效
                data: {
                    a: "欢迎使用Vue框架!",
                    imgUrl: "Images/坐标点.PNG"
                },
            });
            objVue.$mount('#app'); //和el等效
            objVue.a = "再见!";
            //输出div中值
            console.log(objVue.$el.innerHTML);
            //每一次更改值都是异步去更改视图的,所以上面获取的还是"欢迎使用Vue框架!",下面使用$nextTick作用是在Dom执行之后才执行的(可以获得异步更新后的值)
            objVue.$nextTick(function() {
                    console.log(objVue.$el.innerHTML);
                })
                //关联第二个元素
                //new Vue({
                //    el:''
                //});
        }
    </script>

使用VUE:

-mustache構文:基礎となるデータにバインド宣言VueのDOMインスタンスに開発することができます。

VUE 2つのコア:

  • レスポンスデータバインディング:データが変更されると、VUEが自動的にビューを更新する(それはの使用であるObject.definedPropertyセッター/ゲッターエージェントデータ、データ上のモニター動作)
  • アセンブリの統合ビュー:コンポーネントのUIページの地図帳、コンポーネント部門、保守、再利用可能な、テスト可能。

VUEの利点:

  • 開発効率やヘルプを向上させる不要なDOM操作を減らし、双方向のデータが命令によって提供されるフレームワークを結合、フロントエンドは、DOMをレンダリングする方法を心配もはや、ビジネスロジックに集中する必要はありません。
  • 低カップリング。ビュー(ビュー)モデルは、モデルビューは、時定数を変更することができたときにモデルビューの変更は、一定であってもよいのViewModel異なる「ビュー」、にバインドすることができ、変更や修正の独立していてもよいです。
  • テスト可能。インターフェイスは、常にテストすることはより困難である、とのViewModelはのためのテストは今書き込むことができ
    、柔軟かつ効率的に使用します
  • アセンブリおよび応答デザイン
  • 双方向データバインディング開発効率を向上させる、DOM操作を低減することの利点です。

VUEの欠点:それはSEOの最適化には適していません、そしてより強力なパッケージ、エラーは明白ではない、中小のための単一の開発プロジェクトに適し


Vueのインスタンスのメソッド:

  • $ VM;
  • VM $データ。
  • VM $オプション。
  • 。VM $ nextTick();
  • VM $マウント();
  • VM $見ます();
  • VMセット$()。
公開された26元の記事 ウォンの賞賛5 ビュー6352

おすすめ

転載: blog.csdn.net/MrLsss/article/details/104106988