템플릿의 바인드 표현은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다. 템플릿은보기의 구조를 설명하는 것입니다. 너무 많은 논리를 템플릿에 넣으면 템플릿을 너무 무겁고 유지 관리하기가 어려울 수 있습니다. 이것이 바로 Vue.js가 바인딩 표현을 하나의 표현으로 제한하는 이유입니다. 둘 이상의 표현식이 필요한 경우 ** 계산 속성을 사용해야합니다.
기본 예
<div id = "example"> a = {{a}}, b = {{b}} </div> var vm = new vue ({el : '#example', data : {a : 1}, 계산 : {// 계산 된 속성에 대한 getter b : function () {//`이것은 vm 인스턴스를 가리 킵니다 .a + 1}}})여기서 우리는 계산 된 속성을 선언합니다. b. 우리가 제공하는 기능은 속성 vm.B의 게터로 사용됩니다.
console.log (vm.b) //-> 2vm.a = 2console.log (vm.b) //-> 3
브라우저 콘솔을 열고 VM을 수정할 수 있습니다. vm.b의 값은 항상 vm.a의 값에 따라 다릅니다.
일반 속성을 바인딩하는 것처럼 템플릿에서 계산 된 속성을 바인딩 할 수 있습니다. Vue는 vm.b가 vm.a에 의존한다는 것을 알고 있으므로 vm.a가 변경되면 vm.b에 의존하는 바인딩도 업데이트됩니다. 그리고 가장 좋은 점은 우리 가이 의존성을 선언적으로 만들었다는 것입니다. 계산 된 속성의 getters는 깨끗하고 부작용이 없으므로 테스트하고 이해하기 쉽습니다.
속성을 계산하는 대 $ watch
vue.js는 vue 인스턴스의 데이터 변경을 관찰하는 데 사용되는 메소드 $ watch를 제공합니다. $ watch는 다른 데이터를 기반으로 일부 데이터가 변경되어야 할 때, 특히 AngularJS 출신 인 경우 유혹적입니다. 그러나 일반적으로 필수 $ watch 콜백 대신 계산 된 속성을 사용하는 것이 좋습니다. 다음 예를 고려하십시오.
<div id = "demo"> {{fullname}} </div> var vm = new vue ({el : '#demo', data : {firstName : 'foo', lastName : 'bar', fullName : 'foo bar'})) vm. $ watch ( 'firstname', function (val) {vallname = vallname = vallname = vallname. this.lastname}) vm. $ watch ( 'lastname', function (val) {this.fullname = this.firstname + '' + val})위의 코드는 명령의 반복입니다. 계산 속성과 비교 :
var vm = new vue ({data : {firstName : 'foo', lastName : 'bar'}, 계산 : {fullName : function () {return this.firstName + '' + this.lastname}})이거 낫지 않습니까?
세터를 계산하십시오
계산 된 속성은 기본적으로 getter 일 뿐이지 만 필요할 때 세터를 제공 할 수도 있습니다.
// ... compute : {fullName : {// getter get : function () {return this.firstName + '' + this.lastName}, // setter set : function (newValue) {var names = newValue.split ( '') this.firstname = names [0] this.lastname = length -1]}}}}}}}}이제 vm.fullname = 'John Doe'를 호출 할 때 세터가 호출되고 vm.firstname 및 vm.lastname도 그에 따라 업데이트됩니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.