vue 의 계산 속성 사용 과 vue 인 스 턴 스 방법 예제

2957 단어 vue계산 하 다.속성
본 고 는 vue 계산 속성의 사용 과 vue 실례 의 방법 예 시 를 소개 하고 여러분 에 게 구체 적 으로 다음 과 같이 공유 합 니 다.
계산 속성
템 플 릿 에 서 는 표현 식 이 매우 편리 하지만 실제로는 간단 한 조작 에 만 사 용 됩 니 다.템 플 릿 은 보기 의 구 조 를 설명 하기 위해 서 입 니 다.템 플 릿 에 너무 많은 논 리 를 넣 으 면 템 플 릿 이 너무 무 겁 고 유지 하기 어 려 울 수 있 습 니 다.이것 이 바로 Vue.js 가 바 인 딩 표현 식 을 하나의 표현 식 으로 제한 하 는 이유 입 니 다.표현 식 보다 많은 논리 가 필요 하 다 면 속성 을 계산 해 야 합 니 다.
vue 계산 속성
한 개의 업무 코드 의 실행 결과 에 따라 속성의 값 을 되 돌려 주 려 면 계산 속성 coptute d 를 사용 할 수 있 습 니 다.
계산 속성 은 결과 가 있 는 함수 입 니 다.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.$el  ->  원소
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 설정 은 도 메 인 접근 코드 인 스 턴 스 를 허용 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage