The difference between Vue and wechat applet

Martin Luther 2021-04-07 23:11:38
difference vue wechat applet

Yes vue Projects and applets , I found that they have a lot in common , I would like to summarize the similarities and differences between them .

One 、 Life cycle

Post two pictures first :

vue Life cycle

Vue Instance life cycle

Applet life cycle


by comparison , Applet The hook function of is much simpler .

vue When you jump to a new page , Hook functions trigger , however Applet The hook function of , Different ways to jump on a page , The trigger hook is not the same .

  • onLoad: Page loading A page can only be called once , Can be in onLoad Get the query Parameters .
  • onShow: Page shows Called every time a page is opened .
  • onReady: The first rendering of the page is complete A page can only be called once , Representative page is ready , Can interact with view layers . The interface settings are as follows wx.setNavigationBarTitle Please be there. onReady After setting . See life cycle
  • onHide: Page hidden When navigateTo Or the bottom tab Called when switching .
  • onUnload: Page uninstall When redirectTo or navigateBack Called when .
Data request

When the page loads the request data , The use of the two hooks is somewhat similar ,vue Usually in created perhaps mounted Request data in , And in the Applet , Will be in onLoad perhaps onShow Request data in .

Two 、 Data binding

VUE:vue When dynamically binding the value of a variable to an attribute of an element , You put a colon in front of the variable :, example :

<img :src="imgSrc"/> 

Applet : When binding the value of a variable to an element attribute , It'll be enclosed in two braces , If not bracketed , For being considered a string . example :

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

3、 ... and 、 The list of rendering

Post code directly , There are some similarities between the two 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' } ] }}) 

Applet :

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

Four 、 Show and hide elements

vue in , Use v-if and v-show Control the display and hiding of elements

Applet in , Use wx-if and hidden Control the display and hiding of elements

5、 ... and 、 Event handling

vue: Use v-on:event The binding event , Or use @event The binding event , for example :

<button v-on:click="counter += 1">Add 1</button><button v-on:click.stop="counter+=1">Add1</button> // Stop the event from bubbling 

Applet in , All use bindtap(bind+event), perhaps catchtap(catch+event) The binding event , for example :

<button bindtap="noWork"> Not to go to work tomorrow </button><button catchtap="noWork"> Not to go to work tomorrow </button> // Stop the event from bubbling 

6、 ... and 、 Data bidirectional binding

1. Set the value

stay vue in , Just... Again Forms Add to the elements v-model, And then bind data A value corresponding to , When the content of a form element changes ,data The corresponding value in will also change accordingly , This is a vue very nice A bit of .

<div id="app"> <input v-model="reason" placeholder=" Fill in the reason " class='reason'/></div>new Vue({ el: '#app', data: { reason:'' }}) 

But in Applet in , It doesn't have this function . Then what shall I do? ? When the form content changes , Will trigger the binding method on the form element , Then in this method , adopt this.setData({key:value}) To assign values on the form to data The corresponding value in . Here is the code , You can feel it :

<input bindinput="bindReason" placeholder=" Fill in the reason " class='reason' value='{{reason}}' name="reason" />Page({data:{ reason:''},bindReason(e) { this.setData({ reason: e.detail.value }) }}) 

When the page has a lot of form elements , Changing the value is a physical job . and Applet A comparison ,vue Of v-model It's cool not to .

2. Value

vue in , adopt this.reason Value

Applet in , adopt Value

7、 ... and 、 Bind events to pass parameters

stay vue in , It's very easy to bind events to pass parameters , Just in the method that triggers the event , Just pass in the data you need to pass as a formal parameter , for example :

<button @click="say(' Not to go to work tomorrow ')"></button>new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } }}) 

stay Applet in , You can't pass in parameters directly in methods that bind Events , You need parameters as property values , Bound to an element data- Attribute , And then in the method , adopt e.currentTarget.dataset.* Way to obtain , So as to complete , It's a lot of trouble. Do you have ...

<view class='tr' bindtap='toApprove' data-id="{{}}"></view>Page({data:{ reason:''},toApprove(e) { let id =; }}) 

8、 ... and 、 Parent-child component communication

1. Use of subcomponents

stay vue in , need :

  1. Write subcomponents
  2. In the parent component that needs to be used, through import introduce
  3. stay vue Of components Register in
  4. Used in templates
// Child 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:'' } }},methods:{ say(){ console.log(' Not to go to work tomorrow '); this.$emit('helloWorld') }}</script>// Parent component foo.vue<template> <div class="container"> <bar :title="title" @helloWorld="helloWorld"></bar> </div></template><script>import Bar from './bar.vue'export default{data(){ return{ title:" I'm the title " }},methods:{ helloWorld(){ console.log(' I've received the events passed by the subcomponents ') }},components:{ Bar}</script> 

stay Applet in , need :

  1. Write subcomponents

  2. In subcomponent json In file , Declare the file as a component

    { "component": true} 
  3. In the case of the parent component that needs to be introduced json In file , stay usingComponents Fill in the component name and path of the imported component

    "usingComponents": { "tab-bar": "../../components/tabBar/tabBar" } 
  4. In parent component , Directly introduced

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

    Specific code :

    // Child components <!--components/tabBar/tabBar.wxml--><view class='tabbar-wrapper'> <view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'> <text class='iconfont icon-shouye'></text> <view> home page </view> </view> <view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'> <text class='iconfont icon-shezhi'></text> <view> Set up </view> </view></view> 

2. Communication between parent and child components

stay vue in

The parent component passes data to the child component , You just need to go through v-bind Pass in a value , In the child component , adopt props receive , You can transfer the data , Example :

// Parent component foo.vue<template> <div class="container"> <bar :title="title"></bar> </div></template><script>import Bar from './bar.vue'export default{data(){ return{ title:" I'm the title " }},components:{ Bar}</script>// Child components bar.vue<template> <div class="search-box"> <div :title="title" ></div> </div></template><script>export default{props:{ title:{ type:String, default:'' } }}</script> 

Child and parent components can communicate through this.$emit Passing methods and data to the parent component .

stay Applet in

The parent component communicates with the child component and vue similar , however Applet Don't pass v-bind, Instead, you assign a value directly to a variable , as follows :

<tab-bar currentpage="index"></tab-bar> here , “index” Is the value to pass to the child component 

On sub components properties in , Receive the value passed

properties: { // Popup window title currentpage: { // Property name type: String, // type ( Required ), The current types of acceptance include :String, Number, Boolean, Object, Array, null( Represents any type of ) value: 'index' // Property initial value ( Optional ), If it is not specified, it will select one... According to the type } } 

The child component communicates and communicates with the parent component vue It's very similar , The code is as follows :

// Sub components methods: { // Pass to the parent component cancelBut: function (e) { var that = this; var myEventDetail = { pickerShow: false, type: 'cancel' } // detail object , Provided to the event listener function this.triggerEvent('myevent', myEventDetail) //myevent Custom name event , Use... In the parent component },}// Parent component <bar bind:myevent="toggleToast"></bar>// Get subcomponent information toggleToast(e){ console.log(e.detail)} 
If the parent component wants to call the methods of the child component

vue Will add a ref attribute , adopt this.$refs.ref Value You can get the subcomponent , You can then call any method in the subcomponent , for example :

// Child components <bar ref="bar"></bar>// Parent component this.$ Method of subcomponent 

Applet It's about adding... To a subcomponent id perhaps class, And then through this.selectComponent Find the subcomponents , Then call the methods of the subcomponents , Example :

// Child components <bar id="bar"></bar>// Parent component this.selectComponent('#id').syaHello() 
The parent component of the applet changes the style of the child component

1. The parent component will style Pass in subcomponents 2. The parent component passes in variables to control the style of the child component 3. In the parent component style , Add the parent component class name before the child component class name

<view class='share-button-container' bindtap='handleShareBtn'> <share-button product="{{goodProduct}}" type="1" back-color="#fff" fore-color="#9e292f" bind:error="on_error" /></view>.share-button-container .button--btn-navigator__hover{ background: #fff;} 
本文为[Martin Luther ]所创,转载请带上原文链接,感谢

  1. Element tree control: invalid to modify current node key
  2. linux下安装apache(httpd-2.4.3版本)各种坑
  3. How to install Apache (httpd-2.4.3) under Linux
  4. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  5. Nacos serialize for class [] failed.
  6. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  7. Nacos serialize for class [ . common.http.HttpRestResult ] failed.
  8. Seamless management of API documents using eolink and gitlab
  9. vue 的基础应用(上)
  10. 28岁开始零基础学前端,这些血的教训你一定要避免
  11. Basic application of Vue
  12. Starting at the age of 28, you must avoid these bloody lessons
  13. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  14. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  15. 利用Vue实现一个简单的购物车功能
  16. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  17. Using Vue to realize a simple shopping cart function
  18. 【css】伪类和伪类元素的区别
  19. 【css效果】实现简单的下拉菜单
  20. 【vue】父子组件传值
  21. The difference between pseudo class and pseudo class elements
  22. [CSS effect] simple drop-down menu
  23. [Vue] value transfer by parent-child component
  24. 【css】设置table表格边框样式
  25. 【css】修改input,textarea中的placeholder样式
  26. vue-router的两种模式(hash和history)及区别
  27. CSS3的滤镜filter属性
  28. [CSS] set table border style
  29. [CSS] modify the placeholder style in input and textarea
  30. Two modes of Vue router (hash and History) and their differences
  31. Filter property of CSS3
  32. 全局安装gulp 报错问题解决
  33. Solution of error report in global installation of gulp
  34. 18个好用的自定义react hook
  35. 你应该知道的常用服务器HTTP状态码?
  36. 18 user defined react hooks
  37. What HTTP status codes should you know about common servers?
  38. 手把手教你打造属于自己团队的前端小报系统
  39. Hand in hand to teach you to build your own front-end tabloid system
  40. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?
  41. vue cli4.0 快速搭建项目详解
  42. Vue cli4.0 quick build project
  43. vue-cli脚手架安装
  44. Installation of Vue cli scaffold
  45. [JS knowledge] method of getting elements from DOM
  46. 【jQuery效果】文字滚动
  47. [jQuery effect] text scrolling
  48. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  49. React native introduces third party Android SDK
  50. Using html2canvas to generate shared images, CDN images do not show the problem
  51. Using hooks to write react components
  52. Explain the module hot replacement function of webpack in detail
  53. An incomplete guide to writing a simple native wechat applet
  54. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  55. Jsonp method to solve cross domain problems
  56. Canvas animation demo (from zero to one)
  57. El dialog of elementui component encapsulation
  58. Transition group of Vue source code
  59. When encountering bracket validity, next larger element, specific minimum value, try stack
  60. Vue3 virtual DOM