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

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 文件中


                    
                    

你可能感兴趣的:(不使用 webpack,vuejs 异步加载模板)