vueにおける属性の計算方法の例とvueの例

2659 ワード

vue 計算する属性

本論文では、vueの属性計算の使用例とvueの例を紹介します。具体的には、以下の通りです。
属性を計算
テンプレート内の表式は非常に便利ですが、実際には簡単な操作だけに使われます。テンプレートは、ビューの構造を説明するためです。テンプレートに多すぎるロジックを入れるとテンプレートが重すぎてメンテナンスが難しくなります。これはなぜVue.jsがバインディング表現を一つの表現に制限したのですか？複数の表式の論理が必要な場合は、属性を計算します。
vue計算属性
端の業務コードの実行結果に基づいて属性の値を返したい場合、計算属性のcomputtedを使ってもいいです。
属性を計算するのは結果がある関数です。get方法とset方法があります。get方法は戻り値が必要です。


<script src="lib/vue.js"></script> 
 
<body> 
<div id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</div> 
</body> 
<script> 
  var vm = new Vue({ 
    el:'#box', 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:function () { 
        //     
        return this.a+1; 
      } 
    } 
  }); 
  /**            ，         set  **/ 
  document.onclick = function(){ 
    vm.b = 3; 
  }; 
</script>

属性のset/getの計算方法:


<script src="lib/vue.js"></script> 
 
<body> 
<div id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</div> 
</body> 
<script> 
  var vm = new Vue({ 
    el:'#box', 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:{ 
        get:function () { 
          return this.a+1; 
        }, 
        set:function(val){ 
          this.a = val; 
        } 
      } 
    } 
  }); 
  /**            ，         set  **/ 
  document.onclick = function(){ 
    vm.b = 3; 
    //         set   
  }; 
</script>

vue実例の簡単な方法
vmは作成されたvueのインスタンスオブジェクトの名前です。
vm.$l -> 元素です
vm.$data -> ダタです
vm.$mount-> ノードオブジェクトにvueオブジェクトをマウントする
例を挙げます


var vm2 = new Vue({ 
    data:{}, 
    methods:{} 
  }).$mount('#box');

等しい:


var vm2 = new Vue({ 
    el:'#box', 
    data:{}, 
    methods:{} 
  });

vm.$options-> カスタム属性の取得、カスタム方法
vueの例は、以下のように属性と方法をカスタマイズできます。呼び出しが必要ならば、$options呼び出しが必要です。


var vm2 = new Vue({ 
   aa:'1',//      
   show:function () { 
     alert(1); 
   }, 
   el:'#box', 
   data:{}, 
   methods:{} 
 }); 
 vm2.$options.show(); 
 console.log(vm2.$options.aa);

vm.$destroy-> オブジェクトを廃棄する
vm.$log(); -> 現在のデータの状態を表示します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

jquery入力ボックスの内容に対するデジタル検証コードの例

springboot構成は、ドメインをまたぐアクセスコードのインスタンスを許可する。