Was sind die Gemeinsamkeiten und Unterschiede zwischen Vue-Projekten und WeChat-Miniprogrammen?

Der Inhalt dieses Artikels befasst sich mit den Gemeinsamkeiten und Unterschieden zwischen dem Vue-Projekt und dem WeChat-Applet? , hat einen bestimmten Referenzwert, Freunde in Not können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

Vorwort

Ich habe ein Vue-Projekt und ein kleines Programm geschrieben und festgestellt, dass sie viele Gemeinsamkeiten aufweisen. Ich möchte die Gemeinsamkeiten und Unterschiede zwischen den beiden zusammenfassen. Im Vergleich dazu ist die Hook-Funktion des Applets viel einfacher.

Ich habe ein Vue-Projekt und ein kleines Programm geschrieben und festgestellt, dass die beiden viele Gemeinsamkeiten haben. Ich möchte die Gemeinsamkeiten und Unterschiede zwischen den beiden zusammenfassen.

1. Lebenszyklus

Erster Beitrag zwei Bilder:

Vue-Lebenszyklus

Lebenszyklus des Miniprogramms

Im Vergleich dazu ist die Hook-Funktion des Miniprogramms viel einfacher.

Die Hook-Funktion von Vue wird beim Springen zu einer neuen Seite ausgelöst, aber die Hook-Funktion des Applets löst bei verschiedenen Seitensprungmethoden unterschiedliche Hooks aus.

• onLoad: Seite wird geladen

Eine Seite wird nur einmal aufgerufen. Die zum Öffnen der aktuellen Seite aufgerufenen Abfrageparameter können in onLoad abgerufen werden .

• onShow: Seitenanzeige

wird bei jedem Öffnen der Seite aufgerufen.

• onReady: Das erste Rendern der Seite ist abgeschlossen

Eine Seite wird nur einmal aufgerufen, was bedeutet, dass die Seite bereit ist und kann mit der Ansichtsebene interagieren.

Bitte legen Sie nach onReady Schnittstelleneinstellungen wie wx.setNavigationBarTitle fest. Einzelheiten finden Sie unter Lebenszyklus

• onHide: Seite ausblenden

Wird aufgerufen, wenn „navigateTo“ oder die untere Registerkarte umgeschaltet wird.

• onUnload: Entladen der Seite

Wird aufgerufen, wenn „redirectTo“ oder „navigateBack“ erfolgt.

Datenanforderung

Wenn die Seite Daten lädt und anfordert, ist die Verwendung der beiden Hooks im Allgemeinen ähnlich, wenn Daten erstellt oder bereitgestellt werden, während in Miniprogrammen Daten angefordert werden in onLoad oder onShow.

2. Datenbindung

VUE: Wenn Vue den Wert einer Variablen dynamisch an ein Attribut des Elements bindet, wird vor der Variablen ein Doppelpunkt eingefügt : , Beispiel:

1.  <img  alt="Was sind die Gemeinsamkeiten und Unterschiede zwischen Vue-Projekten und WeChat-Miniprogrammen?" >

Miniprogramm: Wenn der Wert einer Variablen an ein Elementattribut gebunden wird, wird er in zwei geschweifte Klammern eingeschlossen. Wenn keine Klammern vorhanden sind, wird er als Zeichenfolge betrachtet. Beispiel:

1.  <image></image>

3. Listenrendering

Fügen Sie den Code direkt ein, die beiden sind sich immer noch etwas ähnlich

vue:

1.  

   2.  
•    3.  {{ item.message }}   4.  
   5.  

   7.  var example1 = new Vue({   8.  el: '#example-1',   9.  data: {   10.  items: [   11.  { message: 'Foo' },   12.  { message: 'Bar' }   13.  ]  14.  }   15.  })

Miniprogramm:

1.  Page({  
2.  data: {  
3.  items: [  
4.  { message: 'Foo' },  
5.  { message: 'Bar' }  
6.  ]  
7.  }  
8.  })  

10.  <text>{{item}}</text>

4. Ein- und Ausblenden von Elementen

Verwenden Sie in vue v-if und v -show Steuern Sie das Anzeigen und Ausblenden von Elementen

Verwenden Sie im Applet wx-if und versteckt, um das Anzeigen und Ausblenden von Elementen zu steuern

5. Ereignisverarbeitung

vue: Verwenden Sie v-on:event, um Ereignisse zu binden, oder verwenden Sie @event, um Ereignisse zu binden. Beispiel:

1.  <button>Add 1</button>  
2.  <button>Add1</button>  //阻止事件冒泡

Binden Sie im Miniprogramm mit bindtap (bind+event) oder Catchtap (catch+event) Bestimmte Ereignisse, zum Beispiel:

1.  <button>明天不上班</button>  
2.  <button>明天不上班</button>  //阻止事件冒泡

6. Zwei-Wege-Datenbindung

1. Stellen Sie den Wert

In Vue müssen Sie nur ein V-Modell zum Formularelement hinzufügen und dann einen entsprechenden Wert in den Daten binden. Wenn sich der Inhalt des Formularelements ändert, ändert sich auch der entsprechende Wert in den Daten. Das ist eine sehr schöne Sache an Vue.

1.  <p>  
2.  <input>  
3.  </p>  

5.  new Vue({  
6.  el: '#app',  
7.  data: {  
8.  reason:''  
9.  }  
10.  })

Aber im Miniprogramm gibt es eine solche Funktion nicht. Was zu tun?

Wenn sich der Inhalt des Formulars ändert, wird die an das Formularelement gebundene Methode ausgelöst, und in dieser Methode wird dann der Wert im Formular den Daten über this.setData({key:value) zugewiesen }) entsprechenden Wert.

Das Folgende ist der Code, den Sie spüren können:

1.  <input>  
2.  Page({  
3.  data:{  
4.  reason:''  
5.  },  
6.  bindReason(e) {  
7.  this.setData({  
8.  reason: e.detail.value  
9.  })  
10.  }  
11.  })

Wenn die Seite viele Formularelemente enthält, ist das Ändern des Werts eine physische Aufgabe. Im Vergleich zum Mini-Programm ist das V-Modell von Vue einfach zu gut, um es zu verwenden.

2. Holen Sie sich den Wert

In Vue erhalten Sie den Wert über this.reason

Im Applet erhalten Sie den Wert über this.data .reason

7. Übergabe von Parametern für Bindungsereignisse

In vue ist die Übergabe von Parametern für Bindungsereignisse recht einfach in der Methode übergeben, die das Ereignis auslöst, zum Beispiel:

1.  <button></button>  
2.  new Vue({  
3.  el: '#app',  
4.  methods:{  
5.  say(arg){  
6.  consloe.log(arg)  
7.  }  
8.  }  
9.  })

Im Miniprogramm können Sie Parameter nicht direkt in der Methode zum Binden von Ereignissen übergeben Geben Sie die Parameter als Attributwerte ein und binden Sie sie an die Daten des Elements -Attributes. Rufen Sie sie dann über e.currentTarget.dataset.* ab, um die Übertragung der Parameter abzuschließen.

1.  <view></view>  
2.  Page({  
3.  data:{  
4.  reason:''  
5.  },  
6.  toApprove(e) {  
7.  let id = e.currentTarget.dataset.id;  
8.  }  
9.  })

8. Eltern-Kind-Komponentenkommunikation

1. Verwendung von Unterkomponenten

In vue benötigen Sie:

1. Unterkomponenten schreiben

2. Durch Import in die übergeordnete Komponente einführen, die verwendet werden muss

3. Registrieren in den Komponenten von vue

4. Um

1.  //子组件 bar.vue  
2.  <template>  
3.  <p>  
4.  </p>
<p></p>  
5.    
6.  </template>  
7.  <script>  
8.  export default{  
9.  props:{  
10.  title:{  
11.  type:String,  
12.  default:&#39;&#39;  
13.  }  
14.  }  
15.  }, 

17.  methods:{  
18.  say(){ 
19.  console.log(&#39;明天不上班&#39;);  
20.  this.$emit(&#39;helloWorld&#39;)  
21.  }  
22.  } 
23.  </script>  

25.  // 父组件 foo.vue  
26.  <template>  
27.  <p>  
28.  <bar></bar>  
29.  </p>  
30.  </template>  

32.  <script>  
33.  import Bar from &#39;./bar.vue&#39;  
34.  export default{  
35.  data:{  
36.  title:"我是标题"  
37.  },  
38.  methods:{  
39.  helloWorld(){  
40.  console.log(&#39;我接收到子组件传递的事件了&#39;)  
41.  }  
42.  },  
43.  components:{ 
44.  Bar  
45.  }  
46.  </script>

in der Vorlage zu verwenden, benötigen Sie im Miniprogramm:

1. Unterkomponente

schreiben

  2. 在子组件的json文件中，将该文件声明为组件

1.  {  
2.  "component": true  
3.  }

  3.在需要引入的父组件的json文件中，在usingComponents填写引入组件的组件名以及路径

1.  "usingComponents": {  
2.  "tab-bar": "../../components/tabBar/tabBar"  
3.  }

   4.在父组件中，直接引入即可

1.  <tab-bar></tab-bar>

      具体代码:

1.  // 子组件  
2.  <!--components/tabBar/tabBar.wxml-->  
3.  <view>  
4.  <view>  
5.  <text></text>  
6.  <view>首页</view>  
7.  </view>  
8.  <view>  
9.  <text></text>  
10.  <view>设置</view>  
11.  </view>  
12.  </view>

2.父子组件间通信

在vue中

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

1.  // 父组件 foo.vue  
2.  <template>  
3.  <p>  
4.  <bar></bar>  
5.  </p>  
6.  </template>  
7.  <script>  
8.  import Bar from &#39;./bar.vue&#39;  
9.  export default{  
10.  data:{  
11.  title:"我是标题"  
12.  },  
13.  components:{  
14.  Bar  
15.  }  
16.  </script>  

18.  // 子组件bar.vue  
19.  <template>  
20.  <p>  
21.  </p>
<p></p>  
22.    
23.  </template>  
24.  <script>  
25.  export default{  
26.  props:{  
27.  title:{  
28.  type:String,  
29.  default:&#39;&#39;  
30.  }  
31.  }  
32.  }  
33.  </script>

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

在小程序中

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

1.  <tab-bar></tab-bar>

此处， “index”就是要向子组件传递的值

在子组件properties中，接收传递的值

1.  properties: {  
2.  // 弹窗标题  
3.  currentpage: {            // 属性名  
4.  type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）  
5.  value: 'index'     // 属性初始值（可选），如果未指定则会根据类型选择一个 
6.  } 
7.  }

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

1.  //子组件中  
2.  methods: {     
3.  // 传递给父组件  
4.  cancelBut: function (e) {  
5.  var that = this;  
6.  var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数  
7.  this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用  
8.  }, 
9.  }  
10.  //父组件中  
11.  <bar></bar>   
12.  // 获取子组件信息  
13.  toggleToast(e){  
14.  console.log(e.detail)  
15.  }

如果父组件想要调用子组件的方法

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

1.  //子组件  
2.  <bar></bar>  
3.  //父组件  
4.  this.$ref.bar.子组件的方法

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

1.  //子组件  
2.  <bar></bar>  
3.  // 父组件  
4.  this.selectComponent('#id').syaHello()

相关推荐：

微信小程序无法获取到unionId怎么办

微信小程序上传多张图片限制大小的实例解析

Das obige ist der detaillierte Inhalt vonWas sind die Gemeinsamkeiten und Unterschiede zwischen Vue-Projekten und WeChat-Miniprogrammen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!