小程序第一篇

<!-- 模板语法详解 -->

<!-- 数据绑定 -->

<!-- <view>{{msg}}</view>

<view data-abc='111' data-id='{{id}}' class="{{cls}}">测试属性绑定</view>

<view>{{ 1 + 1 }}</view>

<view>{{obj.uname}}</view> -->

 

小程序中支持差值表达式，里面的数组来源于后缀名为js 下的 date 中定义的数据 ，在里面定义的函数想要操纵数据的时候

// 小程序中不可以直接修改data中的数据，必须通过setData函数进行修改

// this.data.msg = 'hello'===》获取date 里面定义的数据

this.setData({  ==》想要修改的话需要借助setDate 这个函数对数据进行修改 

msg: 'hello'

})

 

 

<!-- 条件渲染 -->

<!-- <view wx:if='{{isShow}}'>你好</view> -->

<!-- <view wx:if='{{gender===1}}'>Male</view>

<view wx:else>Female</view> -->

<!-- <view wx:if='{{score>=80}}'>优秀</view>

<view wx:elif='{{score>=60}}'>just so so</view>

<view wx:else>比较差</view> -->

<!-- block标签 -->

<!-- <view wx:if='{{isShow}}'>TOM</view>

<view wx:if='{{isShow}}'>JERRY</view> -->

<!-- block标签不会渲染出来：类似于vue中template -->

<!-- <block wx:if='{{isShow}}'>

<view>TOM</view>

<view>JERRY</view>

</block> -->

<!-- hidden属性用法:类似于vue中v-show -->

<!-- 如果要频繁切换显示隐藏，那么推荐使用hidden -->

<!-- <view hidden="isShow">测试hidden</view> -->

<!-- 列表渲染 -->

<!-- key用于提升性能 -->

<!-- <view wx:key='{{index}}' wx:for='{{list}}'>

{{index + '-----' + item}}

</view> -->

<!-- 自定义列表遍历名称 -->

<!-- <view wx:for-index='num' wx:for-item='fruit' wx:key='{{num}}' wx:for='{{list}}'>

{{num + '-----' + fruit}}

</view> -->

<!-- 遍历对象数组 -->

<view wx:for-index='num' wx:for-item='fruit' wx:key='{{num}}' wx:for='{{dataList}}'>

{{num + '-----' + fruit.ename + '----' + fruit.cname}}

</view>

<!-- template模板用法：先定义再使用 -->

<!-- <template name='userInfo'>

<view>姓名：{{uname}}</view>

<view>年龄：{{age}}</view>

</template> -->

<!-- <template is='userInfo' data='{{uname: "lisi", age: "12"}}'></template>

<template is='userInfo' data='{{uname: "zhangsan", age: "15"}}'></template>

<template is='userInfo' data='{{...info}}'></template> -->

<!-- <template name='userInfo'>

<view>姓名：{{msg.uname}}</view>

<view>年龄：{{msg.age}}</view>

</template>

<template is='userInfo' data='{{msg: info}}'></template> -->

<!-- 事件处理 -->

<!-- <view>{{msg}}</view>

<view bindtap="handleTap" bindlongpress='handleLongpress'>点击</view> -->

bindtap<===>@(bind:)

 

<!-- 事件的冒泡与捕获操作 -->

<!-- <view bindtap="handleParent">

<view bindtap="handleChild">点击</view>

</view> -->

<!-- 阻止冒泡 -->

 

<!-- <view catchtap="handleParent">

<view catchtap="handleChild">点击</view>

</view> -->

<!-- 事件捕获 -->

<!-- 必须添加冒号进行绑定 -->

<!-- <view capture-bind:tap="handleParent">

<view capture-bind:tap="handleChild">点击</view>

</view> -->

<!-- 阻止捕获 -->

<!-- <view capture-catch:tap="handleParent">

<view capture-catch:tap="handleChild">点击</view>

</view> -->

<!-- 事件对象 -->

<!-- <view data-abc='hello' bind:tap="handleEvent">点击</view> -->

<!-- currentTarget和target的区别 -->

<!-- 如果不考虑冒泡，那么两者相同 -->

<!-- 如果考虑冒泡，target指的是事件源（原始触发事件的标签） ；currentTart表示当前触发事件的标签-->

<!-- <view data-info='parent' bind:tap="handleEvent">

<view data-info='child'>点击</view>

</view> -->