初歩的な認識Vue(一)

Vueの初歩的な認識
先端発展の歴史
html

html [ 1990 ] ----> html5 [ 2008.1.12 ]

css

css 1.0 1996

css 2.0 1998

css 3.0 2001

EcmaScript

1997年生まれ

2015 EcmaScript 2015

2016 EcmaScript 2016 dart言語vs javascript

フロントエンドプロジェクトのロジックがますます複雑になり、メンテナンスが困難になるにつれて、フロントエンド側はバックエンドのアーキテクチャ思想を導入した(MV*)
M Modelデータ層V Viewビュー層VM ViewModelビューモデル(ビジネスロジックVMはPによって名前が変更された)P Presenter提案者(Controllerに名前が変更された)C Controllerコントローラ(ビジネスロジック)
フレーム名
スキーマ＃スキーマ＃
誕生日
Backbone.js
MVP
2010.10
Angular.js( 1.0 )
MVC
2010.10
Angular.ts( 2.0 )
MVC->MVVM
2016
Vue 1.0
MVVM
2014.07
Vue 2.0
MVVM
2016.09
React 1.0
MVVM
2012
React 2012はフロントエンドMVCというアーキテクチャをあまり認めていないので、Reactを単純にMVC中Vと見なすことができます
github統計量(国際使用量)は大陸地区単位を代表しない:K
angular.js
angular.ts
vue
react
59.6
49.1
142
131
学習難易度:Vue先端流行
モバイルWeb&&hybird app(ハイブリッドapp)
app

native app(Android ios java ME)

webapp(ブラウザに適用されるapp)

Hybird app(ハイブリッドapp)

webappはサードパーティのオリジナルアプリケーションライブラリ(オリジナルデバイス(携帯電話)にアクセスできるインタフェース権限、例えばカメラ)

に埋め込まれている.
MV*の図示
MVCがP MVPに名前を変えたのは仲人のようだ(M Vをつなぐ橋)MVVMはpから名前を変えたVMとVの関係がより親密になった「MVVM」:双方向データバインディング、Viewの変動、View Modelにマッピングされている.逆に、私たち以上のフレームワークは、一方向データストリーム(データが親から子に流れる)であることに注意してください.
初期Vuejs

Vue.jsは尤雨渓の個人種目

です

Vue.jsはMVVMフレームワーク

である

Vue.jsもjavascriptの漸進的なフレームワーク(学ぶほど難しい)

です.

フロントエンドには、比較的有名なMVVMの個人プロジェクトがあります:司徒正美avonlon.js

vue.jsインストール

scriptタグ導入(cdn|ダウンロード)

モジュール化インストールnpm/cnpm/yarn

ドキュメント学習

チュートリアル/5分クイックハンド/quick start

ダウンロードインストール

基礎demo

apiおよび構成

の学習
Vueと他のフレームワークの比較
VueとReact
ReactとVueには多くの類似点があります.

Virtual DOM

を使用

は、応答式(Reactive)およびコンポーネント化(Composable)のビューコンポーネントを提供する.

は、コア・ライブラリに集中し、ルーティングやグローバル・ステータス管理などの他の機能を関連するライブラリに渡す.

関連リンクhttps://cn.vuejs.org/v2/guide/comparison.html
Vueについて
scriptタグを使用して導入すると、Vueのグローバル変数Vueがコンストラクタ関数であることが明らかになります.テンプレートにjs構文を書くには、mustacheという構文糖(括弧)を使用します.jsの構文を{}}に書きます.

 {{ msg }} 

new Vueの到着例は、こちらではルートインスタンスと呼ばれています.インスタンスもコンポーネントコンポーネントです.コンポーネントはhtml css jsなどを有するポリマーデータの変更であり、ビューは変更されます.この形式では、データ駆動ビューM->VMと呼ばれています.
vueデータ駆動原理?データ更新の原理おうとうしきのげんり

    (1)     object.defineProperty   get set   ，
    (2)    watcher ，     ，       ，         ，      dom(js    dom  )
           dom ，       ，           。

1.なぜscriptタグが導入されると、グローバル変数があるのでしょうか.

( function ( global ) {
console.log( global ) //window  
global.Vue = function(){}
})( this )

2.なぜモジュール化導入(npm/cnpm/yarn)でもよいのでしょうか.

vue    Module.exports / amd
( typeof exports ==='object' ) && ( typeof module !== 'undefined' ) ?
module.exports = factory() // Vue :
typeof define === 'function' && define.amd ? define(factory) :
( global = global || self, global.Vue = factory());

Vueを見てjsソースコード

は匿名関数がカプセル化されている(function(){})()1番目の()は匿名関数の定義2番目の()は匿名関数呼び出し匿名関数の利点:

である.

安全性高

名前付き競合の解決(function(global,factory){//globalが指すグローバルオブジェクト//factoryファクトリ関数})(this,function(){})

VueはどのようにVueのグローバル変数を使用することができて、あるいはモジュール化して

インストールすることができます

プロトタイプを用いてパッケージ化された

原型のfunction Fn(options){//thisインスタンスにおけるfnの到来を用いる結果インスタンスvar fn=new Fn()}Fn.protype.name = "GFLY "Fn.protype.init=function(){console.log(‘機能’)}