前言
一直觉得，小程序与Vue有着神似之风。这一点在我第一天开始接触小程序时就这么认为，或者说，任何前端相关的语言，不管是node.js、Vue、angular、小程序，都和js有着千丝万缕的联系。
而最让我“着迷”的，莫过于曾让我夜夜辗转反侧的“ 数据传递（数据绑定） ”了。趁着一次偶然提起，将其记录下来。
从一个案例看Vue的数据绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实例-全选</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checkAll.check" @click="checkAllChange">
<label>{{checkAll.name}}</label>
<div v-show="id===true">全选啦 全选啦！！！</div>
<ul>
<li v-for="list in lists" @click="curCheck">
<input type="checkbox" v-model="list.check">
<label>{{list.name}}</label>
</li>
</ul>
</div>
<script>
window.onload=function () {
new Vue({
el:"#app",
data:{
checkAll:{check:false,name:"全选"},
lists:[
{check:true,name:'小米'},
{check:false,name:'华为1'},
{check:false,name:'华为2'},
{check:false,name:'华为3'}
],
id:false
},
methods:{
checkAllChange:function () {
// for(var i=0;i<this.lists.length;i++){
// this.lists[i].check=this.checkAll.check;
// }
this.lists.forEach((item)=>{
item.check=this.checkAll.check;
this.id=!this.id;
});
},
curCheck:function () {
var select=this.lists.filter(function (item) { //filter函数筛选出符合要求（被选中）的复选框
return item.check===true;
});
select.length===this.lists.length?this.checkAll.check=true:this.checkAll.check=false;
// this.checkAll.check=this.lists.every(function (item) {
// return item.check;
// });
select.length===this.lists.length?this.id=true:this.id=false;
}
}
})
}
</script>
</body>
</html>
第11行的v-model无疑是最耀眼的。v-前缀，是为vue内置指令。v-model，双向绑定数据，它的值对应于我们创建的vue实例中data选项中的某一字段 。这就是我们说的数据绑定。
绑定完，就要“插入到”页面中了：
《Vue.js实战》这本书中说：使用大括号（Mustache语法）“{{ }}”是最基本的文本插入方法，它会自动的将我们绑定的数据实时的显示出来。当然，前提是你引入了vue文件（哈哈…）
不知道你发现没有，在我的所有vue项目or插件中，从来没发现过插值在标签里面的情况。它就很“粗鲁”的将数据放在开发者想放到的“页面上的位置”。
而小程序在第一天就打破了我这个“神奇的发现”：
从input提交的案例了解小程序的绑定机制
获取输入框数据，提交后到控制台输出，而且清空输入框内数据。
---------- index.wxml -----------
<view class="title">用户注册</view>
<form bindsubmit="register">
<view class="form-item">
<text class="form-item-label">用户名：</text>
<input class="form-item-value" placeholder="请输入用户名" name="username" value="{{mxc}}" />
</view>
<view class="form-item">
<text class="form-item-label">密码：</text>
<input class="form-item-value" placeholder="请输入密码" name="password" type="password" value="{{mmxc}}" />
</view>
<view class="form-item">
<text class="form-item-label">确认密码：</text>
<input class="form-item-value" placeholder="请确认密码" name="confirmPassword" type="password" value="{{mmmxc}}" />
</view>
<view class="form-item">
<button form-type="submit">注册</button>
<button form-type="reset">重置</button>
</view>
</form>
----------- index.js -----------
register(e) {
const { username, password, confirmPassword } = e.detail.value //获取数据，在这里，e就指代了input，e.detail.value即获取输入框中的数据，因为有三个框，所以用三个const（es6语法）变量来接收
console.log('表单信息: ', username, password, confirmPassword)
this.setData({
mxc:"",
mmxc:"",
mmmxc:""
})
}
首先，由于小程序强大的模块机制，小程序并不需要同一文件夹下的文件之间相互导入（当然，在必要引入的地方（如：子模块，用引入父wxml中，其css样式也通过@import “”;引入父模块wxss文件）此句作废）。而且，小程序中只要涉及动态数据（数据绑定）的，一律要用{{}}包住 。这大概也是一种进化的安全机制吧。
就比如value="{{...}}"这句，我开始就写成了不加大括号的，再加上当时对setData函数的不理解，就直接将数据写在了data中并初始化了一下（对，没错，就是模仿vue写的！），然后，，，就几天找不到错误了。
哦，还有reset，网上有方法说把“提交”按钮绑定事件也设为reset，然后在form中把bindsubmit换成其他方法，在其中做手脚，但是我试遍了几乎所有的reset，但是小程序在提交前都会将数据清空，，，
第23行还有一个容易犯的错误：const定义的变量的作用只是接收e.detail.value返回的数据，但万不可以此置空来解决“清空输入框”的要求。（说白了，他们三个只是替身）
为什么一定要写在setData里？
小程序虽然和vue相比有很大改动，但是其本质不变：绑定的是data中的数据变量！而setData的作用就是将其中的属性和值写入data中。
说白了，vue是双向数据绑定，而小程序时单向数据绑定。