前言
一直覺得，小程序與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是雙向數據綁定，而小程序時單向數據綁定。