vue高德地圖繪制行政區(qū)邊界功能
更新時(shí)間：2024年03月12日 10:43:02 作者：zj_zjk_sjz
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
vue高德地圖繪制行政區(qū)邊界
<template>
<div id="gaodeMap"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 設(shè)置安全密鑰
window._AMapSecurityConfig = {
securityJsCode: '從高德申請(qǐng)的安全密鑰',
}
export default {
name: "index",
data() {
return {
districtCode:'310112',
district: null,
polygons : [],
//行政區(qū)劃查詢
opts: {
subdistrict: 0, //獲取邊界不需要返回下級(jí)行政區(qū)
extensions: 'all', //返回行政區(qū)邊界坐標(biāo)組等具體信息
level: 'district' //查詢行政級(jí)別為 區(qū)
}
}
},
mounted() {
this.getMapCenter();
this.initMap();
},
methods: {
getMapCenter() {
this.districtCode = this.$route.params.districtCode
},
/**
* 初始化地圖
*/
initMap() {
AMapLoader.load({
key: "從高德申請(qǐng)的key",
version: "2.0",
plugins: ['AMap.Scale', 'AMap.DistrictSearch'],
}).then((AMap) => {
// 初始化地圖
this.map = new AMap.Map('gaodeMap', {
viewMode: "2D",
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
});
this.map.addControl(new AMap.Scale())
this.drawBounds();
}).catch(e => {
console.log(e);
});
},
/**
* 繪制區(qū)域
*/
drawBounds() {
let that = this
this.district = new AMap.DistrictSearch(this.opts)
this.district.search(this.districtCode, function (status, result) {
that.map.remove(that.polygons)//清除上次結(jié)果
that.polygons = [];
let bounds = result.districtList[0].boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
//生成行政區(qū)劃polygon
let polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
});
that.polygons.push(polygon);
}
}
that.map.add(that.polygons)
that.map.setFitView(that.polygons);//視口自適應(yīng)
});
}
}
}
</script>
<style scoped>
#gaodeMap {
width: 100%;
height: 100%;
}
</style>補(bǔ)充：
vue 實(shí)現(xiàn) 高德地圖繪制并編輯區(qū)域功能
業(yè)務(wù)需要參考很多文章最后實(shí)現(xiàn)的功能 仍有缺陷 先展示
1.根據(jù)所在區(qū)域自動(dòng)繪制范圍
2.切換區(qū)域自動(dòng)切換所畫范圍
3.回顯其他人繪制的范圍（業(yè)務(wù)需求繪制范圍不可以重復(fù)）
4.繪制的區(qū)域可編輯 可刪除
（刪除功能仍有瑕疵 實(shí)現(xiàn)了部分刪除功能 都是比較傻瓜試的操作 不喜勿噴）
編輯的時(shí)候白色點(diǎn)是可以取消掉的
高德地圖開(kāi)放平臺(tái)https://lbs.amap.com/api/javascript-api-v2/summary/
要在控制臺(tái)見(jiàn)一個(gè)key才可以運(yùn)行高德地圖插件 要選web服務(wù)的才行
下載插件
npm i @amap/amap-jsapi-loader --save
上代碼
我的是彈窗的形式 主頁(yè)面
<el-dialog
title="繪制區(qū)域"
width="80%"
top="8vh"
:visible.sync="dialogVisible"
:before-close="hideDialog"
:close-on-click-modal="false"
class="dialogPa"
>
<div class="dialog-body" >
//centerDrop: [123.455551,41.798729]地圖中心點(diǎn) allCoordinates其他人繪制的區(qū)域數(shù)據(jù) address當(dāng)前區(qū)域文字areaCode當(dāng)前區(qū)域code isUpdateBtn是否顯示編輯按鈕 updateId可修改數(shù)據(jù)的id isaddBtn是否是新增 mapIdDiv地圖畫布id
<seeAddIndex v-if="dialogVisible" :center="centerDrop" :allCoordinates="alllist" :address="dataForm.address" :areaCode="dataForm.areaCode" :isUpdateBtn="true" @mapList="mapList" :updateId="updateId" :isaddBtn="isaddBtnMap" :mapIdDiv="'mapIdDiv'+updateId"></seeAddIndex>
</div>
</el-dialog>js部分
import seeAddIndex from "@/components/AMapLoader/seeAddIndex.vue"; //自定義高德地圖繪制區(qū)域
components: {seeAddIndex },
//組件點(diǎn)擊確定或取消 istype確定/取消 date點(diǎn)集合數(shù)據(jù) mapname切換后的區(qū)域數(shù)據(jù)
mapList(istype,date,mapname) {
var that = this;
if(istype){// 確定
that.newlatlng = date;
console.log("---", date);
//...調(diào)用保存接口
}else{//取消
that.newlatlng = [];
that.dialogVisible = false;
}
}組件代碼
<template>
<div class="container">
<div class="input-card mapNewCss">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text">省市區(qū):</span>
</div>
<el-select
style="width: 70%;"
v-model="province"
@change="searchNew('province')"
>
<el-option
v-for="item in provinceList"
:key="item.adcode"
:label="item.name"
:value="item.adcode"
@click.native="getName('province',item)"
>
</el-option>
</el-select>
</div>
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text">地級(jí)市:</span>
</div>
<el-select
style="width: 70%;"
v-model="city"
@change="searchNew('city')"
>
<el-option
v-for="item in cityList"
:key="item.adcode"
:label="item.name"
:value="item.adcode"
@click.native="getName('city',item)"
>
</el-option>
</el-select>
</div>
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text">區(qū)縣:</span>
</div>
<el-select
style="width: 70%;"
v-model="district2"
@change="searchNew('district')"
>
<el-option
v-for="item in districtList"
:key="item.adcode"
:label="item.name"
:value="item.adcode"
@click.native="getName('district2',item)"
>
</el-option>
</el-select>
</div>
</div>
<div :id="mapIdDiv" style="width: 100%;height: 65vh;"></div>
//兩個(gè)編輯方法 一個(gè)是新增的編輯 一個(gè)是修改的編輯 獲取到的繪制區(qū)域圖層不一樣 數(shù)據(jù)格式對(duì)不上就不會(huì)顯示 所以就很笨拙的實(shí)現(xiàn)基本功能 希望有大神可以優(yōu)化
<div class="input-card">
<el-button v-if="isaddBtnOne"
class="filter-item"
type="primary"
@click="upPolygon"
:disabled="isDisabled"
>編輯</el-button
>
<el-button
v-if="!isaddBtnOne"
class="filter-item"
type="primary"
@click="getPoly"
:disabled="isDisabled"
>編輯</el-button
>
//刪除功能部分?jǐn)?shù)據(jù)實(shí)現(xiàn)了
<el-button
v-if="isClear"
class="filter-item"
type="primary"
@click="clearPolygon"
:disabled="isDisabled"
>刪除</el-button
>
<div style="float: right;" v-if="isUpdateBtn">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="getOk" :disabled="isDisabled">確 定</el-button>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "AreaMapSee",
props: {
//地圖id
mapIdDiv: {
type: '',
default: 'container'
},
//中心點(diǎn)
center: {
type: '',
default: null
},
//所有數(shù)據(jù)
allCoordinates:{
type: '',
default: null
},
//回顯區(qū)域數(shù)據(jù)
// coordinates: {
// type: Object / Array,
// default: []
// },
address:{
type: "",
default: null
},
areaCode:{
type: "",
default: null
},
//編輯按鈕
isUpdateBtn: {
type: Boolean,
default: false
},
//待修改的id
updateId: {
type: '',
default: null
},
// 新增按鈕
isaddBtn: {
type: Boolean,
default: false
},
},
data() {
return {
map: null,
polyEditor: null,
polyEditorNew: null,
addNumber:0,
updatePolygon:null,
updateCoordinates:[],
isaddBtnOne: false,
isDisabled: false,
district: null,
polygonArea: [],
serviceList: [],
province: "",
provinceName:'',
provinceList: [],
city: "",
cityName: "",
cityList: [],
district2: "",
district2Name: "",
districtList: [],
street: "",
streetList: [],
addOne:false,
mapSeeA:0,//第一次進(jìn)入頁(yè)面
mapAreaCode:'',
mapAreaName:'',
newMap:false,
isClear:true,
};
},
mounted() {
console.log("mounted",this.address,this.areaCode);
//對(duì)當(dāng)時(shí)接口返回參數(shù)的處理
if (this.address) {
let address = this.address.split(",");
this.province=address[0]
this.provinceName=address[0]
this.city=address[1]
this.cityName=address[1]
this.district2=address[2]
this.district2Name=address[2]
this.mapAreaCode=this.areaCode
}
this.isaddBtnOne = this.isaddBtn;
this.echart();
},
methods: {
echart() {
let that=this
AMapLoader.reset()
AMapLoader.load({
key: "", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
plugins: [
"AMap.ToolBar",
"AMap.Driving",
"AMap.PolygonEditor",
"AMap.PlaceSearch",
"AMap.ControlBar",
"AMap.Scale",
"AMap.Geocoder",
"AMap.DistrictSearch"http://區(qū)域查詢
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
that.map = new AMap.Map(that.mapIdDiv, {
resizeEnable: true,
// viewMode: '3D',
pitch: 45,
zoom: 13, // 初始化地圖級(jí)別
center:that.center, // 初始化地圖中心點(diǎn)位置
});
const ControlBar = new AMap.ControlBar({
position: { top: '0', right: '10px' }
})
that.map.addControl(ControlBar);
// //數(shù)據(jù)格式化;
let allList=that.allCoordinates//列表所有數(shù)據(jù)
let data=[]
for (var i = 0; i < allList.length; i++) {
if (allList[i].serviceRange) {
let data2 = JSON.parse(allList[i].serviceRange);
if(data2.coordinates[0]){
let list=data2.coordinates[0]
if(allList[i].id!=that.updateId){
console.log('allList[i].id',allList[i].id,that.updateId)
data.push({list:list,name:allList[i].name,id:allList[i].id})
// data.push(list)
}else{
//可編輯數(shù)據(jù)
console.log('that.updateId',that.updateId)
that.updateCoordinates={list:list,name:allList[i].name,id:allList[i].id}
}
}
}
}
console.log('data',data)
let lengthaaa=data.length
that.polygonList=[]
for (var j = 0; j < data.length; j++) {
var points
var name
//循環(huán)遍歷添加多邊形;
points = data[j].list;
name=data[j].name
let polygon1 = new AMap.Polygon({
path: points,
strokeColor: "#FF0000",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#FF0000",
zIndex: 20,
});
that.polygonList.push(polygon1);
that.map.add([polygon1]);
let marker = new AMap.Marker({
position: points[0],
offset: new AMap.Pixel(0, 0),
direction:'right',
})
marker.setLabel({
position: points[0],
icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
direction:'right',
offset: new AMap.Pixel(0, 0), //設(shè)置文本標(biāo)注偏移量
content: "<div style='background-color: #D9EAFF;color:#333;padding:3px;'>"+name+"</div>", //設(shè)置文本標(biāo)注內(nèi)容
});
that.map.add(marker)
}
//可編輯數(shù)據(jù)
that.updatePolygon = new AMap.Polygon({
path: that.updateCoordinates.list,
strokeColor: "#0075FF",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#0075FF",
zIndex: 20,
extData:{
id:that.updateCoordinates.id
}
});
that.polygonList.push(that.updatePolygon);
that.map.add([that.updatePolygon]);
that.map.setFitView();
that.polyEditor = new AMap.PolygonEditor(that.map,that.updatePolygon);//編輯數(shù)據(jù)
//行政區(qū)劃查詢
var opts = {
subdistrict: 1, //返回下一級(jí)行政區(qū)
showbiz: false //最后一級(jí)返回街道信息
};
that.district = new AMap.DistrictSearch(opts);
that.district.search("中國(guó)", function(status, result) {
if (status == "complete") {
that.getData(result.districtList[0], "province");
that.searchNew("province","no",1); //默認(rèn)城市
}
});
})
.catch((e) => {
console.log("---",e);
});
},
//刪除當(dāng)前編輯區(qū)域
clearPolygon(){
let that=this
that.polyEditor.close()
if(that.isaddBtnOne){//新增
let polygonDiv = that.map.getAllOverlays("polygon"); //獲取所有的polygon
let number=polygonDiv.length
console.log('polygonDiv',polygonDiv)
that.map.remove(polygonDiv[number-1]) // 移除覆蓋物
}else{//編輯
let overlaysList=that.polygonList
for(var i = 0; i < overlaysList.length; i++){
// 獲取存在每個(gè) extData 中的 id
var id = overlaysList[i].getExtData().id;
console.log('that.updateId',that.updateId)
if(id === that.updateCoordinates.id){//可編輯的id區(qū)域
that.map.remove(overlaysList[i]) // 移除覆蓋物
console.log('id',id)
break;
}
}
}
that.isClear=false
that.isDisabled=true
},
getPoly() {
this.polyEditor.open();
},
showInfoClick(e) {
console.log("**", e.lnglat.getLng() + "," + e.lnglat.getLat());
this.isDisabled = false;
},
getOk(){
let overlaysList = this.map.getAllOverlays('polygon'); //獲取所有的polygon
let pathList=[]
for(let i=0;i<overlaysList.length;i++){
let path=overlaysList[i]._opts.path
if(path&&path.length>0){
pathList.push(path)
}
};
let number=pathList.length
console.log('==all',pathList)
var mapname={
provinceName:this.provinceName,
cityName:this.cityName,
district2Name:this.district2Name,
mapAreaCode:this.mapAreaCode
}
console.log("mapname",mapname)
if(this.newMap||this.isaddBtn){//新增
console.log('==2',[pathList[number-1]])
this.$emit("mapList",true,[pathList[number-1]],mapname);
}else{//編輯
console.log('==1',[pathList[number-2]])
this.$emit("mapList",true,[pathList[number-2]],mapname);
}
},
hideDialog() {
this.$emit("mapList", false);
},
getData(data, level,numbera) {
var that = this;
var bounds = data.boundaries;
console.log("bounds", bounds);
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: that.map,
strokeWeight: 1,
strokeColor: "#0091ea",
fillColor: "#80d8ff",
fillOpacity: 0.2,
path: bounds[i]
});
that.polygonArea.push(polygon);
}
that.map.setFitView(); //地圖自適應(yīng)
}
console.log(numbera,'that.polygonArea',that.polygonArea)
let newList=that.polygonArea
let polygonAreaList=[]
var subList = data.districtList;
if (subList) {
if (level === "province") {
that.provinceList = subList;
} else if (level === "city") {
that.cityList = subList;
} else if (level === "district") {
that.districtList = subList;
console.log('that.districtList',that.districtList)
} else if (level === "street") {
for (var i = 0, l = subList.length; i < l; i++) {
subList[i].adcodeKey = i + "key" + subList[i].adcode;
}
that.streetList = subList;
console.log('that.streetList')
that.isDisabled=false
console.log('that.isDisabled',that.isDisabled)
}
console.log("curList", level, subList);
if(that.mapSeeA==0){
that.setCenter(that.center);
that.mapSeeA++
}
}
if(numbera==1){
that.searchNew("city","no",2); //默認(rèn)城市
}else if(numbera==2){
that.district2=that.areaCode
that.searchNew("district","no",3); //默認(rèn)城市
}
},
getName(type,data){
var that=this
if(type=='province'){
that.provinceName=data.name
}
if(type=='city'){
that.cityName=data.name
}
if(type=='district2'){
that.isaddBtnOne=true
that.newMap=true
that.district2Name=data.name
}
},
//選擇type no不清空加載默認(rèn)數(shù)據(jù)
searchNew(type,clearType,numbera) {
var that = this;
that.polyEditor.close();
that.$forceUpdate();
//清除地圖上所有覆蓋物
for (var i = 0, l = that.polygonArea.length; i < l; i++) {
that.polygonArea[i].setMap(null);
}
var adcode = "";
var typeNext = "";
if (type == "province") {
adcode = that.province;
typeNext = "city";
//清空下一級(jí)別的下拉列表
if(clearType!='no'){
that.city = "";
that.cityList = [];
that.district2 = "";
that.districtList = [];
}
}
if (type == "city") {
adcode = that.city;
typeNext = "district";
//清空下一級(jí)別的下拉列表
if(clearType!='no'){
that.district2 = "";
that.districtList = [];
}
}
if (type == "district") {
adcode = that.district2;
typeNext = "street";
}
that.district.setLevel(type); //行政區(qū)級(jí)別
that.district.setExtensions("all");
//行政區(qū)查詢
//按照adcode進(jìn)行查詢可以保證數(shù)據(jù)返回的唯一性
this.mapAreaCode=adcode
console.log('this.mapAreaCode',this.mapAreaCode)
that.district.search(adcode, function(status, result) {
if (status === "complete") {
that.getData(result.districtList[0], typeNext,numbera);
}
});
},
setCenter(obj) {
this.map.setCenter(obj);
console.log('obj',obj)
},
upPolygon(){
let that=this
let overlaysList = this.map.getAllOverlays('polygon'); //獲取所有的polygon
let pathList=[]
for(let i=0;i<overlaysList.length;i++){
let path=overlaysList[i]._opts.path
if(path&&path.length>0){
pathList.push(path)
}
};
let number=pathList.length
console.log('==all',pathList)
console.log('==ADD',[pathList[number-1]])
var pathLista=[pathList[number-1]]
//可編輯數(shù)據(jù)
that.updatePolygon = new AMap.Polygon({
path: pathLista,
strokeColor: "#0075FF",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#0075FF",
zIndex: 20,
extData:{
id:''
}
});
that.polygonList.push(that.updatePolygon);
that.map.add([that.updatePolygon]);
that.map.setFitView();
that.polyEditor = new AMap.PolygonEditor(that.map,that.updatePolygon);//編輯數(shù)據(jù)
that.polyEditor.open();
},
//編輯區(qū)域數(shù)據(jù)
upPolygon2(){
var that=this
let polygonAreaList=[]
let newList=that.polygonArea
console.log('this.polygonArea',that.polygonArea)
for (var j = 0; j < newList.length; j++){
//可編輯數(shù)據(jù)
let path=newList[j]._opts.path
let updatePolygon = new AMap.Polygon({
path:path,
strokeColor: "#0075FF",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#0075FF",
zIndex: 20,
});
polygonAreaList.push(updatePolygon)
that.map.add([updatePolygon]);
}
console.log('polygonAreaList',polygonAreaList)
//可編輯數(shù)據(jù)
// that.updatePolygon = new AMap.Polygon({
// path: that.updateCoordinates.list,
// strokeColor: "#0075FF",
// strokeWeight: 1,
// strokeOpacity: 0.2,
// fillOpacity: 0.24,
// fillColor: "#0075FF",
// zIndex: 20,
// extData:{
// id:that.updateCoordinates.id
// }
// });
// that.polygonList.push(that.updatePolygon);
// that.map.add([that.updatePolygon]);
that.polyEditorNew = new AMap.PolygonEditor(that.map,polygonAreaList);//編輯數(shù)據(jù)
that.polyEditorNew.open();
// that.polyEditorNew.close();
// this.polyEditorNew.setTarget();
// this.polyEditorNew.open();
}
},
};
</script>
<style lang="scss" scoped>
.input-card{
margin-top: 10px;
}
/deep/ .amap-marker-label{
border: 1px solid #D9EAFF;
padding: 0;
border-radius: 6px;
}
.cityListCss {
display: inline-block;
min-width: 50px;
color: #333;
cursor: pointer;
padding: 4px 10px;
}
.activeCss {
color: #1d6bff;
}
/* 行政查詢樣式 */
.mapNewCss{
margin-top: -40px !important;
margin-bottom: 10px;
}
.mapNewCss .input-item {
display: inline-block;
width: 30%;
text-align: right;
}
.mapNewCss .input-item .input-item-text{
display: inline-block;
text-align: right;
}
.mapNewCss .input-item .input-item-prepend {
display: inline-block;
width: 20%;
}
</style>到此這篇關(guān)于vue高德地圖繪制行政區(qū)邊界的文章就介紹到這了,更多相關(guān)vue高德地圖繪制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue路由傳參之使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開(kāi)發(fā)中異步請(qǐng)求是非常常見(jiàn)的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題
下面小編就為大家分享一篇解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了深入了解Vue動(dòng)態(tài)組件和異步組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue組件的相關(guān)知識(shí)，感興趣的朋友可以了解下2021-01-01
vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在本文中我們給大家整理了一篇關(guān)于Vue表單控件綁定的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。2019-02-02