独学先端のvue編

14405 ワード

独学でまとめる vue

vue

vue概要

環境構築

MVVM

vue.js指令

v-bindワンウェイバインド

v-show

v-ifとv-else

v-else-if

v-for

v-on

v-html

v-cloakとv-textユーザーが短時間で見られないようにする{}}

v-pre

v-model双方向バインド

フィルター

axios

ライフサイクル

vueの概要
Vue.jsはユーザーインタフェースを構築する漸進的なフレームワークです
特徴:

レスポンスプログラミング

コンポーネント化

軽量

モジュール化

簡潔

vue.jsテクノロジースタック

vue-cli

vue-router

vuex

es6

npm

webpack

bable

weex

環境構築

シナリオ1直接scriptはダウンロード公式サイトの独立したjsファイルに導入するscriptタグを用いてvueに導入する.jsファイル

シナリオ2コマンドラインツール

1.vue-cliのグローバルインストール
npm install -g @vue/cli
2.新しい空のプロジェクトを作成し、依存モジュールをダウンロード
vue create my-project
3.プロジェクトディレクトリに入り、サーバーを実行する
npm run serve
MVVM

旧フロントエンドコードの3大部分の区分:(1)HTMLはページの静的コンテンツのみを保存する(2)CSSはページを保存するために必要な静的cssスタイルのみを担当する(3)JSはすべてのページでの添削変更操作を担当する!

質問:(1).HTMLやcssはプログラムに必要な要素(変数、分岐、ループ)が欠けているので、生活が自立できない赤ちゃんのようです!(2). すべての追加削除の操作は、jsプログラムが責任を負い、大量のコードを繰り返すことになります!

MVVM設計モード:フロントエンドコードの再分割:または3つの部分(1)である.インタフェース(View):拡張版:a.HTML+CSS b.HTMLに変数、分岐、ループなどのプログラム機能を追加した(2).モデルオブジェクト(Model):ページに必要な変数とイベント処理関数を特別に保存するオブジェクト(3).ビューモデル(ViewModel)オブジェクト:変数とイベント処理関数をインタフェースの指定された位置に自動的に送る役割を果たします.インタフェースとモデルオブジェクトをバインドします.

MVVMの最大の利点:ViewModelはモデルオブジェクトのコンテンツとインタフェースの間を自動的に維持できるため、重複する符号化を大幅に削減できる!

VueフレームワークはMVVM設計モデルに基づいて実現!

Vueのバインド原理:実はnew Vueの原理:(1).まずvueタイプのサブオブジェクトaを作成する.dataオブジェクトを導入する:1).dataオブジェクトの各変数に自動的にボディーガード(アクセサプロパティ)を割り当てます!結果:任意の場所でdataの変数にアクセスする場合、実際にはdataの変数に直接アクセスするのではなく、dataの変数のために招待された同名のボディーガードにアクセスするだけです.結果:外部がdataの変数を修正しようとすると、ボディーガードのset()メソッドがトリガーされます.　　　2).新Vue()はまた、dataの変数を外部が変更しようとすると、ボディーガードのset()メソッドの通知関数がトリガーされることになる通知関数の結果を、各変数のset()関数に自動的に埋め込む.vueフレームワーク全体で変数の値が変更されたことがわかります!b.methodsオブジェクトを導入して分散する:結果:1)Methodsのすべての関数はnew Vue()オブジェクト2に直接属する.methodsの関数がnew Vue()に入る後、dataの変数のボディーガード(アクセサ属性)とレベル3)になる.したがってmethodsのメソッドはdataの変数にアクセスするにはthisを付けなければならない.変数名(2).仮想DOMツリーの構築:a.仮想DOMツリーとは:完全版DOMツリーをスキャンすることによって作成された新しいDOMツリーb.プロセス:1).新Vue()はel属性で指定するインタフェース上の親要素2を検索する.見つかった親要素とその子要素3)をスキャンする.「@イベント名=関数名」に遭遇すると、自動的にonイベント名=関数名--自動バインドイベント4)に翻訳される.すべての"{{変数名}}":i.変化可能な要素オブジェクトを仮想DOMツリーに追加する.また、最初に置換要素の内容のうち{変数名}}は変数の初期値(3)である.結果:dataの変数が変更されるたびに、a.変数のset()関数b.set()に組み込まれた通知関数がvueフレームワークに通知され、xx変数が変更されたと言いますc.フレームワークは仮想DOMツリーd.を自動的にスキャンします.今回の変数の変更の影響を受けたすべてのDOM要素を検索します.e.事前にカプセル化されたDOM削除変更操作を自動的に利用して、ページ上の影響を受けた要素だけを更新します.変数の影響を受けない他の要素は、変更されません.

まとめ:

VUEバインド原理:アクセサ属性+仮想DOMツリーアクセサ属性+オブザーバモード+仮想DOM(深層)

仮想DOMツリーの利点:4点:(1).内容が少ない!変更可能な要素のみを保存します.不変の要素は一つも(2)を含まない.遍歴が速い!(3). コードの重複を避ける!-自動的にDOMの添削改ざん操作を実行する(4).効率が高い!変数が変更されるたびに、影響を受ける要素のみが変更され、他の要素は変更されません.　

vue.js命令
v-bind一方向バインド
(1). 質問:要素の属性値が変数によって自動的に変化する可能性がある場合は、{{}}でマークできません.(2). 解決:a.標準:


 　　b.  : new Vue() ， v-bind， ="“ js ， 
 　　c. : 
 　　d. : :， = ”“ {{}}，”“ {{}} ！ {{}} ，”" ！
 (3).  : ， : ="js " ， {{}}。
 
 

v-show
(1). : :
 (2). : 
 (3). :
 　　a. new vue() v-show ， = js ， bool 。
 　　b. true ， ， ！
 　　c. false ， display:none， 
 


v-if v-else

(1). : 
 (2). :
 　　　
 　　　
 (3). :
 　　a. v-if v-else ， 
 　　b. v-else =， if else else 。
 (4). :
 　　a. new Vue() v-if ， = 
 　　b. v-if true， v-if 1， v-else 2
 　　c. v-if false， v-if 1， v-else 2
 (5). v-show vs v-if : （ ）
 　　a. v-show display:none ， DOM ， 
 　　b. v-if ， DOM ， 。
 


v-else-if

(1). : 
 (2). :
 　　　　
 　　　　
 　　　　... ...
 (3). :
 　　　a. v-if、v-else-if v-else ， 
 　　　b. v-else =， if else else 。
 (4). :
 　　　a. new Vue() ， v-if = ， bool 
 　　　b. v-if true， v-if， v-else-if v-else 
 　　　c. v-if false， v-else-if 。 v-else-if true， v-else-if ， v-if v-else-if v-else
 　　　d. v-if v-else-if false， v-else ， v-if v-else-if 
 


v-for

(1). : 
 (2). :
 　　　
 (3). :
 　　　a. ， ！
 　　　b. v-for ， 。
 　　　c. v-for of，  ，  ——　 for in for of
 (4). :
 　　　a. new Vue() v-for， of 
 　　　b. ， HTML 。
 　　　c. ， v-for value i 。 　: value  。i 。
 (5).  : v-for ， :key 
 　　　　a. : v-for ， 。 ， v-for ， 。V-for ， v-for 。—— 
 　　　　b. : v-for 。 ，v-for ， 。 —— ！
 c. :
 
(6). V-for ！
 　　　a. 
 　　　b. :
 　　　　　1). V-for 1 ， 1， of .
 　　　　　　　 for(var i=1;i<= ;i++){ … }
 　　　　　2). 
 　　　　　3). i +1 。 i 。
 


v-on
a. : 
 b. :
 　　　1). 
 　　　2). ， () : 
 c. methods 
 


v-html

(1). : HTML ， {{}} ， HTML ， ， 。
 (2). : ， HTML ， v-html {{}} 。
 (3). : >(4). :v-htmlは、 のHTMLクリップをブラウザに して、 の に き えることができます.
v-cloakとv-textはユーザが い で るのを する{}}
(1). :ネットワーク が い 、jsコードがダウンロードされていない 、ユーザーはページ の{{}} を く る があります. まずいです.(2). :2つの :a.v-cloak :1). :new Vue()のダウンロードが される に、{}} きの を に にします.new Vue()のダウンロードが するまで、すべての{}}の を に します.　　2). 2ステップ:i.まずウェブページのstyleに セレクタを する:[v-cloak]{ display:none }.v-cloak を つすべての を し、iiを に す.{{}}の を つ にv-cloak を け,=3を けない. :v-cloakを つすべての は、 に になります.new Vue()のダウンロードと が するまで、v-cloakのすべての を に つけ、v-cloakプロパティを します.これらの が されます!b.v-text :1). :{{}}を たくない 、{}}の わりに な を うことができ、 は じです. はすべて の に かれているからです.ロードが していなくても、ユーザーは の を ることはできません.　　　　2). いかがでしたか:1 i. >ii. :v-textの を すると、 の 3)の わりに の が に . : の が された と した でつながっている 、テンプレート を せざるを ません. > 　　　　4). :v-textの にテンプレート が いている は、「」を して、テンプレート の ``だけを できます. > 
v-pre 
(1). な : の にもちょうど{{}}が まれているが、vueにコンパイルされたくないので、そのまま !(2). どのように:{{xxx}... >
v-model バインド
(1). : の12 の を して、new Vue()の をページ に することができます.ただし、ページにユーザーが した しい は できません. はnew Vue()に されます.(2). バインド:new Vue()のモデルオブジェクトの の のみをページに できます.ページ の の が した 、new Vue()のモデルオブジェクトに を に できず、 の12 のコマンドが され、すべて のバインドにすぎません.(3). : ,ユーザがインタフェースに または した しい を に することを む り, バインド(4)しか できない. バインド:new Vue()のモデルオブジェクトの の をページに できます.また、ページ の の の を、new Vue()のモデルオブジェクトに に (5)することができる.いかがでしたか:
 (6).  : .
 (7).  :v-model 
 　　　(1). Model->View : + DOM 
 　　　(2). View->Model ：new Vue() v-model ， οnchange=function(){} 。 ， 。 ， onchange ， Vue 。
 


 


  : 
 
  : ， ， ！ ！ ， 
 : : 1 0， 
 : : ， / / : : 
 
  : ， ， 。
 
  : 2 
 (1). :
 　　 Vue.filter(“ ”,function( oldVal ){
 　　　　　　　return 
 　　　　　　　 })
 (2). :
 　　　 : {{}} :
 　　　 {{ | }} >
 
  :
 　　(1). new Vue() |， Vue 
 　　(2). ， :
 　　　　a. | oldVal 
 　　　　b. new Vue()
 　　(3). new Vue() ， {{}} ， 。
 
  :
 (1). : 
 　　 Vue.filter(“ ”,function( oldVal , ){
 　　　　　return ， 
 　　　 })
 (2). :
 　　 : {{}} :
 　　{{ | ( )}} >
 
 
  ：
 {{ | 1 | 2 | …}} >
 : ， ， 。
 




axios

 ajax 。 ， ajax 。
 : jquery: $.ajax() vue: axios.get() react: xxx angularJS: xxx :xxx
 : axios Promise ， ajax —— vue， 
 :
 (1). axios.js， axios 
 (2). ， 。 axios 
 axios.defaults.baseURL=“ ”
 (3). get :

axios.get("/      ",{
		　　params:{     1:  1,     2:  2, ... }
　　　	})        
	.then(result=>{ //function(result){
		//         ，    .then      
		//result         
		//result.data       ！
		//            js      
	})                

 : ? 1= 1& 2= 2&…
(4). post :
axios.post("/      ","    1= 1&    2= 2&...")
		//  !!!
		.then(result=>{
			result.data          
		})




 

  : dom jquery ， （ ajax ）。 dom window.onload jquery $(function(){ … })， vue。 :  vue js ， new Vue() 。new Vue() ！
 
  : Vue ， 。
 
  : Vue :
 　　 : -> -> -> -> ->…
 
  Vue ， 4 
 (1). (create): —— 
 　　a.  new Vue ， data ， 
 　　b.  DOM 
 (2). (mount): —— 
 　　a.  DOM 
 　　b.  
 (3). (update): —— data ， 
 (4). (destroy): —— $destroy() ， ， 
 
  ， 
 (1). : vue ， 。
 (2). Vue : 8 （ ）
 beforeCreate(){ … }
 a. (create)
 created(){ … }
 beforeMount(){ … }
 b. (mount)
 mounted(){ … }
 beforeUpdate(){ … }
 c. (update)
 updated(){ … }
 beforeDestroy(){ … }
 d. (destroy)
 destroyed(){ … }
 
  ajax ？
 (1). update ！ update ， 。 data 。 data 。 update ， ， ！
 (2). created() ， :
 　　a. created() ，data ，axios ， data 
 　　b. : created() ， DOM ， DOM 。
 (3). : mounted() ！
 　　a. data ， axios ， DOM ， DOM 。

Ruby

vueディジタルチェック-小数/範囲/除外e

独学先端のvue編

v-show

`v-if v-else`

`v-else-if`

`v-for`

v-on

`v-html`

axios