ここではvue 1を勉強します.0と2.0は彼らの間に何が違うかを見てみましょう.
1.vueの基礎指令##
1.1 v-on指令の使用;###

//html
   name 
//        
   name 

//js
var vm = new Vue({
    el:'#app', //    vue    app div  
    data: {
        name:'     '  //     MVVM  Model    
    },
    methods:{
        change:function(){
            this.name += '1';
        }
    }
});

注意:

常用イベント:v-on:click,keydown,keyup,mouseover,submitなど;

は略記方式@clickを使用しています.

イベント修飾子:(.prevent,.stop)、それぞれコードはデフォルトの動作を阻止し、バブル

を阻止する.
1.2差分式

//html
  
    {{ name + '1'}} 
    {{ name == 'wo'? 'true': 'false' }}
    {{ if1(name) }}  

//js
var vm = new Vue({
    el:'#app', 
    data: {
        name:'     '
    },
    methods:{
        'if1':function(str){
            return str == 'wo'
        }
    }
});

注意:関数名の使用を定義するには、es 6キーワードの使用を最小限に抑える.差分式ではシンチレーションの問題が発生するため、使用時にシンチレーションの問題を回避する必要があります.
1.3 v-textとv-html

    

    


new Vue({
    el :'#app',
    data:{
        name:'
     
'
    }
});

注意：text会转义标签，html不会转义标签

1.4 v-bloak 指令(解决{{}} 闪烁问题)####

    

        {{name}}
    

//js
new Vue({
    el:'#app',
    data:{
        name:'     '
    }
});

注意:対応するcssコードを書くのに協力して使用します
1.5 v-bind

    

        
                //    
        
                //         
        ジャンプ
    
    

var vm = new Vue({
    el:'#app',
    data:{
        name:'     ',
        id:2
    }
});

注意:v-bindを使用する場合、一部の内容が変わらない場合は、3つ目の方法を使用することができます.
1.6 v-model双方向データバインド###

        

        

        
        

        

        

/js
var vm = new Vue({
    el:'#app',
    data:{
        name:'     ',
        user:{uname:'',upwd:''}
    },
    methods:{
    submit:function(){
        alert(this.user.uname +"  pwd="+this.user.upwd);
    }
}
});

注意:
1.v-modelを使用する場合は修飾子、numberが存在する.lazy .trim 2.しかしvue 1.0とvue 2.0の使用方法は異なります.次に、公式サイトのドキュメント修飾子を参照してください.

vue1.0    

vue 2.0    

1.7 v-for####

    

        
         
{{index}}-{{item}}
        
        
    

//js
new Vue({
    el:'#app',
    data:{
        list:[1,2,3,4,4],
        user:{uname:'itcast',age:10}
    }
});

注意:vue 1.0と2.0 v-for使用の違いのまとめ

vue1.0は合計$indexであり、2.0で$index

が除去された.

vue1.0では(index,item)in list,2.0では(item,index)in listの書き方

となる.

vue1.0でtrakck-byを使用してdomオブジェクトの一意性をマークします.vue 2.0ではkey

に変更されました.
1.8 v-ifとv-show

    

          
        
div  
    


new Vue({
    el:'#app',
    data:{
        isshow:true
    },
    methods:{
        toggle:function(){
            //         isshow         
            this.isshow =!this.isshow;
        }
    }
});

注意:
v-if表示しないとdomノードが削除され、v-showはノードにdisplay:noneを追加します.