mina:code_composition

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

--- mina:code_composition [2020/08/24 19:38] – [4.4 事件绑定] sabertoy
+++ mina:code_composition [未知日期] (当前版本) – 外部编辑 (未知日期) 127.0.0.1
@@ 行 201: / 行 201: @@
 仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/|WXML]] \\
+=== - 双向绑定语法 ===
+<code xml>
+<input value="{{value}}" />
+</code>
+如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。
+如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀
+<code xml>
+<input model:value="{{value}}" />
+</code>
+双向绑定的表达式有如下限制：
+只能是一个<wrap hi>单一字段</wrap>的绑定
 ==== - 列表渲染 ====
@@ 行 528: / 行 550: @@
 </code>
-如在下边这个例子中，点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父节点传递)，点击middle view会触发handleTap2，点击outter view会触发handleTap1。
+如在上边这个例子中，点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父节点传递)，点击middle view会触发handleTap2，点击outter view会触发handleTap1。
+:!: mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
 ==== - 数据绑定 ====
@@ 行 536: / 行 560: @@
     Click here!
 </view>
- *此时，页面的 this.data.handlerName 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效。
 </code>
+  * 此时，页面的 this.data.handlerName 必须是一个字符串，指定事件处理函数名；
+  * 如果它是个空字符串，则这个绑定会失效。
+==== - 事件的捕获阶段 ====
+捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。
+可以采用''capture-bind''、''capture-catch''关键字，后者将中断捕获阶段和取消冒泡阶段。
+在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
+<code xml>
+<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
+  outer view
+  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
+    inner view
+  </view>
+</view>
+</code>
 ==== - 事件对象 ====

mina/code_composition.1598269103.txt.gz · 最后更改: 2020/08/24 19:38 (外部编辑)