• 按钮事件--嵌套事件(冒泡)--带参数事件--双向数据绑定


    <!--按钮事件-->
      <button bindtap="buttonTapHandle">点击事件</button>
     buttonTapHandle: function (e) {
        console.log("我点击了")
        //console.dir(e)将一个对象以树状形式打印到控制台
        console.dir(e)
      },
    <!--冒泡事件,嵌套事件,防止两个一块执行-->
      <view bindtap="outerHandle" style="200px; height:200px; background-color:red">
      <!--<view bindtap="innerHandle" style="100px; height:100px; background-color:blue">
        </view>-->
        <view catchtap="innerHandle" style="100px; height:100px; background-color:blue">
        </view>
      </view>
    outerHandle: function(){
        console.log("外部的事件")
      },
      //防止冒泡,将bindtap给为catchtap
      innerHandle: function(){
        console.log("内部的事件")
      },
     <!--事件传参-->
      <button bindtap="tap2Handle" data-name="张三">点击事件</button>
     tap2Handle: function (e){
        console.dir(e.target.dataset.name)
        //console.log(this)//事件处理函数中的this指定的还是页面对象
      },
    <!-- 双向数据绑定 -->
      <view>
        <input value="{{ message2 }}" bindinput="inputHandle" style="border:2px solid #C0C0C0;" />
        <text>{{ message2 }}</text>
      </view>  
    inputHandle: function (e){
        // this.data.message2 = e.detail.value//直接赋值,不能实时改变
        //调用setData方法,实时监听改变
        this.setData({
          message2 : e.detail.value
        })

    index.js

    //index.js
    //获取应用实例
    const app = getApp()
    //将多有的数据和事件写到page方法中
    Page({
      //为页面提供数据的
      //data就是界面和逻辑之间的桥梁
      data:{
        message:"Hello world",
        perssion:{
          name: "zhangsan",
          age: 12
        },
        viewClassname:"hello",
        todos:[
          { name: 'javascript', completed:false },
          { name: 'html', completed: true },
          { name: 'css', completed: false }
        ],
        message2:"",
      },
      buttonTapHandle: function (e) {
        console.log("我点击了")
        //console.dir(e)将一个对象以树状形式打印到控制台
        console.dir(e)
      },
      outerHandle: function(){
        console.log("外部的事件")
      },
      //防止冒泡,将bindtap给为catchtap
      innerHandle: function(){
        console.log("内部的事件")
      },
      tap2Handle: function (e){
        console.dir(e.target.dataset.name)
        //console.log(this)//事件处理函数中的this指定的还是页面对象
      },
      inputHandle: function (e){
        // this.data.message2 = e.detail.value//直接赋值,不能实时改变
        //调用setData方法,实时监听改变
        this.setData({
          message2 : e.detail.value
        })
      }
    })

    index.wxml

    <!--index.wxml-->
    <!-- 基于xml语言,用来定义页面结构单标签也也结束例如image-->
    <view class="container">
      <text>{{message}}</text>
      <text>{{perssion.name}}</text>
      <text>{{perssion.age}}</text>
      <view class=" style1 {{viewClassname}}"></view>
      <!-- mestach语法可以用在以上,不能用于定义标签名和属性名-->
      <!--可以直接使用字面量和简单的逻辑运算符-->
      
      <!--列表渲染-->
      <!--起别名wx:for-item="别名"-->
      <view>
        <view wx:for="{{ todos }}" wx:key="key">
          <text>{{ index }}</text>
          <checkbox checked="{{ item.completed }}"></checkbox>
          <text>{{ item.name }}</text>
        </view> 
      </view>
    
      <!--按钮事件-->
      <button bindtap="buttonTapHandle">点击事件</button>
    
      <!--冒泡事件,嵌套事件,防止两个一块执行-->
      <view bindtap="outerHandle" style="200px; height:200px; background-color:red">
      <!--<view bindtap="innerHandle" style="100px; height:100px; background-color:blue">
        </view>-->
        <view catchtap="innerHandle" style="100px; height:100px; background-color:blue">
        </view>
      </view>
    
       <!--事件传参-->
      <button bindtap="tap2Handle" data-name="张三">点击事件</button>
    
      <!-- 双向数据绑定 -->
      <view>
        <input value="{{ message2 }}" bindinput="inputHandle" style="border:2px solid #C0C0C0;" />
        <text>{{ message2 }}</text>
      </view>  
    </view>

     

  • 相关阅读:
    linux系统基本目录的介绍
    vue 组件之间的通信-父组件给子组件传递数据
    postgresql数据库查询特定日期的数据
    使用HttpRequest调用第三方接口
    postgresql数据库中的 rownum
    mybatis框架,执行插入语句的时候,如果没有字段传过来就赋值为空 进行判断
    postgresql数据库left join将主表中的数据查询出多条的解决办法
    前后端交互 -精度丢失问题解决
    vue找页面
    mysql语法 join on 表示什么
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11547213.html
Copyright © 2020-2023  润新知