- directive (DOM)
- filter (文本)
- computed（数据）
- Components (widget)
异步组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var exports; var SyncComponent = { loaded : {}, src : "/component/", load : function(name){ if(this.loaded[name]){ return; } var that = this; Vue.component(name, function(resolve){ var scriptUrl = that.src + name + ".js"; $.get(scriptUrl, function(script) { if(!/html$/.test(exports.template)) { resolve(exports); that.loaded[name] = true; } else { var tplUrl = that.src + "template/" + name + ".html"; $.get(tplUrl, function(template) { exports.template = template; resolve(exports); that.loaded[name] = true; }, 'text'); } }, 'script'); }); } }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var JMessage = new Vue({ el: '#main', data: { // api列表 currentView : 'welcome', apis: [ { label : 'home', api : 'welcome' }, { label : '订阅者', api : 'customer' }, { label : '状态', api : 'status'}, { label : '消息', api : 'message' }, { label : '管理', api : 'manager' } ] }, methods : { show : function(api){ console.log(api); SyncComponent.load(api); this.currentView = api; } }, created : function(){ SyncComponent.load('welcome'); } }); |