search
HomeWeb Front-endFront-end Q&AWhat is the difference between vue and WeChat applet?

Difference: 1. When the hook function of vue jumps to a new page, the hook function will be triggered; but for the hook function of the mini program, the hooks triggered are different depending on the page jump method. 2. Use v-if and v-show in vue to control the display and hiding of elements; use wx-if and hidden in mini programs to control the display and hiding of elements.

What is the difference between vue and WeChat applet?

Related recommendations: "vue.js Tutorial", "WeChat Mini Program Tutorial"

The difference between vue and WeChat applet

1. Life cycle

First post two pictures: vue life cycle

mini program life cycle

In comparison, the hook function of the mini program is much simpler many. The hook function of vue will be triggered when jumping to a new page, but the hook function of the applet will trigger different hooks in different jump methods of the page. onLoad: Page loadingA page will only be called once. You can get the query parameter called to open the current page in onLoad. onShow: Page display Will be called once every time the page is opened. onReady: The initial rendering of the page is completedA page will only be called once, which means that the page is ready and can interact with the view layer. Interface settings such as wx.setNavigationBarTitle should be set after onReady. See life cycle for details. onHide: Page hide Called when navigateTo or the bottom tab is switched. onUnload: Page unloading Called when redirectTo or navigateBack. Data requestWhen the page loads and requests data, the use of the two hooks is somewhat similar. Vue generally requests data in created or mounted, while in mini programs, it requests data in onLoad or onShow.

2. Data binding

vue: When Vue dynamically binds the value of a variable to an attribute of an element, it will add a colon in front of the variable: , Example:

<img  src="/static/imghwm/default1.png" data-src="imgSrc" class="lazy" alt="What is the difference between vue and WeChat applet?" >

Mini Program: When the value of a variable is bound to an element attribute, it will be enclosed in two curly brackets. If there are no brackets, it will be considered a string. Example:

<image></image>

3. List rendering

Paste the code directly, the two are still somewhat similar: vue:


     
  •  {{ item.message }}  
  var example1 = new Vue({  el: '#example-1',  data: {  items: [   { message: 'Foo' },   { message: 'Bar' }  ]  } })

Mini program:

Page({
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})
 
<text>{{item}}</text>

4. Showing and hiding elements

In vue, use v-if and v-show to control elements Show and hide. In the applet, use wx-if and hidden to control the display and hiding of elements.

5. Event processing

vue: Use v-on:event to bind events, or use @event to bind events, for example:

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

In the mini program, all use bindtap (bind event) or catchtap (catch event) to bind events, for example:

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

6. Two-way data binding

1. Set value

In vue, you only need to add v-model to the form element, and then bind a corresponding value in the data. When the content of the form element changes , the corresponding value in data will also change accordingly, which is a very nice thing about vue.

<p>
 <input>
</p>
 
new Vue({
 el: '#app',
 data: {
 reason:''
 }
})

But in the mini program, there is no such function. then what should we do? When the form content changes, the method bound to the form element will be triggered, and then in this method, the value on the form is assigned to the corresponding value in data through this.setData({key:value}). The following is the code, you can feel it:

<input>
 
Page({
data:{
 reason:''
},
bindReason(e) {
 this.setData({
  reason: e.detail.value
 })
 }
})

When there are many form elements on the page, changing the value is a physical job. Compared with the mini program, Vue's v-model is so cool that you don't need it.

2. Value

In vue, use this.reason to get the value. In the mini program, the value is obtained through this.data.reason.

7. Binding event parameters and passing parameters

In vue, binding event parameters and passing parameters are quite simple. You only need to pass the parameters that need to be passed in the method that triggers the event. Data can be passed in as formal parameters, for example:

<button></button>
 
new Vue({
 el: '#app',
 methods:{
 say(arg){
 consloe.log(arg)
 }
 }
})

In the applet, parameters cannot be passed in directly in the method of binding events. Parameters need to be bound to the element as attribute values. data-attribute, and then in the method, obtain it through e.currentTarget.dataset.* to complete the transfer of parameters. It is very troublesome. Is there any...

<view></view>
Page({//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
data:{
 reason:''
},
toApprove(e) {
 let id = e.currentTarget.dataset.id;
 }
})

8. Parent-child component communication

1. Use of subcomponents In vue, you need: 1. Write subcomponents 2. Introduce it through import in the parent component that needs to be used. 3. Register in components of vue 4. Use

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

in the template. In the mini program, you need: 1. Write subcomponents 2. In the json file of the child component, declare the file as a component

{
 "component": true
}

3. In the json file of the parent component that needs to be imported, fill in the component name and path of the imported component in usingComponents

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

4. In the parent component, just import it directly

<tab-bar></tab-bar>

Specific code:

// 子组件
<!--components/tabBar/tabBar.wxml-->
<view>
 <view>
 <text></text>
 <view>首页</view>
 </view>//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
 <view>
 <text></text>
 <view>设置</view>
 </view>
</view>

2、父子组件间通信

在vue中

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

// 父组件 foo.vue
<template>
 <p>
 <bar></bar>
 </p>
</template>
<script>
import Bar from &#39;./bar.vue&#39;
export default{
data:{
 title:"我是标题"
},
components:{
 Bar
}
</script>
//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力 
// 子组件bar.vue
<template>
 <p>
 </p>
<p></p>
 
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:&#39;&#39;
  }
 }
}
</script>

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

在小程序中

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

<tab-bar></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></bar>
 
// 获取子组件信息
toggleToast(e){
 console.log(e.detail)
}

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

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

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

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

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

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

The above is the detailed content of What is the difference between vue and WeChat applet?. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft