一．vue 的優(yōu)勢
1. 簡潔易學(xué)：Vue采用了簡潔的模板語法，易于理解和學(xué)習(xí)，使開發(fā)者能夠快速上手。
2. 響應(yīng)式：Vue使用了雙向綁定機(jī)制，能夠自動追蹤數(shù)據(jù)的變化并實時更新視圖，提高了開發(fā)效率。
3. 組件化開發(fā)：Vue采用了組件化的思想，將頁面抽象為獨(dú)立的組件，可以復(fù)用和組合，提高了代碼的可維護(hù)性和可重用性。
4. 虛擬DOM：Vue采用了虛擬DOM的機(jī)制，在數(shù)據(jù)發(fā)生變化時，只重新渲染發(fā)生變化的部分，減少了DOM操作，提高了性能。
5. 生態(tài)豐富：Vue擁有一個活躍的社區(qū)，有很多開源的插件和工具可供選擇，且與其他前端庫和框架（如React和Angular）的兼容性較好。
6. 漸進(jìn)式框架：Vue是一個漸進(jìn)式框架，可以根據(jù)項目需要逐步引入，不強(qiáng)制使用整個框架，更加靈活。
7. 官方支持：Vue由一個專門的團(tuán)隊進(jìn)行維護(hù)和更新，有完善的官方文檔和社區(qū)支持，能夠提供及時的技術(shù)支持和解決方案。
8. 性能優(yōu)化：Vue提供了很多性能優(yōu)化的手段，如異步組件、懶加載、代碼拆分等，能夠提高應(yīng)用的加載速度和運(yùn)行效率。
9. 可測試性：Vue提供了便于測試的工具和方法，使開發(fā)者能夠編寫高質(zhì)量、可靠的測試用例。
10. 適用于移動端開發(fā)：Vue提供了Vue.js的移動端解決方案Vue Native，能夠快速開發(fā)高性能的移動應(yīng)用程序。
二、element 優(yōu)勢
1. 設(shè)計美觀：Element UI是一個基于Vue.js的UI庫，提供了一套美觀、簡潔的UI組件，能夠讓開發(fā)者快速構(gòu)建出現(xiàn)代化的網(wǎng)頁界面。
2. 組件豐富：Element UI提供了豐富的組件，包括按鈕、表格、彈窗、表單等常用組件，覆蓋了大部分開發(fā)需求，可以極大地提高開發(fā)效率。
3. 響應(yīng)式布局：Element UI的組件都是響應(yīng)式的，能夠自動適應(yīng)不同屏幕大小和設(shè)備類型，使得網(wǎng)頁在不同平臺上具有良好的兼容性和展示效果。
4. 可定制性強(qiáng)：Element UI提供了豐富的主題和樣式定制選項，開發(fā)者可以根據(jù)自己的需求來自定義組件的外觀和風(fēng)格。
5. 文檔和示例豐富：Element UI有詳盡的官方文檔和示例，對每個組件進(jìn)行了詳細(xì)的介紹和使用說明，方便開發(fā)者快速上手和解決問題。
6. 社區(qū)活躍：Element UI擁有龐大的開發(fā)者社區(qū)，可以獲取到各種問題的解答和開發(fā)經(jīng)驗分享，能夠快速解決開發(fā)過程中的困難和疑惑。
7. 與Vue配套：Element UI是專門為Vue.js開發(fā)的UI庫，與Vue完美配合，能夠充分發(fā)揮Vue的優(yōu)勢，提供更加優(yōu)雅和高效的開發(fā)體驗。
8. 國際化支持：Element UI支持多種語言，包括中文、英文等，能夠方便地滿足國際化項目的需求。
9. 優(yōu)秀的性能：Element UI經(jīng)過優(yōu)化和壓縮，具有較高的運(yùn)行效率和加載速度，能夠提供流暢的用戶體驗。
10. 持續(xù)更新和維護(hù)：Element UI由一個專門的團(tuán)隊進(jìn)行維護(hù)和更新，保持了較快的更新速度和良好的兼容性，能夠及時解決Bug和提供新功能。
三、html代碼
ref="refForm">
:value="item.value">
:value="item.value">
placeholder="感興趣產(chǎn)品（生命科學(xué)實驗室設(shè)備）">
placeholder="特別要求 ">
提交
在 el-form-item 添加 :rules="[{ required: true, message: '請輸入你的要求', trigger: 'blur' }]
驗證規(guī)則
四、js代碼
new Vue({
el: '#app',
data() {
return {
// 用戶類型
usertype: [
{ value: '最終用戶', label: '最終用戶' },
{ value: '分銷商', label: '分銷商' },
{ value: '經(jīng)銷商', label: '經(jīng)銷商' },
],
// 國家
city: city_arr,
ruleForm: {
type:'申請報價',
},
rules:{},
isSubmitting: false,
// 產(chǎn)品一
product: [
{
value: '生命科學(xué)實驗室設(shè)備',
label: '生命科學(xué)實驗室設(shè)備',
children: [
{ value: '生物安全柜', label: "生物安全柜" },
{ value: '超凈工作臺', label: "超凈工作臺" },
{ value: '二氧化碳培養(yǎng)箱', label: "二氧化碳培養(yǎng)箱" },
{ value: '超低溫冰箱', label: "超低溫冰箱" },
{ value: '離心機(jī)', label: "離心機(jī)" },
{ value: '搖床', label: "搖床" },
{ value: "PCR基因擴(kuò)增儀" , label: "PCR基因擴(kuò)增儀" },
{ value: "實驗室培養(yǎng)箱", label: "實驗室培養(yǎng)箱" },
{ value:"實驗室烘箱", label: "實驗室烘箱" },
{ value: "低溫培養(yǎng)箱" , label: "低溫培養(yǎng)箱" },
{ value: "實驗室通風(fēng)櫥", label: "實驗室通風(fēng)櫥" },
{ value: "無管道通風(fēng)櫥", label: "無管道通風(fēng)櫥" },
]
},
{
value:'醫(yī)療/IVF專用設(shè)備',
label: '醫(yī)療/IVF專用設(shè)備',
children: [
{ value: "胚胎差時監(jiān)視優(yōu)育系統(tǒng)", label: "胚胎差時監(jiān)視優(yōu)育系統(tǒng)" },
{ value:"IVF專用多腔室培養(yǎng)箱", label: "IVF專用多腔室培養(yǎng)箱" },
{ value:"多區(qū)溫控IVF工作站", label: "多區(qū)溫控IVF工作站" },
{ value:"二氧化碳培養(yǎng)箱", label: "二氧化碳培養(yǎng)箱" },
{ value: "抗震動實驗臺", label: "抗震動實驗臺" },
{ value: "CO2/O2//溫度驗證設(shè)備", label: "CO2/O2//溫度驗證設(shè)備" },
]
},
{
value: '制藥專用設(shè)備',
label: '制藥專用設(shè)備',
children: [
{ value: "無菌檢測隔離器", label: "無菌檢測隔離器" },
{ value: "潔凈層流稱量室", label: "潔凈層流稱量室" },
{ value:"粉末樣品稱量柜", label: "粉末樣品稱量柜" },
{ value: "軟簾式潔凈棚" , label: "軟簾式潔凈棚" },
{ value: "風(fēng)淋室", label: "風(fēng)淋室" },
{ value:"傳遞窗", label: "傳遞窗" },
{ value:"轉(zhuǎn)移艙", label: "轉(zhuǎn)移艙" },
]
},
],
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm);
that=this;
that.isSubmitting = true;
$.ajax({
url:url,
type:'POST',
data:this.ruleForm,
cache: false,
success:function(res) {
that.isSubmitting = false;
if(res.code==1){
that.ruleForm={};
that.$message({
message:res.msg,
type: "success",
});
}else{
that.$message({
message:res.msg,
type: "error",
});
}
},
error: function (res) {
that.$message({
message: res.msg,
type: "error",
});
}
})
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.removeRules();
this.$refs[formName].resetFields();
},
}
})
如沒特殊注明，文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://m.oulysa.com/news/6880.html
