What is the difference between vue.js and WeChat applet?

The difference between vue.js and the WeChat applet: 1. After vue is instantiated, data is initialized, and the data in the data can be obtained through [this.]; 2. In the applet, after the page data is initialized, Use [this.data] to get the data of the page to get the page object.

[Related article recommendations: vue.js]

vue.js and WeChat Differences between mini programs:

1. The WeChat mini program has its own set of component view containers, which packages some page view effects that we may usually use;

eg: swiper, scroll-view, form component

In the Vue project, we may need to introduce the third-party component library swiper, and the form component is more combined with element-ui Or use ant-ui or iview to implement the form page.

2. Conditional rendering and list rendering

We all know in js that the most commonly used one for conditional judgment is if(){}else{} , and in the vue and WeChat applet frameworks, it encapsulates this type of method and implements it through instruction calling.

vue:

v-if="Math.random() > 0.5"或者v-if=”true”  //当指令的表达式返回 truthy 值的时候内容会被渲染

People who are accustomed to the vue framework, the consequences of not being exposed to the WeChat applet for a long time:

wx-if=”Math.random() > 0.5”   //报错倒是不会，但是并没有按条件执行

Then execute it, there is nothing wrong with it, right? But The data just couldn't come out. I checked the code several times and was confident that there was absolutely no problem. Then I went to console the background data and the cashback data could be consoled out. Only then did I realize that the conditional rendering of the WeChat applet might not be correct. Then I checked the WeChat applet documentation and found that in WeChat, a variable is bound to the interface through the syntax of

{{ }}. Correct operation

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”

When rendering a list in vue,

<p v-for=”(index,item) in array” :key=”item.id”></p>；

In the WeChat applet, use the wx:for control attribute on the component to bind an array, and the data of each item in the array can be used to repeatedly render the component.

The subscript variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item;

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Use wx:for-item to specify the variable of the current element of the array Name,

Use wx:for-index to specify the variable name of the current subscript of the array:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

3. Data acquisition

After vue is instantiated , initialize data, and the data in data can be obtained through this. Normal operation:

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
}

In the applet, after initializing the page data, the page data is obtained through this.data to obtain the page object. Same operation,

data:{
  message:”呵呵”
},
methods:{
  this.data.message = “呵呵哒”;   //视图界面上的值并没有发生改变
}

Not to mention accidentally this.message, but later I suddenly realized that this was a small program, then the problem came again, the value on the view interface did not change.

Check the document again (from the official document description of the WeChat applet):

1. Directly modifying this.data is invalid and cannot change the status of the page. It will also cause The data is inconsistent.

2. The data set at a time cannot exceed 1024kB. Please try to avoid setting too much data at one time.

3. The relationship between this.data and this.setData is that what is stored in this.setData is a copy of this.data, and the interface gets the data from the copy of this.data hosted in this.setData. So when we change this.data, the interface will not be updated directly, because the copy in this.setData at this time is still not updated.

In short, the setData function refreshes the data and displays it on the page. This.data changes the data, but does not change the content of the view page.

So, operate it correctly

methods:{
  this.data.message = “呵呵哒”;
  this.setDate({
     message:this.data.message
});
console.log(this.data.message)
}

Related free learning recommendations: JavaScript (Video)

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