vue(二)

vue(二)
バインドイベント命令v-on

  1
  2
  3
  4

  5


    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            countSum(){
                this.num = this.num + 1
            },
            say(msg){
                console.log(msg);
            }
        }
    })

計算プロパティ
役割:代替可能な複雑な式

    {
    {new Date(birthday).getFullYear() +" "+new Date(birthday).getMonth()+" "}}
    {
    {birth1}}
    {
    {getBirth1()}}


    new Vue({
        el:"#app",
        data:{
            num:0,
            birthday:1529032123201
        },
        methods:{
            getBirth1(){
                return  new Date(this.birthday).getFullYear() +" "+new Date(this.birthday).getMonth()+" "  ;
            }
        },
        computed:{
            //    
            birth1(){
              return  new Date(this.birthday).getFullYear() +" "+new Date(this.birthday).getMonth()+" "  ;
            }
        }
    })

watch

    


    new Vue({
        el:"#app",
        data:{
           msg:''
        },
        methods:{

        },
        watch:{
            msg(newVal,oldVal){
                //          --      --      
                console.log(newVal,oldVal);
                
            }
        }
    })

Vueコンポーネント
(1)以前のコンポーネント:Component--easyuiコンポーネントdatagrid tabs menu...panel,dialog
Vueコンポーネント:カスタムコードブロックまたはカスタムラベル
(2)コンポーネントの使用方法:
(1)繰り返し使用可能
(2)いくつかの機能を完成する
(3)vue内コンポーネント分類
≪グローバル・コンポーネント|Global Components|emdw≫:任意の場所で使用でき、任意のマウント・ラベルで使用できます.
ローカルコンポーネント:現在のマウントラベルでのみ使用できます.
vueコンポーネントはvueの中で比較的重要な知識点です

    
    


    
    


    //    
    Vue.component("mycomponet1",{
        template:"<h1>     1111111</h1>"
    });

    var mycomponet2={
        template:"<h1>     222222</h1>"
    }
    Vue.component("mycomponet2",mycomponet2);


    new Vue({
        el:"#app1"
    });

    new Vue({
        el:"#app2"
    });

ローカルコンポーネント

    
    


    





    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>         111</h2>"
            },
            "mycomponet2":{
                template:"<h2>         222</h2>"
            }
        }
    });

    new Vue({
        el:"#app2"
    });

アセンブリ内のテンプレートの書き方

    




    <h1>template    htmlssssssssssssssss</h1>




    //    :  template    
  /*  new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>         111</h2>"
            }
        }
    });*/
    //   :
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"#mytemplate"
            }
        }
    });

テンプレート内のデータ必須関数

    
    {
    {name}}








    new Vue({
        el:"#app1",
        data:{
          "name":"   1111"
        },
        components:{
            "mycomponet1":{
                template:"#mytemplate",
                data:function(){
                    return {
                        "name":"   "
                    }
                }
            }
        }
    });