這段時間一直在學(xué)習(xí)前端技術(shù)來完成自己的小項目。在js方面就使用了Vue框架。由于在項目里想實現(xiàn)一個新建地址的PopupWindow效果，便想到可以使用Vue的一些特性來實現(xiàn)。
創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，有關(guān)企業(yè)網(wǎng)站建設(shè)方案、改版、費用等問題，行業(yè)涉及混凝土攪拌罐等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。
用到的Vue特性：組件(Component)，props傳值，slot內(nèi)容插入，transitions過渡動畫，x-templete模板。
直接上代碼（完整代碼可在鏈接中下載popupwindow）：
html代碼（無樣式）：
{{editTitle}}
js代碼：
重慶分公司
重慶分公司
/*
* 新建與編輯地址Vue組件popupwindow
* */
var newAddressWindow = Vue.component("new-address-window",{
props: ['addressregion'],
template: "#popup-window-address-new"
})
/*
* 地址popupwindow的Vue實例
* */
var chooseAddress = new Vue({
el: "#address-choose",
data: {
isShowEditWindow: true,
isOneButton: false,
editTitle: "新建收貨地址",
//填入初始地址信息，組件與改數(shù)據(jù)綁定
addressRegion: {
}
},
methods: {
showOneBtnWindow: function(){ //顯示新建收貨地址對話框（有一個按鈕）
this.isShowEditWindow = true;
this.isOneButton = false;
this.editTitle = "新建收貨地址";
}，
removeEditWindow: function(){ //關(guān)閉新建與編輯地址選擇對話框
this.isShowEditWindow = false;
}
}
})
至此，一個popupwindow的組件就完成了。在實現(xiàn)一個Vue組件時，可以使用模板來實現(xiàn)組件，我這里采用了x-templete模板實現(xiàn)了組件，同時在組件通也可以使用vue的transition特性加入一些動畫效果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
