From 4f1a38ad34118cc89516f9f8d9d00ff8e98d79bf Mon Sep 17 00:00:00 2001
From: wanggang <76527413@qq.com>
Date: Tue, 31 Dec 2019 10:07:28 +0800
Subject: [PATCH] Vue.component ajax load template

Former-commit-id: fc6759db9f05a9f14c5996a9090636fd9c1e0f99
---
 projects/IoTCenter/wwwroot/test.c1.html |  1 +
 projects/IoTCenter/wwwroot/test.c1.js   | 36 ++++++++++++++++++-------
 projects/IoTCenter/wwwroot/test.html    | 21 +++------------
 3 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 projects/IoTCenter/wwwroot/test.c1.html

diff --git a/projects/IoTCenter/wwwroot/test.c1.html b/projects/IoTCenter/wwwroot/test.c1.html
new file mode 100644
index 00000000..0c9a3548
--- /dev/null
+++ b/projects/IoTCenter/wwwroot/test.c1.html
@@ -0,0 +1 @@
+<div>foo {{count}}</div>
\ No newline at end of file
diff --git a/projects/IoTCenter/wwwroot/test.c1.js b/projects/IoTCenter/wwwroot/test.c1.js
index 0ef34b35..e00e0b95 100644
--- a/projects/IoTCenter/wwwroot/test.c1.js
+++ b/projects/IoTCenter/wwwroot/test.c1.js
@@ -1,11 +1,27 @@
-const Foo = Vue.component('page-about', {
-    template: '<div>foo {{count}}</div>',
-    data() {
-        return {
-            count: 123
-        };
-    },
-    created: function () {
-        alert('created');
-    }
+//const Foo = Vue.component('fool', {
+//    template: '<div>foo {{count}}</div>',
+//    data() {
+//        return {
+//            count: 123
+//        };
+//    },
+//    created: function () {
+//        alert('created');
+//    }
+//});
+const Foo = Vue.component('fool', function (resolve, reject) {
+    // 可以请求一个html文件，既然存放模板还是html文件存放比较好
+    $.get("./test.c1.html").then(function (res) {
+        resolve({
+            template: res,
+            data() {
+                return {
+                    count: 123
+                };
+            },
+            created: function () {
+                alert('created');
+            }
+        })
+    });
 });
diff --git a/projects/IoTCenter/wwwroot/test.html b/projects/IoTCenter/wwwroot/test.html
index e32da79c..5f87eb3b 100644
--- a/projects/IoTCenter/wwwroot/test.html
+++ b/projects/IoTCenter/wwwroot/test.html
@@ -18,35 +18,22 @@
         <!-- 路由匹配到的组件将渲染在这里 -->
         <router-view></router-view>
     </div>
-    <script type="text/javascript" src="lib/vue/vue.min.js"></script>
-    <script type="text/javascript" src="lib/vue-router/vue-router.min.js"></script>
+    <script src="lib/jquery/jquery.min.js"></script>
+    <script src="lib/vue/vue.min.js"></script>
+    <script src="lib/vue-router/vue-router.min.js"></script>
     <script type="text/javascript" src="test.c1.js"></script>
     <script type="text/javascript" src="test.c2.js"></script>
-
     <script>
-        // 1. 定义 (路由) 组件。
-        // 可以从其他文件 import 进来
 
-        
-        // 2. 定义路由
-        // 每个路由应该映射一个组件。 其中"component" 可以是
-        // 通过 Vue.extend() 创建的组件构造器，
-        // 或者，只是一个组件配置对象。
-        // 我们晚点再讨论嵌套路由。
         const routes = [
             { path: '/foo', component: Foo },
             { path: '/bar', component: Bar }
         ]
 
-        // 3. 创建 router 实例，然后传 `routes` 配置
-        // 你还可以传别的配置参数, 不过先这么简单着吧。
         const router = new VueRouter({
-            routes // (缩写) 相当于 routes: routes
+            routes
         })
 
-        // 4. 创建和挂载根实例。
-        // 记得要通过 router 配置参数注入路由，
-        // 从而让整个应用都有路由功能
         const app = new Vue({
             router
         }).$mount('#app')