携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情
视图层
在视图层遵循 WXML（WeiXin Markup Language） 语法规则
1. 插值语法（数据绑定）
mustache 插值表达式语法，类似于Vue的双向数据绑定，不同的是，小程在动态绑定属性的时候不使用v_bind。
vue中：
<image :src="{{path}}" />
<h1>{{msg}}</h1>
小程序中：
<image src="{{path}}" />
<h1>{{msg}}</h1>
2. 循环和判断
循环出来的每一项由 item 表示
<view wx:for="{{fruit}}"> {{item}} </view>
<view wx:if="{{type == 'A'}}"> A </view>
<view wx:elif="{{type == 'B'}}"> B </view>
<view wx:else="{{type == 'C'}}"> C </view>
data: {
fruit: ['apple','banana']
type: 'A'
}
3. 引用其它模板
<import src="A.wxml"/>
注意：import 是有作用域的，只能导入目标文件中定义的 template，如果目标文件中导入了其它的 template ，当前文件是无法使用的，
WXS 语法
1. 定义和修改数据
js文件中的结构与 Vue 的选项式 API 语法类似：
- properties —— 组件的属性列表
- data —— 定义组件的初始数据
- methods —— 组件的方法列表
由于小程序中各个页面之间是相互独立的，所以要在事件处理函数中使用 setData() 才可以修改 data 中数据的值，用[this.data.属性名称] 的形式获取数据的原始值。
setData ： 微信小程序提供的一个 API ，用于改变逻辑层中 data 中的数据
Page({
properties: {
},
data: {
count: 0
},
methods: {
counter() {
this.setData({
count: this.data.count + 1
})
}
}
})
数据类型：
事件
开发者工具中的语法提示可以看到事件的种类非常多：
除了常见的input 输入事件、change 切换选项事件等，tap触摸事件是我们首先要了解的。
tap 触摸事件
tap 触摸事件类似于我们所熟悉的 click 事件
<button bindtap="onSave">点俺保存</button>
onSave(e){
console.log(e)
}
打印结果：
在打印结果中可以看到 event.target 和 event.currentTarget 这两项：
当组件涉及到嵌套时，触发事件后，target 表示触发的是源头组件，currentTarget是当前事件绑定的组件，开发中 target 较为常用。
event.detail
事件传参：
在事件传递参数时，data-属性名称的形式绑定
下面的代码中，msg 会被解析成参数名，666会被解析成参数的值
错误方式：
<button bindtap="onSave(666)" >保存</button>
正确方式：
<button bindtap="onSave" data-msg="{{666}}">保存</button>
