位置: IT常识 - 正文

html文件里怎么引用vue组件?(html文档怎么写)

编辑:rootadmin
html文件里怎么引用vue组件?

推荐整理分享html文件里怎么引用vue组件?(html文档怎么写),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html怎么样,html文件放在哪里,html文件怎么放进文件夹,html怎样,html文件怎么放进文件夹,文件html怎么能导入word文档里,html文件怎么弄,html文件怎么弄,内容如对您有帮助,希望把文章链接给更多的朋友!

这里我们使用 http-vue-loader 来实现:https://www.npmjs.com/package/http-vue-loader

html文件里怎么引用vue组件?(html文档怎么写)

Load .vue files directly from your html/js. No node.js environment, no build step.

我做了个demo如下:

html文件里面写下面的代码

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>测试页面</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="app"> <kaimo-info></kaimo-info> </div> <script> new Vue({ el: "#app", data: function () { return { }; }, components: { 'kaimo-info': httpVueLoader('./component/KaimoInfo.vue'), }, methods: { }, }); </script> </body></html>

KaimoInfo.vue 组件里写下面的代码,注意使用的是 module.exports

<template> <div class='kaimo-info'> {{msg}} </div></template><script>module.exports = { name: 'KaimoInfo', data () { return { msg: "hello http-vue-loader --- kaimo " }; }, created() { }, mounted() { }, methods: { },};</script><style scoped></style>

效果如下:

本文链接地址:https://www.jiuchutong.com/zhishi/284018.html 转载请保留说明!

上一篇:鸟瞰施内贝格山脉-奥克森峰,德国 (© Felix Meyer/Adobe Stock)(施伦贝格尔)

下一篇:宇航员杰夫·威廉姆斯在国际空间站拍摄到的地球 (© Jeff Williams/NASA)(johnny kim宇航员)

  • Redmi K30 Pro支持哪些频段(redmik30pro支持多少w快充)

    Redmi K30 Pro支持哪些频段(redmik30pro支持多少w快充)

  • 别人把我删了我还能看到他的朋友圈吗(别人把我删了我还能看到她朋友圈吗)

    别人把我删了我还能看到他的朋友圈吗(别人把我删了我还能看到她朋友圈吗)

  • 微信号可以第二次修改吗(微信号可以第二次使用吗)

    微信号可以第二次修改吗(微信号可以第二次使用吗)

  • 手机wifi的dns异常怎么办(wifi显示dns异常怎么用手机修复)

    手机wifi的dns异常怎么办(wifi显示dns异常怎么用手机修复)

  • 微信打开文件闪退是什么原因(微信一点文件就闪退)

    微信打开文件闪退是什么原因(微信一点文件就闪退)

  • 手机去打印店怎么打印(可以用手机去打印店)

    手机去打印店怎么打印(可以用手机去打印店)

  • 手机ke是什么(手机壳是什么垃圾分类)

    手机ke是什么(手机壳是什么垃圾分类)

  • 苹果装机量不足是什么意思(苹果手机下载软件装机量不足)

    苹果装机量不足是什么意思(苹果手机下载软件装机量不足)

  • 微信标签群发怎么全选(微信标签群发怎么能发送链接)

    微信标签群发怎么全选(微信标签群发怎么能发送链接)

  • 抖音可以上传多大的视频(抖音可以上传多长时间)

    抖音可以上传多大的视频(抖音可以上传多长时间)

  • 手机每次充电必须充满吗(手机每次充电必须重启)

    手机每次充电必须充满吗(手机每次充电必须重启)

  • 快手极速版怎么发照片(快手极速版怎么卡无限金币)

    快手极速版怎么发照片(快手极速版怎么卡无限金币)

  • wps怎样快速查找人名(wps怎样快速查找表格中所有重复姓名)

    wps怎样快速查找人名(wps怎样快速查找表格中所有重复姓名)

  • 手机怎么查银行卡的钱(手机怎么查银行卡号全部数字)

    手机怎么查银行卡的钱(手机怎么查银行卡号全部数字)

  • 如何关闭可用wlan提醒(如何关闭可用虚拟键盘)

    如何关闭可用wlan提醒(如何关闭可用虚拟键盘)

  • 电话拒接未接通什么意思(电话拒接未接通对方会知道吗)

    电话拒接未接通什么意思(电话拒接未接通对方会知道吗)

  • 什么是徕卡双摄(徕卡双a)

    什么是徕卡双摄(徕卡双a)

  • 好省怎么取消淘宝授权(好省怎么取消绑定淘宝)

    好省怎么取消淘宝授权(好省怎么取消绑定淘宝)

  • 微博搜索昵称没反应(微博搜索昵称找不到自己)

    微博搜索昵称没反应(微博搜索昵称找不到自己)

  • 怎么用快手发布动态(怎么快手发布作品视频)

    怎么用快手发布动态(怎么快手发布作品视频)

  • 抖音降权会通知吗(抖音账号降权平台会提醒吗)

    抖音降权会通知吗(抖音账号降权平台会提醒吗)

  • ai格式手机用什么打开(ai格式手机用什么软件)

    ai格式手机用什么打开(ai格式手机用什么软件)

  • airpods大小尺寸(airpods大小尺寸一样吗)

    airpods大小尺寸(airpods大小尺寸一样吗)

  • 夏普电视的蓝牙在哪里打开(夏普电视的蓝牙怎么打开)

    夏普电视的蓝牙在哪里打开(夏普电视的蓝牙怎么打开)

  • 手机热点网速慢(笔记本连手机热点网速慢)

    手机热点网速慢(笔记本连手机热点网速慢)

  • 联想笔记本电脑vt开启教程(联想笔记本电脑官网旗舰店)

    联想笔记本电脑vt开启教程(联想笔记本电脑官网旗舰店)

  • Win11安装如何跳过CPU检测 Win11跳过CPU检测的方法(Win11安装如何跳过以太网)

    Win11安装如何跳过CPU检测 Win11跳过CPU检测的方法(Win11安装如何跳过以太网)

  • Windows 11 CO-21H2 22000.194 正式版官方下载地址(附esd微软三语直链下载x64+arm64)

    Windows 11 CO-21H2 22000.194 正式版官方下载地址(附esd微软三语直链下载x64+arm64)

  • msgplus.exe是什么进程文件 有什么作用 msgplus进程查询(msg0.db是什么文件)

    msgplus.exe是什么进程文件 有什么作用 msgplus进程查询(msg0.db是什么文件)

  • vue内嵌iframe跨域通信(vue页面嵌套iframe vue页面)

    vue内嵌iframe跨域通信(vue页面嵌套iframe vue页面)

  • 非居民个人利息所得个税税率
  • 以转账方式收到货款会计分录
  • 印花税计税依据是什么
  • 会计凭证包括哪三种
  • 原始凭证分割单样本
  • 增值税优惠政策3%降1%
  • 差额发票能不能报销
  • 私企招残疾人可以辞职吗
  • 分公司独立核算和非独立核算区别
  • 简易征收如何入账
  • 没收逾期未退包装物押金收益,应计入( )科目
  • 从国外购进样品要交税吗
  • 税款滞纳金如何免除
  • excel单元格内换行macbook
  • 没有进项开销项发票是虚开发票吗
  • 补助及救济费用
  • 用工和用人单位
  • 长期驻扎外地的员工
  • 没有签订合同需要申报印花税吗
  • 免税和零税率和税率区别
  • 半成品核算工作步骤及要求
  • 往年亏损,今年盈利,是否计提盈余公积
  • 承兑交单是什么的一种
  • qq登录界面的设计与实现
  • 如何在win7系统中找到ie浏览器
  • navapp.exe - navapp是什么进程文件 作用是什么
  • 应交消费税会计分录怎么做
  • 成立公司必要性
  • 外贸企业有哪些公司青岛
  • ORB_SLAM2+kinect稠密建图实战项目总结
  • 卷卷卷卷卷
  • win11怎么通过ip连接打印机
  • session用处
  • 库存商品暂估入库金额如何确定
  • python tkinter详解
  • 中小企业的资产负债率均值是多少
  • 企业研发费用会计处理英文文献
  • 买一赠一的销售方式
  • centos上安装vscode
  • mysql的使用实验总结与分析
  • curl抓包
  • 延期缴纳土地使用税怎么办理
  • 在业和存续的区别
  • sql递减
  • mysql 自动重启
  • 以经营房产投资合营收固定收益如何开发票?
  • 金税三期税收管理系统打印控件
  • 电梯改造税率
  • 技术人员工资计入生产成本吗
  • 房产税和土地使用税什么时候申报
  • 资本公积的意思是
  • 简易计税项目的进项税能抵一般项目的销项税额吗?
  • 12月多开的发票,可以明年1月份入账吗?
  • 中标服务费计入合同取得成本
  • 专项附加扣除项目
  • 发票备注栏填写内容
  • 在建工程转固后计提折旧
  • 机票 进项抵扣
  • 固定资产计提折旧的方法
  • 建账的大体流程是什么
  • mac如何隐藏桌面
  • vtpwsr
  • centos怎么安装
  • 电脑win7一开机就弹出各种广告窗口怎么办
  • 后缀是nb是什么程序
  • 激活 win7
  • Unity3D游戏开发毕业论文
  • 检查shell脚本有无语法错误
  • 有关javascript的书
  • javascript怎么用
  • python 连接符
  • Android之Async-http
  • 工会经费税务代收
  • 医保电子缴费凭证怎么查询
  • 变更税务登记后多长时间生效
  • 接受虚开转出滞纳金
  • 贵州电子税务局app下载
  • 合伙企业如何申报税务报表
  • 河北税务登录密码是多少
  • 2022年广州社保基数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设