Vue.js基礎知識総括編1

9714 ワード
Vue.js
Vue.js基礎知識総括編1
  • ガイド
  • VUE.JSは何ですか.
  • テンプレート構文:補間、命令、略語
  • 計算キャッシュとMethods
  • 計算属性とリスニング属性
  • ClassとStyleバインド
  • 条件レンダリング
  • リストレンダリング
  • データインタラクション

    • 一.VUE.JSは何ですか.
  • Vue.jsはユーザインタフェースを構築する漸進的なフレームワークである.
  • Vue.jsは極めて簡素なMVVMフレームワーク
    • である.
  • VueはIE 8および以下のバージョン
    • をサポートしていません.
  • 尤雨渓はVueです.jsフレームワークの著者は、2014年2月、先端開発ライブラリVueをオープンした.js.
  • 2016年9月3日、Vueの著者尤雨渓は技術顧問としてアリババWeexチームに加盟することを正式に発表した.

  • MVVMフレームワーク(MVVMはコードを3層に分け、データの双方向バインドが可能)
  • Mモデル層(データを保存するためのもの)
  • Vビューレイヤ(HTMLの内容を表示し、ページにレンダリングされた内容)
  • VMビューモデル層(Vueというフレームワーク)は、MとVの2つの層
    • を接続するために使用される.
  • データの双方向バインド
  • M層が変化すると、VM層を介してV層が
    • を自動的に更新する.
  • V層が変化すると、VM層を介してM層が
    • を自動的に更新する.
  • 双方向データバインディングは、データとビューの双方向バインディングであり、データが変化するとビューも変化し、ビューが変化するとデータも変化する.

  • es 5のObject.defineProperty() 
    •     
    
    
    var obj = {a : 1}    
    //   obj   a    
    Object.defineProperty(obj, "a", {
        set(newVal){  //  obj.a    ，       
            console.log('set:', newVal)
            span1.innerHTML = newVal; //     
        },
        get(){  //  obj.a    ，       
            console.log('get');
            return 123
        }
    });

    Vueがなぜデータ駆動を実現できるのかは、Vueのフレームワークがes 5のObjectを使用するためである.defineProperty()関数は、データを観測し、データが変化すると自動的にいくつかのコードが実行されます.例えば、spanとobjの関連付けを、set関数が実行されると、spanのコンテンツはobjのaのコンテンツになります.
  • Vueの一般的な2つの使用方法:
  • 1、scriptラベルを直接vueファイルに導入します.
  • 2、vueファイルをwebpackで導入します.


    • テンプレート構文:補間、コマンド、省略
  • 1.≪データ・ドライバ|Data Driver|emdw≫:データが変更されると、ビューが自動的に更新されます.例えば、コンソールにvmを入力.a=「こんにちは」;ページの内容は「こんにちは」と表示されます.
    • 
    {{ message }}

    

var app = new Vue({
    el: '#app',
    data() {
       return{
            message: 'Hello Vue!';
       }
    }
})
  • 2.テンプレート構文:
    •     ：	

	
    hello
    

v-bind   ：
	
	v-bind  div  title   vue message       。
	v-bind:title="message"       :title="message",    ，     。

  ： 
	Message: {{ msg }}

v-once   :
       1   
    {{ msg }}

  ：
	 
    	
    

JS：
	{{ number + 1 }}
	{{ ok ? 'YES' : 'NO' }}
	{{ message.split('').reverse().join('') }}

    v-model,计算属性与侦听属性

    • v-model
      一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突。
      v-model 实现视图层发生变化时，数据也发生变化。例如下列代码，当输入的 a 和 b 的值发生变化时，c 的值也会被计算出来，并自动显示。
        
    
        
        +
        
        =
        {{c}}
    
    

    
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                a : 1,
                b : 2
            }
        },
        computed:{
            c(){
                return Number(this.a) + Number(this.b);
            }
        }
    })
  • 計算プロパティcomputed:{}computedはオブジェクトで、オブジェクトは関数です.ビューレイヤで、呼び出すときは、計算プロパティのプロパティ名を直接書き、()を付けないでください.
    • computed:{
            c(){
                return Number(this.a) + Number(this.b);
            }
        }
  • 計算属性のsetterおよびgetter計算属性の値が変更されたときにsetが実行されます.デフォルトではgetが実行され、取得時にgetが実行されます.
    •  computed:{
            c : {
                get(){
                    console.log('get');
                    return this.a+this.b;
                },
                set(v){
                    console.log('set:', v)
                }
            }
        }
  • methodメソッド
    • {{d()}}

method:{
 d(){
    console.log('d    ');
    return Number(this.a) + Number(this.b);
    },
}

    計算用属性(計算属性にキャッシュがあるため)は推奨、vmの実行は推奨されない.str=「abc」の場合、このコードはd()とは何の関係もありませんが、d()が実行され、ビューが変化すればmethodsでメソッドが実行されることを意味します.
    同じ関数を計算プロパティではなくメソッドとして定義できます.両方式の最終結果は確かに全く同じである.しかしながら、異なるのは、計算属性がそれらの依存に基づいてキャッシュされることである.依存関係が変更された場合にのみ、それらは再評価されます.対照的に、呼び出し方法は、再レンダリングがトリガーされるたびに関数を再実行します.
  • 計算属性キャッシュ計算属性キャッシュは、パフォーマンス消費を低減することができる.
  • リスニング属性
    • watch:{
            a(v){
                this.c = Number(this.b) + Number(v);
            },
            b(v){
                this.c = Number(this.a) + Number(v);
            }
        }
  • classとstyle
  • class v-bindバインドプロパティclass、classに値を割り当て、「abc」はdataの変数です.
    • 


    
   	 
    
   
    
   	
   var app = new Vue({    
   	el: '#app',
   	data: { abc:"xyz" }
   }})

    添加多个class 属性
    对象的写法

    
   	 
    
   
    
   	
   var app = new Vue({    
   	el: '#app',
   	data: { 
           
   		classObj:{ "xyz":true, "abc":false } 
   	}
   }})

    数组的写法：

    123
     
   data: {	a : "x",	b : "y" } 

   
    123
    	 
   data: {	classArr : ["a", "b-c"] }
  • styleはstyleをバインドし、値はオブジェクトです.
    • 123
     
	data: { a:'blue', c:100 } 

	
    123
     	 
	data: { classObj: { background:'yellow', 'font-size':'50px'} }

	
    123
    
	data: { a:{background:'yellow'}, b:{color:'orange'} }

	
    123
    
	data: { classArr: [{background:'red'}, {color:'green'}] }
  • 条件レンダリングv-ifおよびv-show
  • v-if v-ifとv-else-if、v-elseを組み合わせて使用します.
    •

    小さなケースでは、切り替えボタンを作り、ボタンをクリックしてdivボックスの追加と削除の効果を実現します.bln:trueの場合、divを追加します.bln:falseの場合、divを削除します.
        
    
    
        
        
    hello
    
    
    

    
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                bln : true
            }
        },
        methods:{
            handle(){
                this.bln = !this.bln;
            }
        }
    })
  • 要素上でv-if条件を使用してパケットをレンダリングするv-ifは命令であるため、要素に追加する必要があります.しかし、複数の要素を切り替えたい場合は?この場合、1つの要素を非表示のラップ要素として使用し、v-ifを使用することができます.最終的なレンダリング結果には要素は含まれません.
    •
  • keyで多重化可能な要素Vueを管理すると、可能な限り効率的に要素がレンダリングされ、通常は最初からレンダリングするのではなく既存の要素が多重化されます.Vueを非常に速くする以外にも、いくつかのメリットがあります.たとえば、ユーザーが異なるログイン方式を切り替えることを許可する場合:
    •

    では、上記のコードでloginTypeを切り替えると、ユーザーが入力した内容は消去されません.2つのテンプレートは同じ要素を使用しているので、置き換えられません.placeholderを置き換えただけです.
    これは必ずしも実際のニーズに合致しないため、Vueは「この2つの要素は完全に独立しており、多重化しないでください」と表現する方法を提供しています.一意の値を持つkeyプロパティを追加するだけです.

    キー属性が追加されていないため、要素は効率的に多重化されます.
  • v-show v-showは要素のCSS属性displayを簡単に切り替えるだけです.bln:trueで表示され、bln:falseで非表示になります.非表示にすると、ノードにdisplayのプロパティが追加され、ノードは直接削除されません.v-ifとの違いは、v-if値がfalseの場合、ノードが直接削除され、v-showはノードが削除されないことです.

    • v-showは要素もv-elseもサポートしていません.
  •       ？
    •
  • v-showとv-ifの区別ドキュメントの説明:v-ifは、切替中に条件ブロック内のイベントリスナーとサブコンポーネントが適切に破棄され、再構築されることを保証するため、「真」の条件レンダリングです.

    • v-ifも不活性です.初期レンダリング時に条件が偽の場合、条件が初めて真になるまで条件ブロックのレンダリングが開始されません.
    それに比べて、v-showはずっと簡単です.初期条件が何であれ、要素は常にレンダリングされ、CSSに基づいて簡単に切り替えるだけです.
    一般に、v-ifはより高いスイッチングオーバーヘッドを有し、v-showはより高い初期レンダリングオーバーヘッドを有する.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いるのが好ましい.実行時に条件が変更されない場合は、v-ifを使用するとよい.
  • リストレンダリングv-forはデータをループ操作し、ループ後にいくつかのデータをページに表示し、配列とオブジェクトをリストレンダリングすることができます.配列が最も多く使われている.
    •     
    
       
       

       
  • 
           {{val + ' ------- ' + ind }}
           
       
    • 
    
    

    
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                str : "",
                arr : [
                    "a", "b", "c", "d"
                ]
            }
        },
        methods:{
            fn(){
                this.arr.push(  this.str );
            }
        }
    })

    v-forの詳細については、https://cn.vuejs.org/v2/guide/list.html
    GObject 03: An Instantiatable Class
    vue-cli 3.x distパスの変更