谷歌镜像 伍佰目录 短网址
  当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

不使用 webpack,vuejs 异步加载模板

来源:网络转载 浏览:39441次 时间:2023-09-04

webpack 打包不会玩,整了这么个小玩具

 

一段 vue 绑定代码,关键点在 gmallComponent

1、异步加载外部 vue 文件(非 .vue)

2、按一定规则拆分 template、script、style

new Vue({
    el: '#app_vuejs_replace',
    data: {
        search_key : '',
        results : [],
        pageindex : 1,
        selecteditem : null
    },
    components: {
        'vue-test': gmallComponent('gz/test.html', {
            props: ['items']
        })
    }
});

 

gz/test.html 使用习惯几乎遵循 vue 原生,定义模板、脚本、样式

<div>
    <div>I am async!</div>
    <div v-for="item in items" @click="onclick(item.company_name)">
        {{item.web_title}}
    </div>
</div>

<script>
export = {
    methods: {
        onclick: function(msg) {
            showTip(msg);
        }
    }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
    transition: opacity .9s
}
.fade-enter, .fade-leave-active {
    opacity: 0
}
</style>

 

将以下代码定义到公共 .js 文件中

<script type="text/javascript">
function gmallComponent(url, vuecom) {
    if (!vuecom) vuecom = {};
    return function(resolve, reject) {
        $.get(url).done(function(r) {
            var rl = r.toLowerCase();
            var style = '';
            var styleIndexEnd = rl.lastIndexOf('</style>');
            var styleIndex = rl.lastIndexOf('<style', styleIndexEnd);
            if (styleIndexEnd !== -1 && styleIndex !== -1) {
                style = r.substring(styleIndex, styleIndexEnd);
                style = style.substr(style.indexOf('>') + 1);
                style = '<component scoped :is="\'style\'">' + style + '</component>';
            }

            var scriptIndexEnd = rl.lastIndexOf('<\/script>');
            var scriptIndex = rl.lastIndexOf('<script', scriptIndexEnd);
            if (scriptIndexEnd !== -1 && scriptIndex !== -1) {
                var script = r.substring(scriptIndex, scriptIndexEnd);
                script = script.substr(script.indexOf('>') + 1);
                script = '(' + script.replace(/export\s*=\s*\{/i, '{') + ')';
                var obj = eval(script);
                for (var a in obj) vuecom[a] = obj[a];
            }
            var template = r.substring(0, Math.min(styleIndex, scriptIndex));
            if (style) {
                var index = template.lastIndexOf('</');
                if (index !== -1) template = template.substr(0, index) + style + template.substr(index);
            }
            vuecom.template = template;
            debugger
            resolve(vuecom);
        });
    };
}

来源:https://www.cnblogs.com/kellynic/p/6649395.html

  推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 就要爱网站目录就要爱网站目录

    就要爱网站目录,按主题和类别列出网站。所有提交的网站都经过人工审查,确保质量和无垃圾邮件的结果。

    www.912219.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net