“网站制作”,wordpress 图像滑块插件,北京seo百度推广,网站开发技术概述数据绑定
1. 数据绑定的基本原则
① 在 data 中定义数据 在页面对应的 .js 文件中#xff0c;把数据定义到 data 对象中即可 ② 在 WXML 中使用数据
2. Mustache 语法的格式
把 data 中的数据绑定到页面中渲染#xff0c;使用 Mustache 语法#xff08;双大括号#x…数据绑定
1. 数据绑定的基本原则
① 在 data 中定义数据 在页面对应的 .js 文件中把数据定义到 data 对象中即可 ② 在 WXML 中使用数据
2. Mustache 语法的格式
把 data 中的数据绑定到页面中渲染使用 Mustache 语法双大括号将变量包起来即可。语法格式 主要应用场景如下 绑定内容 绑定属性
运算三元运算、算术运算等
事件绑定
1. 事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理。
2. target 和 currentTarget 的区别
target 是触发该事件的源头组件而 currentTarget 则是当前事件所绑定的组件。举例如下 点击内部的按钮时点击事件以冒泡的方式向外扩散也会触发外层 view 的 tap 事件处理函数。 此时对于外层的 view 来说 e.target 指向的是触发事件的源头组件因此 e.target 是内部的按钮组件 e.currentTarget 指向的是当前正在触发事件的那个组件因此 e.currentTarget 是当前的 view组件
3. bindtap 的语法格式
在小程序中不存在 HTML 中的 onclick 鼠标点击事件而是通过 tap 事件来响应用户的触摸行为。 ① 通过 bindtap 可以为组件绑定 tap 触摸事件语法如下
② 在页面的 .js 文件中定义对应的事件处理函数事件参数通过形参 event 一般简写成 e 来接收
4.在事件处理函数中为 data 中的数据赋值 5.事件传参
小程序中的事件传参比较特殊不能在绑定事件的同时为事件处理函数传递参数。例如下面的代码将不能正常工作 因为小程序会把 bindtap 的属性值统一当作事件名称来处理相当于要调用一个名称为btnHandler(123) 的事件处理函数。
可以为组件提供 data-* 自定义属性传参其中 * 代表的是参数的名字示例代码如下 info 会被解析为参数的名字 数值 2 会被解析为参数的值
在事件处理函数中通过 event.target.dataset. 参数名 即可获取到具体参数的值示例代码如下
6.bindinput 的语法格式
在小程序中通过 input 事件来响应文本框的输入事件语法格式如下 ① 通过 bindinput 可以为文本框绑定输入事件 ② 在页面的 .js 文件中定义事件处理函数
7.实现文本框和 data 之间的数据同步
实现步骤 ① 定义数据 ② 渲染结构 ③ 美化样式 ④ 绑定 input 事件处理函数
条件渲染
1. wx:if
在小程序中使用 wx:if“{{condition}}” 来判断是否需要渲染该代码块 也可以用 wx:elif 和 wx:else 来添加 else 判断
2. 结合 使用 wx:if
如果要一次性控制多个组件的展示与隐藏可以使用一个 标签将多个组件包装起来 并在 标签上使用 wx:if 控制属性示例如下
注意 并不是一个组件它只是一个包裹性质的容器不会在页面中做任何渲染。
3. hidden
在小程序中直接使用 hidden“{{ condition }}” 也能控制元素的显示与隐藏
4. wx:if 与 hidden 的对比
① 运行方式不同 wx:if 以动态创建和移除元素的方式控制元素的展示与隐藏 hidden 以切换样式的方式 display: none/block; 控制元素的显示与隐藏 ② 使用建议 频繁切换时建议使用 hidden 控制条件复杂时建议使用 wx:if 搭配 wx:elif 、 wx:else 进行展示与隐藏的切换
列表渲染
1. wx:for
通过 wx:for 可以根据指定的数组循环渲染重复的组件结构语法示例如下 默认情况下当前循环项的索引用 index 表示当前循环项用 item 表示。
2. 手动指定索引和当前项的变量名 *
使用 wx:for-index 可以指定当前循环项的索引的变量名 使用 wx:for-item 可以指定当前项的变量名
3. wx:key 的使用
类似于 Vue 列表渲染中的 :key 小程序在实现列表渲染时也建议为渲染出来的列表项指定唯一的 key 值从而提高渲染的效率
