{"id":97,"date":"2015-12-17T15:45:50","date_gmt":"2015-12-17T07:45:50","guid":{"rendered":"http:\/\/blog.inforere.com\/?p=97"},"modified":"2015-12-18T18:20:44","modified_gmt":"2015-12-18T10:20:44","slug":"vue%e4%b8%ad%e7%9a%84dom%e6%88%96%e6%98%af%e6%96%87%e6%9c%ac%e6%93%8d%e4%bd%9c","status":"publish","type":"post","link":"https:\/\/blog.inforere.com\/?p=97","title":{"rendered":"vue"},"content":{"rendered":"<ol>\n<li>directive (DOM)<\/li>\n<li>filter (\u6587\u672c)<\/li>\n<li>computed\uff08\u6570\u636e\uff09<\/li>\n<li>Components (widget)<\/li>\n<\/ol>\n<p>\u5f02\u6b65\u7ec4\u4ef6<\/p>\n<pre class=\"lang:js decode:true \">var exports;\r\nvar SyncComponent = {\r\n    loaded : {},\r\n    src : \"\/component\/\",\r\n    load : function(name){\r\n        if(this.loaded[name]){\r\n           return;\r\n        }\r\n\r\n        var that = this;\r\n        Vue.component(name, function(resolve){\r\n            var scriptUrl = that.src + name + \".js\";\r\n            $.get(scriptUrl, function(script) {\r\n                if(!\/html$\/.test(exports.template)) {\r\n                    resolve(exports);\r\n                    that.loaded[name] = true;\r\n                } else {\r\n                    var tplUrl = that.src + \"template\/\" + name + \".html\";\r\n                    $.get(tplUrl, function(template) {\r\n                        exports.template = template;\r\n                        resolve(exports);\r\n                        that.loaded[name] = true;\r\n                    }, 'text');\r\n                }\r\n            }, 'script');\r\n        });\r\n    }\r\n};<\/pre>\n<pre class=\"lang:js decode:true \">var JMessage = new Vue({\r\n    el: '#main',\r\n    data: {\r\n        \/\/ api\u5217\u8868\r\n        currentView : 'welcome',\r\n        apis: [\r\n            { label : 'home', api : 'welcome' },\r\n            { label : '\u8ba2\u9605\u8005', api : 'customer' },\r\n            { label : '\u72b6\u6001', api : 'status'},\r\n            { label : '\u6d88\u606f', api : 'message' },\r\n            { label : '\u7ba1\u7406', api : 'manager' }\r\n        ]\r\n    },\r\n\r\n    methods : {\r\n        show : function(api){\r\n            console.log(api);\r\n            SyncComponent.load(api);\r\n            this.currentView = api;\r\n        }\r\n    },\r\n\r\n    created : function(){\r\n        SyncComponent.load('welcome');\r\n    }\r\n});<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>directive (DOM) filter (\u6587\u672c) computed\uff08\u6570\u636e\uff09 Components (wi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[16],"_links":{"self":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts\/97"}],"collection":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=97"}],"version-history":[{"count":7,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts\/97\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}