一、V-model双方向データバインド
1.フォーム要素html用:

    
    
{{msg}}

js:

new Vue({
    el:'#itany',
    data:{
        msg:'hello Vue'
    }
})

二、V-on
click html:

js:

new Vue({
    el:'#itany',
    methods:{
        alt:function(){
            alert("Vue")
        }
    }
})

三、V-show
HTMLの表示/非表示:

js：

new Vue({
    el:'#itany',
    data:{
        see:true,
        arr:[true,false]
    },
    methods:{
        chg:function(){
                if(this.see){
                    this.see=false
            }else{
                this.see=true
            }
//          this.see=!this.see
        }
    }
})

四、V-if

    
00000000
    
111111111
    
22222222
    
3333333
    
44444444
    
555555


<script>
    new Vue({
        el:'#app',
        data:{
            num:Math.fooor(Math.random()*(5-0+1)+0)//      
          //      num:Math.floor(Math.random()*(max-min+1)+min)
        }
    })

v-if制御要素の表示と非表示ですが、v-showとは異なり、v-if、v-else、v-else-ifはvisibity:hiddenを使用します.v-if表示非表示はdom要素全体をv-if,v-else,v-else-if原生jsと同様に追加または削除する
display:noneとvisibity:hiddenの違い:
display:noneは要素を完全に非表示にし、要素がページ空間を占有しないため、占有空間は他の要素に占有され、機能が完全に消失(物理空間を保持しない)visibity:hiddenは要素を非表示にし、占有空間は変わらず、要素を表示しないだけで、機能が完全に消失(物理空間を保持する)