标签：微信 绑定 程序 事件 bind 组件 data 冒泡
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
数据绑定
1. 数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
2.Mustache （双大括号）语法的主要应用场景如下：
绑定内容：{{内容}}
绑定属性：如:src="{{imgSrc}}" ,组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)
运算（三元运算、算术运算等）：
3.动态样式：两种写法，用[ ]包裹或者传统class写法
动态控制多个class
只要在花括号内做三元运算选择相应的class,他们之间用空格隔开就好
4.行内样式style：style="font-size:20px;font-family:"宋体";"
事件绑定
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
- 组件自定义事件如无特殊声明都是非冒泡事件，如 form 的
submit事件，input 的input事件，scroll-view 的scroll事件
互斥事件绑定
除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。
事件的捕获阶段
触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
1.事件对象的属性
target 和 currentTarget 的区别
点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view 的 tap 事件处理函数。
此时，对于外层的 view 来说：
e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件
dataset：事件源组件或当前组件上由data-开头的自定义属性组成的集合
2、在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值
3、事件传参
可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字
在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值
4、 bindinput 的语法格式
① 通过 bindinput，可以为文本框绑定输入事件
② 在事件处理函数中 e.detail.value 是变化过后，文本框最新的值
5、 实现文本框和 data 之间的数据同步
如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。
如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：<input model:value="{{value}}" />
1、条件渲染
wx:if wx:elif 和 wx:else
<block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
2、列表渲染
wx:for
类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块
wx:key 的值以两种形式提供
- 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字
*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
标签：微信,绑定,程序,事件,bind,组件,data,冒泡 来源： https://www.cnblogs.com/niufang/p/16378623.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。