5-js数据-列表-条件渲染-事件

微信小程序和vue一样，也是操作数据，而不是操作DOM结构。
数据存放在js文件里的data项目

1.字符串

/**
   * 页面的初始数据
   */
data: {
   str:"这是小程序"
},

<text>{{str}}</text>

2.列表渲染

data: {
    str:"这是小程序",
    city:[
      "北京","四川","上海"
    ]

<view wx:for="{{city}}" wx:key="index">
  {{item}}
</view>

数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

3.条件渲染

<view wx:if="{{city.length > 0 }}">
  <text wx:for="{{city}}" wx:key="index">
    {{item}}
  </text>
</view>
<view wx:else>
  <text>暂无数据。。。。。</text>
</view>

4.事件
事件绑定的写法同组件的属性，以 key、value 的形式。

• key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
• value 是一个字符串，需要在对应的js中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。微信小程序不支持使用alert()，支持console.log()

定义事件：

<view bindtap="btn">
</view>

5.修改数据

 /**
   * 自定义事件
   */
btn(){
  this.setData({
    str:"我已经修改你了，哈哈哈"
  })
  console.log(this.data.str)  //我已经修改你了，哈哈哈
}