【融职培训】Web前端学习 第10章 小程序开发4 小程序开发

一，数据绑定

VUE：vue动态绑定一个变量的变量元素的某个属性的时候，会在变量前面加上冒号：，例：

<p:title="tit">我的title属性绑定了数据</p>   

小程序：绑定变量的变量元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。

<image src="{{imgSrc}}"></image>

二，列表渲染

Vue

VUE循环内部v-for =“数据中的项目”或v-for =“数据，数据中的索引” VUE循环内部{{item.first}} item是随便定义的，可以换成别的

1< ul  id = “ example-1” > 2< li  v-for= “项目中的项目” > 3    { {  项目。讯息} } 4< / li > 5< / ul > 6varexample1  =new  Vue （{  7el：'＃example-1' ， 8  data：{  9    项目：[ 10{  消息：'Foo'  } ，11{  消息：'Bar'  } 12    ] 13  } 14} ）

小程序

微信小程序循环wx：for =“ {{data}}”“

小程序循环内部{{item.first}} item是固定的，不是自己定义的

1页面（{2  数据：{3    项目：[4{  message：'Foo'  } ，5{  message：'Bar'  }6    ]7  }8} ）9< 文字 wx：for= “ {{items}}” > { { item } } < / 文本>

三，显示与隐藏

vue中，使用v-if和v-show控制元素的显示和隐藏

小程序中，使用wx-if和hidden控制元素的显示和隐藏

四，事件处理

vue：习惯@event绑定事件，例如：

< 按钮 v-on：单击 =“ 计数器+ = 1 ” >添加1 </ 按钮>

小程序：用bindtap绑定事件，例如：

< button  bindtap =“ noWork ” >明天不上班</ button >

五，绑定事件传参

在vue中，绑定事件传参挺简单，只需要在触发事件的方法中，把需要传递的数据作为形参放置就可以了，例如：

1// <button @ click =“ say（'明天不上班'）”> </ button> 2 3新 Vue （{ 4el：'#app' ， 5  方法：{ 6    说（arg ）{ 7    consloe 。日志（arg ） 8    } 9  }10} ）

在小程序中，不能直接在绑定事件的方法中进行参数调整，需要将参数作为属性值，绑定到元素上的数据属性上，然后在方法中，通过e.currentTarget.dataset。*方式获取，从而完成参数的传递。例如：

1// <view class ='tr'bindtap ='toApprove'data-id =“ {{item.id}}”> </ view>2页面（{3数据：{4原因：''5} ，6批准（e ） {7设 id  =  e 。currentTarget 。数据集。id ;8  }9} ）

【融职教育】在工作中学习，在学习中工作