一沙框架（yishaadmin） 前端引入VUE的實現方法
1、下載vue.js,加入項目中，如下圖
2、頁面代碼如下，注意注釋的內容，數據請求的實現方法
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>vuetest</title>
@* 引用vue.js *@
<script src="~/yisha/js/vue.js"></script>
</head>
<body>
@* 最外邊的div設置id值，vue調用時引用該id *@
<div id="vuemode" class="container">
<div class="sublistbox">
<div class="box-30">
<span>設備條碼：</span>
</div>
<div class="space-x"></div>
<div class="box-70">
@* 動態顯示內容的變量 *@
<span>{{workorder.devicebarcode}}</span>
</div>
</div>
<div class="sublistbox">
<div class="box-30">
<span>設備名稱：</span>
</div>
<div class="space-x"></div>
<div class="box-70">
<span>{{workorder.devicename}}</span>
</div>
</div>
<div class="sublistbox">
<div class="box-30">
<span>客戶名稱：</span>
</div>
<div class="space-x"></div>
<div class="box-70">
<span>{{workorder.customername}}</span>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var workorderid = ys.request('workorderid');
var vm = new Vue({//注意V大寫
el: "#vuemode",//頁面最外層div的id
data: {
workorder: { },
},
methods: {
getWorkorder: function () {
ys.ajax({
url: '@Url.Content("~/IntegratedManage/Workorder/GetWorkorder")' + '?id=' + workorderid,
type: 'get',
success: function (obj) {
if (obj.Tag == 1) {
vm.workorder = obj.Data;
}
},
error: function () {
alert('數據請求失敗');
}
});
}
},
mounted() {
this.getWorkorder();
}
});
</script>