Html利用Vue动态加载单文件页面【httpVueLoader】

文章目录

1、 首先页面引入vue、http-vue-loader

html 复制代码
  <script src="./assets/js/vue.min.js"></script>
  <script src="https://unpkg.com/http-vue-loader"></script>

2、 利用httpVueLoader加载指定页面

html 复制代码
<div id="app">
<addressComponent ></addressComponent>
 </div>
<script>
  var addressComponent = httpVueLoader('./file.vue');
  var app = new Vue({
    el: '#app',
    components: {
      addressComponent,
    },
  })
</script>

3、利用httpVueLoader加载的文件【file.vue】

3.1 js module.export导出

注意:httpVueLoader加载的单文件导出方式不同:module.exports = {},而不是export default {}

html 复制代码
<template>
    <div>{{title}}</div>
</template>
<script>
module.exports = {
    data(){
        return {
            title: "动态页面"
        }
    },
}
</script>

3.2 通过 import 加载外部JS

javascript 复制代码
<script>
module.exports = {
    data(){
        return {
            title: "动态页面"
        }
    },
    async mounted(){
        const fn = await import('./js/file-fn.js');
        fn.fileFn(); //123
    }
}
</script>
javascript 复制代码
// file-fn.js
export function fileFn() {
	console.log(123);
}

4、httpVueLoader:组件的全局注册和局部注册

4.1、全局注册

html 复制代码
<template>
    <div class="home">
        <my-header></my-header>
    </div>
</template>
 
<script>
    //引入,相当于import
    const Header = httpVueLoader('./Header.vue');
    //全局注册
    Vue.component('my-header', Header);
    module.exports = {
        data() {
            return { };
        }
    };
</script>
 
<style scoped>
    .home {
        font-size: 24px;
        font-weight: bold;
    }
</style>

4.2、局部注册

html 复制代码
<template>
    <div class="home">
        <my-header></my-header>
    </div>
</template>
 
<script>
    //引入 相当于import
    const Header = httpVueLoader('./Header.vue');
    module.exports = {
        data() {
            return {
                msg: '主页内容'
            };
        },
       //局部注册
      components:{
        'my-header':Header
      }
    };
</script>
 
<style scoped>
    .home {
        font-size: 24px;
        font-weight: bold;
    }
</style>
相关推荐
ホロHoro19 分钟前
学习笔记:Javascript(5)——事件监听(用户交互)
javascript·笔记·学习
meng半颗糖25 分钟前
JavaScript 性能优化实战指南
前端·javascript·servlet·性能优化
EndingCoder27 分钟前
离线应用开发:Service Worker 与缓存
前端·javascript·缓存·性能优化·electron·前端框架
haogexiaole3 小时前
vue知识点总结
前端·javascript·vue.js
哆啦A梦15885 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
智码看视界6 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
小周同学@7 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok7 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~7 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架