웹 프론트엔드 프런트엔드 Q&A vue와 WeChat 애플릿의 차이점은 무엇입니까?

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

Dec 16, 2020 pm 05:34 PM
vue 위챗 애플릿

차이점: 1. vue의 후크 기능은 새 페이지로 이동할 때 실행되지만 애플릿의 후크 기능은 다양한 페이지 점프 방법에서 다양한 후크를 실행합니다. 2. vue에서 v-if 및 v-show를 사용하여 요소 표시 및 숨기기를 제어합니다. 미니 프로그램에서 wx-if 및 Hidden을 사용하여 요소 표시 및 숨기기를 제어합니다.

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

관련 추천: "vue.js Tutorial", "WeChat Mini Program Tutorial"

vue와 WeChat Mini 프로그램의 차이점

1. 수명주기

첫 번째 게시물 두 장의 사진: vue lifecycle

미니 프로그램 라이프사이클

에 비해 미니 프로그램의 Hook 기능은 훨씬 간단합니다. vue의 후크 기능은 새 페이지로 이동할 때 트리거되지만 애플릿의 후크 기능은 페이지의 다양한 점프 방법에서 다른 후크를 트리거합니다. onLoad: 페이지 로딩페이지는 한 번만 호출됩니다. onLoad에서 현재 페이지를 열기 위해 호출되는 쿼리 매개변수를 가져올 수 있습니다. onShow: 페이지 표시는 페이지가 열릴 때마다 호출됩니다. onReady: 페이지의 초기 렌더링이 완료되었습니다.페이지는 한 번만 호출됩니다. 이는 페이지가 준비되었으며 뷰 레이어와 상호 작용할 수 있음을 의미합니다. wx.setNavigationBarTitle과 같은 인터페이스 설정은 onReady 이후에 설정되어야 합니다. 자세한 내용은 수명주기를 참조하세요. onHide: 페이지가 숨겨집니다.navigateTo 또는 하단 탭이 전환될 때 호출됩니다. onUnload: 페이지 언로드 중redirectTo 또는 NavigationBack 시 호출됩니다. 데이터 요청페이지가 로드되어 데이터를 요청할 때 두 후크의 사용은 다소 비슷합니다. Vue는 일반적으로 생성되거나 마운트된 데이터를 요청하는 반면, 미니 프로그램에서는 onLoad 또는 onShow에서 데이터를 요청합니다.

2. 데이터 바인딩

vue: vue가 값이 요소의 속성인 변수를 동적으로 바인딩할 때 변수 앞에 콜론을 추가합니다. 예:

<img :src="imgSrc"/>
로그인 후 복사

Mini 프로그램: 바인딩 특정 변수의 값이 요소 속성인 경우 두 개의 중괄호로 묶입니다. 대괄호가 없으면 문자열로 간주됩니다. 예:

<image src="{{imgSrc}}"></image>
로그인 후 복사

3. 목록 렌더링

코드를 직접 게시하세요. 둘은 여전히 ​​다소 유사합니다. vue:

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>
 
var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})
로그인 후 복사

미니 프로그램:

Page({
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})
 
<text wx:for="{{items}}">{{item}}</text>
로그인 후 복사

4. 요소 표시 및 숨기기

vue에서는 v-if 및 v-show를 사용하여 요소 표시 및 숨기기를 제어합니다. 애플릿에서는 wx-if 및 hided를 사용하여 요소의 표시 및 숨기기를 제어합니다.

5. 이벤트 처리

vue: v-on:event를 사용하여 이벤트를 바인딩하거나 @event를 사용하여 이벤트를 바인딩합니다. 예:

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡
로그인 후 복사

미니 프로그램에서 바인딩+이벤트를 사용하거나 catchtap(catch+event) 바인딩 이벤트, 예:

<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button> //阻止事件冒泡
로그인 후 복사

6. 양방향 데이터 바인딩

1. 값 설정

vue에서는 양식 요소에 v-model만 추가하면 됩니다. 그런 다음 데이터에 해당 값을 바인딩합니다. 양식 요소의 내용이 변경되면 그에 따라 데이터의 해당 값도 변경됩니다. 이는 Vue의 매우 좋은 점입니다.

<p id="app">
 <input v-model="reason" placeholder="填写理由" class=&#39;reason&#39;/>
</p>
 
new Vue({
 el: '#app',
 data: {
 reason:''
 }
})
로그인 후 복사

근데 미니프로그램에는 그런 기능이 없어요. 무엇을 해야 할까요? 양식 내용이 변경되면 양식 요소에 바인딩된 메서드가 트리거되고 이 메서드에서는 this.setData({key:value})를 통해 양식의 값이 데이터의 해당 값에 할당됩니다. 코드는 다음과 같습니다.

<input bindinput="bindReason" placeholder="填写理由" class=&#39;reason&#39; value=&#39;{{reason}}&#39; name="reason" />
 
Page({
data:{
 reason:''
},
bindReason(e) {
 this.setData({
  reason: e.detail.value
 })
 }
})
로그인 후 복사

페이지에 양식 요소가 많을 때 값을 변경하는 것은 물리적인 작업입니다. 미니 프로그램에 비해 Vue의 v-model은 너무 멋져서 필요하지 않습니다.

2. 값

vue에서는 this.reason을 사용하여 값을 가져옵니다. 애플릿에서는 this.data.reason을 통해 값을 얻습니다.

7. 이벤트 매개변수 바인딩 및 전달

Vue에서는 이벤트 매개변수를 바인딩하고 전달하는 것이 매우 간단합니다. 이벤트를 트리거하는 메서드에서 형식 매개변수로 전달해야 하는 데이터만 전달하면 됩니다. 예:

<button @click="say(&#39;明天不上班&#39;)"></button>
 
new Vue({
 el: '#app',
 methods:{
 say(arg){
 consloe.log(arg)
 }
 }
})
로그인 후 복사

미니 프로그램에서는 이벤트 바인딩 방법에서 매개변수를 직접 전달할 수 없습니다. 매개변수를 속성 값으로 사용하고 이를 요소의 데이터 속성에 바인딩한 다음 e를 전달해야 합니다. .* 메소드의 .currentTarget.dataset를 사용하여 매개변수 전송을 완료하는 것은 매우 번거로운 일입니다...

<view class=&#39;tr&#39; bindtap=&#39;toApprove&#39; data-id="{{item.id}}"></view>
Page({//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
data:{
 reason:''
},
toApprove(e) {
 let id = e.currentTarget.dataset.id;
 }
})
로그인 후 복사

8. 상위 및 하위 구성 요소 간의 통신

1. Vue에서는 다음이 필요합니다. 1. 하위 구성 요소 작성 2. 사용해야 하는 상위 컴포넌트에 import를 통해 도입합니다. 3. Vue 컴포넌트에 등록 4. 미니 프로그램의 템플릿에서

//子组件 bar.vue
<template>
 <p class="search-box">
 <p @click="say" :title="title" class="icon-dismiss"></p>
 </p>
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:''
  }
 }
},
methods:{
 say(){
  console.log('明天不上班');
  this.$emit('helloWorld')
 }
}
</script>
 
// 父组件 foo.vue
<template>
 <p class="container">
 <bar :title="title" @helloWorld="helloWorld"></bar>
 </p>
</template>
 
<script>
import Bar from './bar.vue'
export default{
data:{
 title:"我是标题"
},
methods:{
 helloWorld(){
  console.log('我接收到子组件传递的事件了')
 }
},
components:{
 Bar
}
</script>\
로그인 후 복사

를 사용하려면 다음이 필요합니다. 1. 하위 구성 요소 작성 2. 하위 컴포넌트의 json 파일에서 해당 파일을 컴포넌트

{
 "component": true
}
로그인 후 복사

로 선언합니다. 3. 도입해야 하는 상위 컴포넌트의 json 파일에서 usingComponents에 가져온 컴포넌트의 컴포넌트 이름과 경로를 입력합니다.

"usingComponents": {
 "tab-bar": "../../components/tabBar/tabBar"
 }
로그인 후 복사

4. 상위 컴포넌트에서 직접 가져오기만 하면 됩니다

<tab-bar currentpage="index"></tab-bar>
로그인 후 복사
로그인 후 복사

특정 코드:

// 子组件
<!--components/tabBar/tabBar.wxml-->
<view class=&#39;tabbar-wrapper&#39;>
 <view class=&#39;left-bar {{currentpage==="index"?"active":""}}&#39; bindtap=&#39;jumpToIndex&#39;>
 <text class=&#39;iconfont icon-shouye&#39;></text>
 <view>首页</view>
 </view>//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
 <view class=&#39;right-bar {{currentpage==="setting"?"active":""}}&#39; bindtap=&#39;jumpToSetting&#39;>
 <text class=&#39;iconfont icon-shezhi&#39;></text>
 <view>设置</view>
 </view>
</view>
로그인 후 복사

2、父子组件间通信

在vue中

父组件向子组件传递数据,只需要在子组件通过 v-bind传入一个值,在子组件中,通过 props接收,即可完成数据的传递,示例:

// 父组件 foo.vue
<template>
 <p class="container">
 <bar :title="title"></bar>
 </p>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
 title:"我是标题"
},
components:{
 Bar
}
</script>
//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力 
// 子组件bar.vue
<template>
 <p class="search-box">
 <p :title="title" ></p>
 </p>
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:''
  }
 }
}
</script>
로그인 후 복사

子组件和父组件通信可以通过 this.$emit将方法和数据传递给父组件。

在小程序中

父组件向子组件通信和vue类似,但是小程序没有通过 v-bind,而是直接将值赋值给一个变量,如下:

<tab-bar currentpage="index"></tab-bar>
로그인 후 복사
로그인 후 복사

此处, “index”就是要向子组件传递的值 在子组件 properties中,接收传递的值

properties: {
 // 弹窗标题
 currentpage: {   // 属性名
  type: String,  // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  value: 'index'  // 属性初始值(可选),如果未指定则会根据类型选择一个
 }
 }
로그인 후 복사

子组件向父组件通信和 vue也很类似,代码如下:

//子组件中
methods: { 
 // 传递给父组件
 cancelBut: function (e) {
  var that = this;
  var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数
  this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件,父组件中使用
 },
}
 
//父组件中
<bar bind:myevent="toggleToast"></bar>
 
// 获取子组件信息
toggleToast(e){
 console.log(e.detail)
}
로그인 후 복사

如果父组件想要调用子组件的方法 vue会给子组件添加一个 ref属性,通过 this.$refs.ref的值便可以获取到该子组件,然后便可以调用子组件中的任意方法,例如:

//子组件
<bar ref="bar"></bar>
//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力 
//父组件
this.$ref.bar.子组件的方法
로그인 후 복사

小程序是给子组件添加 id或者 class,然后通过 this.selectComponent找到子组件,然后再调用子组件的方法,示例:

//子组件
<bar id="bar"></bar>
 
// 父组件
this.selectComponent('#id').syaHello()
로그인 후 복사

小程序和vue在这点上很相似

更多编程相关知识,请访问:编程学习!!

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 echart를 사용하는 방법 vue에서 echart를 사용하는 방법 May 09, 2024 pm 04:24 PM

Vue에서 ECharts를 사용하면 애플리케이션에 데이터 시각화 기능을 쉽게 추가할 수 있습니다. 특정 단계에는 ECharts 및 Vue ECharts 패키지 설치, ECharts 소개, 차트 구성 요소 생성, 옵션 구성, 차트 구성 요소 사용, Vue 데이터에 반응하는 차트 만들기, 대화형 기능 추가 및 고급 사용법이 포함됩니다.

vue에서 내보내기 기본값의 역할 vue에서 내보내기 기본값의 역할 May 09, 2024 pm 06:48 PM

질문: Vue에서 내보내기 기본값의 역할은 무엇입니까? 자세한 설명: 내보내기 기본값은 구성 요소의 기본 내보내기를 정의합니다. 가져올 때 구성 요소를 자동으로 가져옵니다. 가져오기 프로세스를 단순화하고 명확성을 높이며 충돌을 방지합니다. 개별 구성 요소를 내보내고, 명명된 내보내기와 기본 내보내기를 모두 사용하고, 전역 구성 요소를 등록하는 데 일반적으로 사용됩니다.

Vue에서 지도 기능을 사용하는 방법 Vue에서 지도 기능을 사용하는 방법 May 09, 2024 pm 06:54 PM

Vue.js 맵 함수는 각 요소가 원래 배열의 각 요소를 변환한 결과인 새 배열을 생성하는 내장된 고차 함수입니다. 구문은 map(callbackFn)입니다. 여기서 callbackFn은 배열의 각 요소를 첫 번째 인수로 받고 선택적으로 인덱스를 두 번째 인수로 받아 값을 반환합니다. map 함수는 원래 배열을 변경하지 않습니다.

vue에서 이벤트와 $event의 차이점 vue에서 이벤트와 $event의 차이점 May 08, 2024 pm 04:42 PM

Vue.js에서 event는 브라우저에 의해 트리거되는 기본 JavaScript 이벤트인 반면, $event는 Vue 구성 요소에서 사용되는 Vue 관련 추상 이벤트 객체입니다. $event는 데이터 바인딩을 지원하도록 형식이 지정되고 향상되었으므로 일반적으로 $event를 사용하는 것이 더 편리합니다. 기본 이벤트 객체의 특정 기능에 액세스해야 하는 경우 이벤트를 사용하세요.

vue에서 내보내기와 내보내기 기본값의 차이점 vue에서 내보내기와 내보내기 기본값의 차이점 May 08, 2024 pm 05:27 PM

Vue.js에서 모듈을 내보내는 방법에는 내보내기와 기본값 내보내기라는 두 가지 방법이 있습니다. 내보내기는 명명된 엔터티를 내보내는 데 사용되며 중괄호를 사용해야 합니다. 내보내기 기본값은 기본 엔터티를 내보내는 데 사용되며 중괄호가 필요하지 않습니다. 가져올 때 내보내기로 내보낸 엔터티는 해당 이름을 사용해야 하는 반면, 내보내기 기본값으로 내보낸 엔터티는 암시적으로 사용될 수 있습니다. 여러 번 가져와야 하는 모듈에는 내보내기 기본값을 사용하고, 한 번만 내보내는 모듈에는 내보내기를 사용하는 것이 좋습니다.

vue에서 onmounted의 역할 vue에서 onmounted의 역할 May 09, 2024 pm 02:51 PM

onMounted는 Vue의 구성 요소 마운팅 라이프 사이클 후크입니다. 해당 기능은 DOM 요소에 대한 참조 가져오기, 데이터 설정, HTTP 요청 전송, 이벤트 리스너 등록 등과 같은 구성 요소가 DOM에 마운트된 후 초기화 작업을 수행하는 것입니다. 구성 요소가 마운트될 때 한 번만 호출됩니다. 구성 요소가 업데이트된 후 또는 삭제되기 전에 작업을 수행해야 하는 경우 다른 수명 주기 후크를 사용할 수 있습니다.

Vue의 후크는 무엇입니까 Vue의 후크는 무엇입니까 May 09, 2024 pm 06:33 PM

Vue 후크는 특정 이벤트 또는 수명 주기 단계에서 작업을 수행하는 콜백 함수입니다. 여기에는 수명 주기 후크(예: beforeCreate, 마운트, beforeDestroy), 이벤트 처리 후크(예: 클릭, 입력, 키다운) 및 사용자 정의 후크가 포함됩니다. 후크는 구성 요소 제어를 강화하고 구성 요소 수명 주기에 응답하며 사용자 상호 작용을 처리하고 구성 요소 재사용성을 향상시킵니다. 후크를 사용하려면 후크 함수를 정의하고 로직을 실행한 후 선택적 값을 반환하면 됩니다.

vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? May 09, 2024 pm 02:33 PM

Vue.js 이벤트 수정자는 다음을 포함한 특정 동작을 추가하는 데 사용됩니다. 기본 동작 방지(.prevent) 이벤트 버블링 중지(.stop) 일회성 이벤트(.once) 이벤트 캡처(.capture) 수동 이벤트 수신(.passive) 적응형 수정자(.self)키 수정자(.key)

See all articles