一沙框架（yishaadmin） 前端引入VUE的实现方法

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

 

posted @ 2020-10-10 11:16  中国结  阅读(3745)  评论(0)    收藏  举报