初認識Vue

13318 ワード
JAva入門編
これはVueです.js
  • Vue.jsは現在とても火の先端のフレームです;Angular.とjs、React.jsはフロントエンドの3つの主流フレームワークと呼ばれている.
  • Vue.jsはユーザーインタフェースを構築するフレームワークであり、ビューレイヤ(MVCのV層)のみに注目している.サードパーティ製ライブラリや既存のプロジェクトとの統合が容易である.
  • Vueでは、DOM要素の操作を減らし、プログラマーがビジネスロジックに注目できるようにすることが核心的な概念です.

    • バックエンドのMVCとフロントエンドのMVVMの違い
  • MVCはバックエンドの階層開発コンセプト
  • MVVMはフロントエンドビューレイヤーの概念であり、主にビュー層の分離に注目する.すなわち、MVVはフロントエンドをModel、View、VMの3つの部分に分けている
  • Model:ページに表示するデータが必要
  • View:ビュー、HTML
  • VM:データ(Model)とビュー(View)の間のスケジューラ

    • 図解
    導入事例
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    


    
    Document





    
	
	
    {
        { msg }}
    

    




	//   Vue  ，  new       MVVM  vm   
	var vm = new Vue({
		el: '#app', // element   ，      new   Vue     
		data: {		// data     el      
			msg: 'Hello Vue!'
		}
	});

    説明:
  • 1、まずVueを導入する必要がある.js
  • 2、Vueインスタンスを宣言する制御領域は、指定divまたはbody体に置くことができる.制御領域で使用するVue構文はVueで認識される
  • 3、Vueインスタンスを作成する.このインスタンスがMVVMのvmスケジューラである
  • 4、el:当時のVue例を示す制御領域;data:現在のVueインスタンスに必要なModel(データ)を格納します.msgはVueの要素です.
  • 5、指定されたVueインスタンス領域の下に、我々が宣言した要素を表示するmsg使用:表示可能(ここでmsgはVueで宣言した要素であり、宣言しなかった場合はエラーを報告する)
    • 常用命令
    v-cloak
    入門例では、ViewレイヤでVueバインドされたデータを補間式で示すことができることを初歩的に理解しました.しかし、ネットワークが遅い場合、すなわちvue.jsまだロードが完了していない場合、ビューレイヤはVueの補間式として認識されず、文字列としてページに表示されるという問題がある.
    この問題を解決するためにjsはv-cloak命令を提供し,補間式の点滅の問題を解決できる.
    1

    {
        { msg }}

    拡張補間式点滅の問題を解決するには、v-cloak命令のほか、Vueはv-text命令を提供します.
    1

    v-cloak与v-text的区别
    v-text默认会覆盖掉元素中原有的内容
    v-cloak不会覆盖掉原有的内容

    v-bind

    在上面，我们了解了v-text输出Vue元素，但是如果我们需要显示的数据是一段HTML代码，v-text和都将无能为力，
    为此，Vue提供了专门渲染HTML数据的指令：v-html

    上面我们学习的指令都是Vue内置的指令，那么在Vue内置的指令中显示Vue绑定的变量，这当然没毛病；但是如果直接在HTML属性中使用Vue绑定的指令（不是用）这样可以吗？

    1

    答えはもちろんだめです.HTML属性でVueバインドの変数を直接使用するため、HTMLはVueの要素を参照しているのではなく、文字列として出力します.
    上記の問題を解決するために、Vueはv-bind:いくつかのHTML属性をバインドする命令を提供した.
    1

    以上のように、v-bind:バインドされた属性は、その要素が文字列ではなく、Vueのバインドされた変数として認識される(同様にこの変数は宣言しなければならない).またv-bind:もう一つの簡易表記::.
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    

    
    
    
    

    




    //   Vue  ，  new       MVVM  vm   
    var vm = new Vue({
        el: '#app', // element   ，      new   Vue     
        data: { // data     el      
            msg: '  '
        }
    });

    v-on
    Vueはイベントバインドメカニズムの命令を提供した:v-on:;一般的なトリガイベントをバインドするために使用できます:click、mouseover...
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    

    
    
    

    




    //   Vue  ，  new       MVVM  vm   
    var vm = new Vue({
        el: '#app', // element   ，      new   Vue     
        data: { // data     el      
            msg: '  '
        },
        methods: {
        	show: function(){
        		alert("hello");
        	}
        }
    });

    このうちmethodsはVueに内蔵されたオブジェクトで、いくつかのカスタムメソッド関数を格納するために使用されます
    jsに内蔵された関数を拡張setInterval(タイマー)を使用して、ランニングライト効果を実現:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

    

    
    
    
    
    {
        {msg}}
    

    




    //   Vue  ，  new       MVVM  vm   
    var vm = new Vue({
        el: '#app', // element   ，      new   Vue     
        data: { // data     el      
            msg: '  ，  ',
            intervalId: null
        },
        methods: {
        	action(){
        		if(this.intervalId != null) return;

        		//    
        		this.intervalId = setInterval(() => {
        			//      
        			var start = this.msg.substring(0, 1);
        			//              
        			var end = this.msg.substring(1);
        			//            ，       
        			this.msg = end + start;
        		},400)
        	},
        	stop(){
	        	//      
        		clearInterval(this.intervalId)
        		//            intervalId     null
        		this.intervalId = null;
        	}
        }
    });

    解释:1、v-on:简写形式:@、使い方は以上の通り.2、ビュー層でVMの中のデータを取って、私たちはいくつかの内蔵命令を使用することができます.VMインスタンス内で定義された他の変数やメソッドなどを取得し、使用:this. (その中のthisは現在のVMインスタンスオブジェクトを示す).3、methodName:function(){}ES 6には簡便な書き方がある:methodName(){}.4、setInterval()とclearInterval()はjsに内蔵された関数であり、使い方は上記の通りである.5、通常我々が呼び出した関数はname(function(){})と書くが、ES 6はmethodName(() => {})という使い方を提供している.この使い方のメリットは解決したthis要素が関数の内部に定義されている場合、その中のthisは現在の関数のオブジェクトを表し、外部のオブジェクトを使用する必要がある場合、外部でグローバルにオブジェクトを定義する以外に、簡単な方法はES 6を使用して提供される=>です.
    イベント修飾子
    .stopは泡を止める.preventはデフォルトのイベントをブロックします.Captureがタイムリスナーを追加する際にタイムキャプチャモードを使用する.selfは、イベントがサブエレメントではないなどのエレメント自体でトリガーされた場合にのみコールバックをトリガーします.onceイベントは1回のみトリガーされます.
    使用方法:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    

    
    
    
        
        
    
    

    



	//   Vue  ，  new       MVVM  vm   
	var vm = new Vue({
	    el: '#app', // element   ，      new   Vue     
	    data: { // data     el      
	        msg: '  ，  ',
	    },
	    methods: {
	        divClick() {
	        	console.log("  div     ");
	        },
	        btnClick() {
	        	console.log("  btn     ");
	        }
	    }
	});

    v-model
  • 唯一の双方向バインド命令:v-model
  • 一方向バインド命令:v-bing
    • ≪インスタンス｜Instance｜emdw≫
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    

    
    
    
    {
        {msg}}
    

    



	//   Vue  ，  new       MVVM  vm   
	var vm = new Vue({
	    el: '#app', // element   ，      new   Vue     
	    data: { // data     el      
	        msg: 'hello!',
	    },
	    methods: {

	    }
	});

    vueのスタイル
    外注スタイル
  • 配列 うちitalic、colorはカスタムクラス名で、CSSスタイルを外部で定義する必要がある
  • 配列にネストされたオブジェクト その中のflagはVueバインドの変数でありdata宣言する
  • 直接使用対象
    • ≪インスタンス｜Instance｜emdw≫
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    


    
	
      
    
    
      
    
    
      
    

    



	//   Vue  ，  new       MVVM  vm   
	var vm = new Vue({
	    el: '#app', // element   ，      new   Vue     
	    data: { // data     el      
	        flag: true
	    },
	    methods: {

	    }
	});

    インラインスタイル
  • スタイルオブジェクトをdataに定義し、:styleで参照
    1
2
3
4
5

      
    

data: {
	styleObj: { 'color': 'red', 'font-weight': '200px'}
}

  • :styleで配列を通して複数参照data上のスタイルオブジェクト
    1
2
3
4
5
6

      
    

data: {
	styleObj: { 'color': 'red', 'font-weight': '200px'},
	styleObj2: { 'font-style': 'italic' }
}


    • ≪インスタンス｜Instance｜emdw≫
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    

    
    
      
    
    
      
    

    



	//   Vue  ，  new       MVVM  vm   
	var vm = new Vue({
	    el: '#app', // element   ，      new   Vue     
	    data: { // data     el      
	        styleObj: { 'color': 'red', 'font-weight': '200px' },
	        styleObj2: { 'font-style': 'italic' }
	    },
	    methods: {

	    }
	});

    v-for
    Vueは、集合、配列を巡る命令を提供する:v-for;使い方:v-for=" in "反復配列
    1
2
3
4
5

      ：{
        {i}} ---  ：{
        {item}}
    

data: {
	list: [1,2,3,4]
}

    そのうちのiは反復して得られる別名であり、書き込み可能であっても書かなくてもよいが、反復要素別名の後に定義しなければならない
    反復オブジェクト配列
    1
2
3
4
5
6
7
8

    id: {
        {item.id}} --- name: {
        {item.name}}
    

data: {
	list2: [
        	{ id:1, name: '  ' },
        	{ id:2, name: '  ' }
        ],
}

    オブジェクト配列を反復します.この属性名は、オブジェクト配列で定義された要素属性名です.
    反復オブジェクト
    1
2
3
4
5
6
7
8

     : {
        {key}} ---  : {
        {val}}
    

data: {
	user: {
        	id: 1,
        	name: '  '
        }
}

    反復オブジェクト、反復して得られるのはオブジェクトのvalue値とkey値、注意して得られる1つ目はvalue値、2つ目はkey値であり、私たちが定義したオブジェクト属性の順序とは正反対である.
    ≪インスタンス｜Instance｜emdw≫
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    

    
    
      ：{
        {i}} ---  ：{
        {item}}
    
    
    id: {
        {item.id}} --- name: {
        {item.name}}
    
    
     : {
        {key}} ---  : {
        {val}}
    

    



	//   Vue  ，  new       MVVM  vm   
	var vm = new Vue({
	    el: '#app', // element   ，      new   Vue     
	    data: { // data     el      
	        list: [1,2,3,4], 
	        list2: [
	        	{ id:1, name: '  ' },
	        	{ id:2, name: '  ' }
	        ],
	        user: {
	        	id: 1,
	        	name: '  '
	        }
	    },
	    methods: {

	    }
	});

    に注意
    vue 2.0+バージョンでは、v-forデータをレンダリングする場合、対応するkey値を設定する必要があります(ここでkeyは属性であり、前の反復のkey値ではありません).
    使用方法:
    1

     
    ここで:keyキー属性は、v-bindバインドされた要素でなければならないことを示しているが、:key=""で指定された値はstring/numberタイプの値でなければならず、それよりもitem.id中IDはnumber値であり、一意である.
    目的:反復要素を回避する場合、ループ要素にバインドされるのは、指定した要素(アイデンティティの指定)ではなく、リスト内のいくつかの要素(位置の指定)です.
    v-showとv-if
    Vueは2つの命令を提供して要素表示状態の切り替えを実現する:v-ifv-show区別する
  • v-if特徴:毎回要素を削除・作成し直し、切り替え性能が高い(実行するたびに要素を削除・作成するため)
  • v-showの特徴:DOMの削除や作成操作は毎回行われず、要素のみが切り替わっているdisplay:noneスタイルが高く、初見のレンダリング消費が高い(つまり毎回要素を隠すだけで、本当に削除していない).
    • ≪インスタンス｜Instance｜emdw≫
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    

    
    

    
      v-if     
    
    
      v-show     
    

    



    //   Vue  ，  new       MVVM  vm   
    var vm = new Vue({
        el: '#app', // element   ，      new   Vue     
        data: { // data     el      
            flag: false
        },
        methods: {

        }
    });
    ゲームのUIデザインでよく使うPhotoshopスタイル
    photoshopでレイヤーをグループ毎他のカンバスに持ってく方法