微信小程序学习笔记——2

微信小程序学习——2

wx:for与wx:for-items与wx:for-item与wx:key与wx:if的理解

一、wx:if

首先明显看到该属性中含有if，所以我们可以这样理解，相当于C中if条件判断，也就是当满足某个特定的条件时才会去执 行。同理，在这样，当满足某个条件时才会使对应组件进行渲染。

Tips：同理也包含wx:else，wx:elif (同else if)

e.g

<view wx:if="{{condition}}"> True </view>

二、wx:for

该语句中含有for，我们可以理解为C中的for循环，这个是一个列表渲染，也就是可以渲染列表中的元素（也就是数组）。

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<---xxx.wxml--->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

<---xxx.js--->
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

三、wx:for-item与wx:for-items

使用 wx:for-item 可以指定数组当前元素的变量名

wx:for-items这个功能,效果和wx:for是一样的,都是用于循环数据的

使用 wx:for-index 可以指定数组当前下标的变量名

四、wx:key

这个组件的属性我们可以这样理解，这相当于可以把可以动态变化的东西记录下来，让他保持其原来的状态。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property
的值需要是列表中唯一的字符串或数字，且不能动态改变。 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要
item 本身是一个唯一的字符串或者数字，如： 当数据改变触发渲染层重新渲染的时候，会校正带有 key
的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

注意的地方

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

import与include的理解

import：可以使用目标文件中定义的template
import作用域：即只会import目标文件中定义的template，而不会import目标文件import的template。（通俗来讲就是improt没有传递性，**如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。**也就是只能引用目标文件中自己定义的template，而这个目标文件引用的tempalte不能引用）
include:include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置（除了template模板其他都引用）

选择器

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有view组件
element, element	view checkbox	选择所有文档的view组件和所有的checkbox组件
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件前边插入内容