MUI 是一款基于 jQuery 和 Zepto 的移動端 UI 框架，該框架是擁有多年開發經驗的 MUI 團隊所打造，為了讓他人更方便的使用該框架，官方也提供了 Vue 和 Angular 的版本。下面來介紹一個使用 MUI Vue 打造的案例。

該案例是一個簡單的移動端表單驗證頁面，使用了 MUI Vue 和 Mint UI 的部分組件，主要實現了表單驗證和表單提交功能。這里先來看一下代碼部分的實現。

// 導入所需組件
import { Button, Cell, Field, Header } from "mint-ui";
import Mui from "vue-awesome-mui";
import Vue from "vue";
import App from "./App.vue";
// 注冊組件
Vue.use(Mui);
Vue.component("mt-button", Button);
Vue.component("mt-cell", Cell);
Vue.component("mt-field", Field);
Vue.component("mt-header", Header);
// 創建根實例
new Vue({
el: "#app",
render: h =>h(App)
});

在代碼中，我們首先導入了所需的組件，并通過 Vue.use(Mui) 注冊了 MUI Vue。隨后又通過 Vue.component 注冊了 Mint UI 的 Button、Cell、Field 和 Header 組件，最后創建了一個根實例，并將 Vue 組件渲染到了 #app 元素上。

接下來是 Vue 組件部分的實現，這里只展示了表單驗證的部分代碼。

< template >< div class="form-container" >< mt-header title="表單驗證" >< mt-button slot="left" icon="back" @click.native="goBack" >< /mt-header >< form ref="form" >< mt-cell >< mt-field v-model.trim="username" label="用戶名" :rules="[usernameRule]" placeholder="請輸入用戶名">< /mt-cell >< mt-cell >< mt-field type="password" v-model.trim="password" label="密碼" :rules="[passwordRule]" placeholder="請輸入密碼">< /mt-cell >< mt-button type="primary" @click.native.prevent="submitForm">提交< /mt-button >< /form >< /div >< /template >< script >export default {
data() {
return {
username: "",
password: "",
usernameRule: [{
required: true,
message: "用戶名不能為空"
}],
passwordRule: [{
required: true,
message: "密碼不能為空"
}]
}
},
methods: {
// 表單提交
submitForm() {
this.$refs.form.validate(valid =>{
if (valid) {
this.$toast("提交成功");
}
});
},
// 返回上一頁
goBack() {
this.$router.go(-1);
}
}
}< /script >

在代碼中，我們首先定義了組件中需要用到的 data 和 methods，其中 data 中定義了用戶名和密碼的值，以及兩個表單驗證的規則。methods 中定義了表單提交和返回上一頁的方法。接著在 template 中，用 Mint UI 的組件創建了一個包含表單驗證的表單，通過 v-model.trim 獲取 input 內容，并通過 :rules 綁定表單驗證規則。最后提交按鈕綁定事件，通過 this.$refs.form.validate(valid =>{...}) 方法判斷表單驗證是否通過，如果通過則彈出提交成功的提示框。