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>
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
CodeCraft Studio9 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀11 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架