vue.js와 WeChat 애플릿의 차이점은 무엇입니까?

vue.js와 WeChat 미니 프로그램의 차이점: 1. vue가 인스턴스화되면 데이터가 초기화되고 [this.]를 통해 데이터의 데이터를 얻을 수 있습니다. 2. 미니 프로그램에서는 페이지 데이터 이후; 초기화되면 [this.data]를 통해 페이지의 데이터를 가져와서 페이지 개체를 가져옵니다.

【관련 추천 글: vue.js】

vue.js vue.js와 WeChat 미니 프로그램의 차이점:

1. WeChat 미니 프로그램에는 자체 구성 요소 세트가 있습니다. 캡슐화된 뷰 컨테이너

예: 스와이프, 스크롤 뷰, 양식 구성 요소

Vue 프로젝트에서는 타사 구성 요소 라이브러리를 도입해야 할 수도 있습니다. swiper, form 컴포넌트 form 페이지를 구현하기 위해 element-ui, ant-ui 또는 iview를 결합하는 것에 관한 것입니다.

2. 조건부 렌더링 및 목록 렌더링

js에서 조건부 판단에 가장 일반적으로 사용되는 것은 if(){}else{}이고, vue 및 WeChat 애플릿 프레임워크에서는 이 클래스 메서드가 사용됩니다. 명령어 호출을 통해 캡슐화되고 구현됩니다.

In vue:

v-if="Math.random() > 0.5"或者v-if=”true”  //当指令的表达式返回 truthy 值的时候内容会被渲染

vue 프레임워크에 익숙한 사람들, 오랫동안 WeChat 애플릿에 노출되지 않은 결과:

wx-if=”Math.random() > 0.5”   //报错倒是不会，但是并没有按条件执行

그런 다음 실행해 보면 전혀 문제가 없지만 데이터는 단지 안나오네요.. 몇번을 확인해보니 문제가 없을거라 확신이 들었고, 그제서야 백그라운드 데이터를 콘솔에 올렸더니 캐시백 데이터가 나오더군요. WeChat 애플릿의 조건부 렌더링이 올바르지 않을 수 있습니다. 그런 다음 WeChat 애플릿 문서를 확인한 결과

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”

vue에서 목록을 올바르게 렌더링할 때 모두 {{ }}

구문을 통해 인터페이스에 변수를 바인딩하는 것으로 나타났습니다. , WeChat 애플릿에서 구성 요소의 wx:for 제어 속성을 사용하여 변수 배열을 바인딩하면 배열에 있는 각 항목의 데이터를 사용하여 구성 요소를 반복적으로 렌더링할 수 있습니다.

배열의 현재 항목에 대한 아래 첨자 변수 이름의 기본값은 index이고, 배열의 현재 항목에 대한 변수 이름의 기본값은 item입니다.

<p v-for=”(index,item) in array” :key=”item.id”></p>；

wx:for-item을 사용하여 현재 요소의 변수 이름을 지정하세요.

wx:for -index를 사용하면 배열의 현재 첨자의 변수 이름을 지정할 수 있습니다:

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

3. 데이터 획득

vue가 인스턴스화된 후 데이터를 초기화하고 이를 통해 데이터를 얻을 수 있습니다.

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

애플릿에서 페이지 데이터를 초기화한 후 this.data를 통해 페이지 데이터를 얻어 페이지 개체를 얻습니다. .message, 그러나 나중에 이것이 작은 프로그램이라는 것을 갑자기 깨달았습니다. 문제는 다시 살펴보겠습니다. 뷰 인터페이스의 값은 변경되지 않았습니다.

문서를 다시 확인하세요(WeChat 애플릿의 공식 문서에서):

1. this.data를 직접 수정하는 것은 유효하지 않으며 페이지 상태를 변경할 수도 없습니다. 2. 한 번에 설정되는 데이터는 1024kB를 초과할 수 없습니다. 한 번에 너무 많은 데이터를 설정하지 마세요.

3. this.data와 this.setData의 관계는 this.setData가 this.data의 복사본을 저장하고 인터페이스가 this.setData에 호스팅된 this.data의 복사본에서 데이터를 가져오는 것입니다. 따라서 this.data를 변경할 때 인터페이스는 직접 업데이트되지 않습니다. 현재 this.setData의 복사본이 아직 업데이트되지 않았기 때문입니다.

간단히 말하면 setData 함수는 데이터를 새로 고쳐서 페이지에 표시합니다. this.data는 데이터를 변경하지만 보기 페이지의 내용은 변경하지 않습니다.

그러니 올바르게 하세요

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
}

관련 무료 학습 권장 사항:

JavaScript

(비디오)

위 내용은 vue.js와 WeChat 애플릿의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!