Vueの一般的なオプションとプロパティ

Vueオプション
1.データ・オプション
Vueコンポーネントを宣言するときに、オブジェクトタイプのdataオプションを使用すると、テンプレートにはdataで宣言されたデータが見つかりません.Vueテンプレートをサポートする構文検出器を使用すると、「data property in component must be a function」というエラーメッセージが表示されます.
2.属性オプション
Vueはコンポーネント開発にプロパティ(props)オプションを提供し、コンポーネントにダイナミックプロパティを登録してビジネス間の差異を処理し、コードが類似のアプリケーションシーンを多重化できるようにします.
propsオプションは、親コンポーネントから渡されたパラメータを受信し、デフォルト値、タイプチェック、ひざまずいたチェックなどを付与できる配列またはオブジェクトタイプです.
サンプルコードは次のとおりです.

    
    
    
        
        
    
    
    

        
        

        
        

        
        

        
    
    
    
        Vue.component('color-text',{
            props:{
                text:String,
                color:{
                    type:String,
                    default:'#000',     //    
                    required:true,
                    validator (value) {     //    ，        
                        return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(value);
                    }
                }
            },
            template:'<span :style="{color:color}">{{text}}</span>'
        });
        let app = new Vue({
            el:"#app"
        });
    
    
    

3.メソッドオプション
コードの例は次のとおりです.

    
    
    
        
        
    
    
    

    
    
    
    
        let test1 ={
            msg:'Hello World',
            fun1:function () {
                console.log('-------    -----',this);
                console.log(this.msg);
            }
        }
        test1.fun1();
        let test2 ={
            msg:'Hello World',
            fun2: ()=> {
                console.log('-------    -----',this);
                console.log(this.msg);
            }
        }
        test2.fun2();
        let app = new Vue({
            el:"#app",
        });
    
    
    

矢印関数を使用してメソッドを定義する場合、関数の役割ドメインは作成されません.したがって、thisは親インスタンスを指しません.この場合、thisは上に追跡されます.関数の役割ドメインが見つかった場合、thisは関数の親インスタンスを指します.そうでない場合、thisはブラウザの組み込みオブジェクトWindowsを指します.
4.計算属性
計算プロパティ(computedオプション)は、テンプレート上のビジネス負担を軽減することを目的としており、データチェーンに派生データが発生した場合、使用を維持するために使用できます.
サンプルコードは次のとおりです.

    
    



    
    “  ”
    
  :
    
{{message}}.           。
    
{{noSpaceMsg}}
    
{{palindromeMsg}}
    
     “  ”     ，  {{message}}   ，
    
          {{noSpaceMsg}},
    
               {{palindromeMsg}}。
    
   ，{{noSpaceMsg}} == {{palindromeMsg}}
。



    let app = new Vue({
        el:"#app",
        data(){
            return{
                message:'WAS IT A CAT OR A CAT I SAW'
            }
        },
        computed:{
            noSpaceMsg(){
                return this.message.replace(/\s/g,'')
            },
            palindromeMsg(){
                return this.message.replace(/\s/g,'').split('').reverse().join('');
            }
        }
    });

computedを使用すると、コンポーネントのコード構造が明らかに明確になり、後日データのデータ処理方式が変化しても、オプションで変更するだけでよい.methodsと同様に、computedは矢印関数で宣言できず、Vueインスタンスに混入し、thisで呼び出すことができる.
計算プロパティは応答プロパティに依存するため、応答プロパティが変化する場合にのみ計算プロパティが再計算されるため、methods関数を使用して評価するよりも効率的です.
5.リスニング属性
Vueは、リスニング属性(watch属性)を使用してインスタンスにオブジェクトを追加し、オブジェクトが変更されたときに開発者がカスタマイズした方法を呼び出すことができる.

    
    



    
      
        
            *   v-once              
        
    
    
{{message}}
    
{{noSpaceMsg}}
    
      
    
{{message}}
    
{{noSpaceMsg}}




    let app = new Vue({
        el:"#app",
        data(){
            return{
                message:'      ，       。',
                noSpaceMsg:'',
                remoteMsg:'',
                msg:{
                    sender:'aaa',
                    receiver:'bbb'
                }
            }
        },
        methods:{
            loginLine(){
                console.log('----------------------');
            },
            loginMsg(newValue,oldValue){
                console.log(newValue);
            }
        },
        /*
        watch:{
            message (newValue,oldValue){
                this.noSpaceMsg = this.message.replace(/\s/g,'');
            }
        }*/
        //      
        /*
        watch:{
            message (newValue,oldValue){
                axios({     //  ajax    
                    method:'GET',
                    url:'/demo',
                    params:{
                        message:newValue
                    }
                }).then(res =>{
                    this.remoteMsg = res.data.message //            
                })
            }
        }*/
        //   watch
        watch:{
            msg:{
                handler:'logMsg',        //   
                deep:true,               //    ：         ，watch       
                immediate:true         //    ：            watch  
            },
            'msg.sender':['logMsg','logLine']   //    ，       
        }
    });