Enlace de datos y enlace de eventos para applets

Enlace de datos para applets

        1. Los datos a representar se colocan en datos en index.js

Page({
  data: {
    info:'HELLO WORLD',
    imgSrc:'/images/1.jpg',
    randomNum:Math.random()*10,
    randomNum1:Math.random().toFixed(2)
  },
})

2. Obtener datos         a través de {{}} en WXML

 <view>{
    
    {info}}</view>
 <image src="{
    
    {imgSrc}}" mode="widthFix"></image>
 <view>{
    
    {randomNum >= 5 ? '大于等于5' : '小于5'}}</view>
 <view>{
    
    {randomNum1 * 100}}</view>

 

Enlace de eventos para applets

        Qué es un evento: el método de comunicación de la capa de representación a la capa lógica, que transfiere el comportamiento del usuario en la capa de representación a la capa lógica

       eventos comunes     

• tocar (tocar y salir)
• entrada (entrada de cuadro de texto) 
• cambio (cambio de estado)

        Vincular eventos a través de vincular

bindtap/bind:tap

     Lista de propiedades del objeto de evento

        Cuando se activa la devolución de llamada del evento, se recibirá un evento de objeto de evento y sus propiedades son las siguientes

tipo	tipo de evento
marca de tiempo	El número de milisegundos que tardó la página en abrirse hasta que se disparó el evento
objetivo	Una colección de algunos valores de atributo del componente que desencadenó el evento (el componente de origen que desencadenó el evento)
objetivo actual	Una colección de algunos valores de atributo del componente actual (el componente que desencadena el evento)
detalle	información adicional
toca	Evento táctil, una matriz de información de puntos de contacto actualmente en la pantalla
Toques cambiados	Evento táctil, una matriz de información de punto de contacto que cambia actualmente

        1. Vincular eventos a componentes

<button type="primary" bindtap="btnHandler">按钮</button>

        2. Haga clic en el evento activado por el componente

Page({ 
  btnHandler(e){
     console.log(e)
  }
})

        3. Ver el efecto vinculante

 

 Representar y sincronizar los datos vinculados al evento (evento v-model de vue)

        1. Crear una información compartida

Page({ 
  data:{ 
    msg:"你好"
  }, 

}) 

        2. Vincule el componente de entrada a un evento de sincronización y renderice los datos

         { {}} obtener datos

<input value="{
    
    {msg}}" bindinput="syn"/>

        3. Escriba eventos de sincronización en js para sincronizar datos 

         this.setData reasigna los datos

Page({ 
  data:{ 
    msg:"你好"
  }, 
  syn(e){
   this.setData({
     msg: e.detail.value
   })
  }
})