1. Data binding on the interface layer
1.1 Where is the data
The data is in the data attribute of the current page (xxxx.js) object.
1.2 Where to bind to
Use it wherever you want, output in {
{}} syntax
2. About list rendering
Define an object array in the data attribute of the current page (xxxx.js)
and then in the corresponding xxxx.wxml
so that the following display can be displayed.
However, this code is cumbersome, we can use wx:for to dynamically obtain:
where item represents the current Elements of the page being traversed, you can use wx:for-item to alias the elements currently being traversed
3. About the incident
The basic event is used by adding a "bind + event name" attribute to the component , and the value of the attribute points to a js method defined in the current page object . which is:
<button bindtap="buttonTapHandle">点我</button>
The bind+ event is bindtap, and the specified method is buttonTapHandle
event bubbling. Clicking on blue is equivalent to clicking on red, because blue is inside red, and sometimes we need to prevent bubbling. Can catch + event name
event parameter passing
data stream 
from back to front can be {
to pass values {}}
<view class="container">
<input value="{
{message}}" bindinput="inputHandle"/>
<text>{
{message}}</text>
</view>
From front to back, the input event is monitored, and then the value is passed through setData
inputHandle: function(e){
this.setData({
message:e.detail.value
})
}
4. A simple login case
This is the page to be completed. We mainly write the logical code.
First , we
need to design the data structure, which is the data attribute in js.
According to the page, we need a username and a password attribute
and then we
need to bind the data to the specified element. (Use **{
{}}**), add a click event to the button, and write the corresponding logic.
Because the judgment function of the username and password is similar, we can abstract it out.
It is worth noting that in the applet, you cannot define the passing parameters yourself. If you want to pass the parameters, you need to use DataSet.
When you know the attribute name, you can get the value through xxxx. attribute name, and when you don’t know it, you can get the value through xxxx [object name].
Get our custom attributes through dataset (the name is the same before and after the agreement), target is the object that triggers the current event.
from form component
The attribute in the form that wants to be submitted must have a name attribute and a submit button.
5. Conditional rendering
Use wx:if