vue

directive (DOM)
filter (文本)
computed（数据）
Components (widget)

异步组件

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');
        });
    }
};

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');

});

}

};

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');
    }
});

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');

}

});

知识点滴

专注于php应用开发

发表评论取消回复

发表评论 取消回复

发表评论取消回复