【融职培训】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 > 6 var  example1  =  new  Vue （{ 7   el：'＃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 （{4   el：'#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 } ）

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

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

【融职培训】Web前端学习第11章微信开发4 JS-SDK接口
一.概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.例如我们网页中希望实现扫一扫.获取本地相册.位置信息.分享功能等,都可以使用JS-SDK来实现. 二.JS-SD ...
【融职培训】Web前端学习第2章网页重构1 第一个网页
一.内容概述从本节我们开始正式学习前端开发的课程内容,首先我们从第一个网页开始了解html和css的基本概念,并通过创建第一个网页了解vscode的基本使用方法. 二.安装vscode插件汉化插件 ...
【融职培训】Web前端学习第11章微信开发5 微信支付
一.概述如果需要实现微信支付功能,需要有一个已认证的微信服务号,并且开通微信支付,开通后微信会提供一个商户ID.有了这个ID才能成功调用微信支付接口. 开通微信支付后,需要在微信支付后台[产品中心] ...
【融职培训】Web前端学习第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
【融职培训】Web前端学习第7章 Vue基础教程4 组件传值
一.组件传值的三种情况我们可以把组件之间的数据传递分为三种情况: 父级向子级传递数据子级向父级传递数据非父子级传递数据二.父级向子级传值父级可以通过属性向自己传递数据,示例代码如下所示: 1 ...
【融职培训】Web前端学习第2章网页重构11 HTML5新增标签
一.html5概述 html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本.我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的Jav ...
【融职培训】Web前端学习第2章网页重构7 浮动布局
一.元素分类特性展示在此前的课程中,我们还有一些遗留问题没有解决,例如: 有些元素不管宽度多少,都是独立占一行显示,有些元素则可以共同占用一行显示; 有些元素可以设置宽度和高度,有些元素不能设置宽 ...
【融职培训】Web前端学习第2章网页重构2 常用的html标签
一.HTML语法上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html>  ...
【融职培训】Web前端学习第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...

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

一，数据绑定

二，列表渲染

三，显示与隐藏

四，事件处理

五，绑定事件传参

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

最新文章

热门文章

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

一，数据绑定

二，列表渲染

三，显示与隐藏

四，事件处理

五，绑定事件传参

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

最新文章

热门文章

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

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