一沙框架（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>