Was sind die Unterschiede zwischen Vue- und WeChat-Miniprogrammen?-Front-End-Fragen und Antworten-php.cn

Unterschied: 1. „v-if“ und „v-show“ werden in Vue verwendet, um das Anzeigen und Ausblenden von Elementen zu steuern, während „wx-if“ und „hidden“ in Miniprogrammen verwendet werden; „ wird in vue -on:event“ zum Binden von Ereignissen verwendet, während das Miniprogramm „bindtap(bind+event)“ zum Binden von Ereignissen verwendet.

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

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

1. Lebenszyklus Die Hook-Funktion ist viel einfacher.

Die Hook-Funktion von vue wird beim Springen zu einer neuen Seite ausgelöst, aber die Hook-Funktion von mini program löst den Hook bei verschiedenen Seitensprungmethoden nicht aus das gleiche.

onLoad: Seite wird geladen
Eine Seite wird nur einmal aufgerufen. Sie können den aufrufen, um die aktuelle Seite in <code>onLoad zu öffnen. code> query Parameter.
onShow: Seitenanzeige
Wird bei jedem Seitenaufruf einmal aufgerufen.
onReady: Das anfängliche Rendern der Seite ist abgeschlossen
Eine Seite wird nur einmal aufgerufen, was bedeutet, dass die Seite bereit ist und mit der Ansichtsebene interagieren kann .
Schnittstelleneinstellungen wie wx.setNavigationBarTitle sollten nach onReady festgelegt werden. Einzelheiten finden Sie unter Lebenszyklus
onHide: Seitenausblenden
Wird aufgerufen, wenn navigateTo oder die untere Registerkarte gewechselt wird.
onUnload: Seite entladen
Wird aufgerufen, wenn redirectTo oder navigateBack.

Datenanforderung

Wenn die Seite Daten lädt und anfordert, ist die Verwendung der beiden Hooks in created im Allgemeinen etwas ähnlich oder Daten werden in mount angefordert, und in Mini Program werden Daten in onLoad oder

onShow angefordert Code>. <p><img src="https://img.php.cn/upload/article/000/000/024/27a302ede55805e17a386cc8dcb998cc-0.png" alt="">2. Datenbindung</p>
<p><code>VUE

: Wenn Vue den Wert einer Variablen dynamisch an ein Attribut eines Elements bindet, wird vor der Variablen ein Doppelpunkt eingefügt:, zum Beispiel: <img :src="imgSrc"/>
Nach dem Login kopieren
< code>Miniprogramm: Wenn der Wert einer Variablen an ein Elementattribut gebunden ist, wird er in zwei geschweifte Klammern eingeschlossen. Wenn keine Klammern vorhanden sind, wird er als Zeichenfolge betrachtet. Beispiel:

<image src="{{imgSrc}}"></image>

Nach dem Login kopieren

3. Listen-Rendering

小程序的钩子函数要简单得多。

vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

onLoad: 页面加载
一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

数据请求

在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。

二、数据绑定

VUE:vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例：

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}  </li></ul>var example1 = new Vue({
  el: &#39;#example-1&#39;,
  data: {
    items: [
      { message: &#39;Foo&#39; },
      { message: &#39;Bar&#39; }
    ]
  }
})

Nach dem Login kopieren

小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。例：

Page({
  data: {
    items: [
      { message: &#39;Foo&#39; },
      { message: &#39;Bar&#39; }
    ]
  }
})<text wx:for="{{items}}">{{item}}</text>

Nach dem Login kopieren

三、列表渲染

直接贴代码，两者还是有些相似

vue：

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

Nach dem Login kopieren

小程序：

<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡

Nach dem Login kopieren

四、显示与隐藏元素

vue中，使用v-if 和v-show控制元素的显示和隐藏

小程序中，使用wx-if和hidden控制元素的显示和隐藏

五、事件处理

vue：使用v-on:event绑定事件，或者使用@event绑定事件,例如:

<div id="app">
    <input v-model="reason" placeholder="填写理由" class=&#39;reason&#39;/>
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
   reason:&#39;&#39;
  }
})

Nach dem Login kopieren

小程序中，全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件,例如：

<input bindinput="bindReason" placeholder="填写理由" class=&#39;reason&#39; value=&#39;{{reason}}&#39; name="reason" />

Page({
data:{
    reason:&#39;&#39;
},
bindReason(e) {
    this.setData({
      reason: e.detail.value
    })
  }
})

Nach dem Login kopieren

六、数据双向绑定

1.设置值

在vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是vue非常nice的一点。

<button @click="say(&#39;明天不上班&#39;)"></button>

new Vue({
  el: &#39;#app&#39;,
  methods:{
    say(arg){
    consloe.log(arg)
    }
  }
})

Nach dem Login kopieren

但是在小程序中，却没有这个功能。那怎么办呢？
当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过this.setData({key:value})来将表单上的值赋值给data中的对应值。
下面是代码，可以感受一下:

<view class=&#39;tr&#39; bindtap=&#39;toApprove&#39; data-id="{{item.id}}"></view>
Page({
data:{
    reason:&#39;&#39;
},
toApprove(e) {
    let id = e.currentTarget.dataset.id;
  }
})

Nach dem Login kopieren

当页面表单元素很多的时候，更改值就是一件体力活了。和小程序一比较，vue的v-model简直爽的不要不要的。

2.取值

vue中，通过this.reason取值

小程序中，通过this.data.reason取值

七、绑定事件传参

在vue中，绑定事件传参挺简单，只需要在触发事件的方法中，把需要传递的数据作为形参传入就可以了，例如：

//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:&#39;&#39;
      }
    }
},
methods:{
    say(){
       console.log(&#39;明天不上班&#39;);
       this.$emit(&#39;helloWorld&#39;)
    }
}
</script>

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from &#39;./bar.vue&#39;
export default{
data:{
    title:"我是标题"
},
methods:{
    helloWorld(){
        console.log(&#39;我接收到子组件传递的事件了&#39;)
    }
},
components:{
    Bar
}
</script>

Nach dem Login kopieren

在小程序中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.* Fügen Sie den Code direkt ein, die beiden sind sich immer noch etwas ähnlich

🎜🎜vue: 🎜🎜

{
  "component": true
}

Nach dem Login kopieren

🎜🎜Miniprogramm: 🎜🎜

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

Nach dem Login kopieren

🎜🎜 4. Elemente ein- und ausblenden 🎜🎜 🎜< In Code>vue verwenden Sie v-if und v-show, um das Anzeigen und Ausblenden von Elementen zu steuern. 🎜🎜In Mini Program< /code>, Verwenden Sie <code>wx-if und hidden, um die Anzeige und das Ausblenden von Elementen zu steuern🎜🎜5. Ereignisverarbeitung🎜🎜vue: Verwendung v-on :event, um Ereignisse zu binden, oder verwenden Sie @event, um Ereignisse zu binden, zum Beispiel: 🎜

<tab-bar currentpage="index"></tab-bar>

Nach dem Login kopieren

🎜Mini Program, alle verwenden < code>bindtap(bind+ event) oder catchtap(catch+event), um Ereignisse zu binden, zum Beispiel: 🎜

// 子组件
<!--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>
  <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>

Nach dem Login kopieren

🎜🎜 6. Zwei-Wege-Datenbindung 🎜🎜🎜🎜 1. Legen Sie den Wert 🎜🎜🎜 in < In code>vue fest. Sie müssen lediglich v-model zum Element form hinzufügen und dann das entsprechende Element binden in data Ein Wert. Wenn sich der Inhalt des Formularelements ändert, ändert sich auch der entsprechende Wert in data. Das ist eine sehr schöne Sache an

vue< /code>. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 父组件 foo.vue
&lt;template&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;bar :title=&quot;title&quot;&gt;&lt;/bar&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import Bar from &amp;#39;./bar.vue&amp;#39;
export default{
data:{
    title:&quot;我是标题&quot;
},
components:{
    Bar
}
&lt;/script&gt;

// 子组件bar.vue
&lt;template&gt;
  &lt;div class=&quot;search-box&quot;&gt;
    &lt;div :title=&quot;title&quot; &gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default{
props:{
    title:{
       type:String,
       default:&amp;#39;&amp;#39;
      }
    }
}
&lt;/script&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Aber im <code>Mini-Programm

gibt es keine solche Funktion. 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 this.setData({key:value}) verwendet Legen Sie die Daten im Formular fest. Der Wert wird dem entsprechenden Wert in data zugewiesen.
Das Folgende ist der Code, den Sie spüren können: 🎜

<tab-bar currentpage="index"></tab-bar>
此处， “index”就是要向子组件传递的值

Nach dem Login kopieren

🎜Wenn es viele Formularelemente auf der Seite gibt, ist das Ändern der Werte eine physische Aufgabe. Im Vergleich zum Mini Program ist das v-model von vue einfach zu gut, um es zu verpassen. 🎜🎜🎜2. Holen Sie sich den Wert🎜🎜🎜Übergeben Sie in vue this.reason, um den Wert zu erhalten.🎜🎜Übergeben Sie in mini program this.data.reason value 🎜🎜🎜 7. Bindung von Ereignisübergabeparametern 🎜🎜🎜 In vue ist die Bindung von Ereignisübergabeparametern recht einfach. Sie müssen nur die Methode verwenden das das Ereignis auslöst, übergeben Sie einfach die Daten, die als formale Parameter übergeben werden müssen, zum Beispiel: 🎜

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

Nach dem Login kopieren

🎜In Mini Program können Sie Parameter in der Methode zum Binden von Ereignissen nicht direkt übergeben. Sie müssen die Parameter als übergeben. Der Attributwert wird an das Attribut data- des Elements gebunden und dann in der Methode über

e.currentTarget.dataset.*</ abgerufen. code> um die Parameterübertragung abzuschließen, ist das nicht sehr mühsam, nicht wahr?<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;view class=&amp;#39;tr&amp;#39; bindtap=&amp;#39;toApprove&amp;#39; data-id=&quot;{{item.id}}&quot;&gt;&lt;/view&gt;
Page({
data:{
    reason:&amp;#39;&amp;#39;
},
toApprove(e) {
    let id = e.currentTarget.dataset.id;
  }
})</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><h2><strong>八、父子组件通信</strong></h2><p><strong><span style="font-size: 16px;">1.子组件的使用</span></strong></p><p>在<code>vue

中，需要：

编写子组件
在需要使用的父组件中通过import引入
在vue的components中注册
在模板中使用

//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:&#39;&#39;
      }
    }
},
methods:{
    say(){
       console.log(&#39;明天不上班&#39;);
       this.$emit(&#39;helloWorld&#39;)
    }
}
</script>

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from &#39;./bar.vue&#39;
export default{
data:{
    title:"我是标题"
},
methods:{
    helloWorld(){
        console.log(&#39;我接收到子组件传递的事件了&#39;)
    }
},
components:{
    Bar
}
</script>

Nach dem Login kopieren

在小程序中，需要：

编写子组件
在子组件的json文件中，将该文件声明为组件
```
{
  "component": true
}
```
Nach dem Login kopieren
Nach dem Login kopieren
在需要引入的父组件的json文件中，在usingComponents填写引入组件的组件名以及路径
```
"usingComponents": {
    "tab-bar": "../../components/tabBar/tabBar"
  }
```
Nach dem Login kopieren
Nach dem Login kopieren

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

<tab-bar currentpage="index"></tab-bar>

Nach dem Login kopieren

具体代码:

// 子组件
<!--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>
  <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>

Nach dem Login kopieren

2.父子组件间通信

在vue中

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

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from &#39;./bar.vue&#39;
export default{
data:{
    title:"我是标题"
},
components:{
    Bar
}
</script>

// 子组件bar.vue
<template>
  <div class="search-box">
    <div :title="title" ></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:&#39;&#39;
      }
    }
}
</script>

Nach dem Login kopieren

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

在小程序中

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

<tab-bar currentpage="index"></tab-bar>
此处， “index”就是要向子组件传递的值

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

//子组件中
methods: {   
    // 传递给父组件
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: &#39;cancel&#39; } // detail对象，提供给事件监听函数
      this.triggerEvent(&#39;myevent&#39;, myEventDetail) //myevent自定义名称事件，父组件中使用
    },
}

//父组件中
<bar bind:myevent="toggleToast"></bar>

// 获取子组件信息
toggleToast(e){
    console.log(e.detail)
}

Nach dem Login kopieren

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

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

//子组件
<bar ref="bar"></bar>

//父组件
this.$ref.bar.子组件的方法

Nach dem Login kopieren

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

//子组件
<bar id="bar"></bar>

// 父组件
this.selectComponent(&#39;#id&#39;).syaHello()

Nach dem Login kopieren

【相关推荐：《vue.js教程》】

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