html文件引用.vue 文件的方式

1.html文件

先引入vue.js

再引入httpVueLoader.js

注册httpVueLoader。

在script中Vue.use(httpVueLoader);

在components中注册组件，httpVueLoader的注册方式有好几种，具体引用方式看个人习惯，更多的可以去看httpVueLoader官网：http-vue-loader - npm；

<!DOCTYPE html>
<html lang="en"><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>引用vue组件</title><script src="./js/vue.js"></script><script src="./js/httpVueLoader.js"></script>
</head><body><div id="app"><infinite-split-table :tree_data="tree_data" :deep="0"></infinite-split-table></div><script>Vue.use(httpVueLoader)new Vue({el: "#app",data() {return {tree_data: {type: "column",id: 0,data: [{id: 1,type: "label",data: "入炉煤",},{id: 2,type: "row",data: [{id: 4,type: "label",data: "取样地点",width: "10%",},{id: 5,type: "column",data: [{id: 1,type: "row",data: [{id: 1,type: "label",data: "细度 (单位 %)",}, ],},{id: 1,type: "row",data: [{id: 1,type: "label",data: "<3mm",width: "50%",},{id: 1,type: "label",data: "<0.5mm",width: "50%",},],},],width: "25%",},{id: 5,type: "column",data: [{id: 1,type: "row",data: [{id: 1,type: "label",data: "工 业 分 析 (单位 %)",}, ],},{id: 1,type: "row",data: [{id: 1,type: "label",data: "水分",width: "25%",},{id: 1,type: "label",data: "灰分",width: "25%",},{id: 1,type: "label",data: "挥发分",width: "25%",},{id: 1,type: "label",data: "硫",width: "25%",},],},],width: "30%",},{id: 5,type: "label",data: "G值",width: "8.75%",},{id: 5,type: "label",data: "Y值mm",width: "8.75%",},{id: 5,type: "label",data: "X值mm",width: "8.75%",},{id: 5,type: "label",data: "备 注",width: "8.75%",},],},],},}},components: {"infinite-split-table": "url:./component/InfiniteSplitTable/InfiniteSplitTable.vue"}})</script>
</body></html>

2.创建.vue组件页面

这里面有一个需要注意的点要把export default 导出方式改变，变成module.exports = {};不然会报错。具体区别意思可以去看es6的官方文档，也可自行百度，至此完成。打开文件不能直接file形式打开文件,要本地启动一个服务进行访问打开文件，可以用vscode的go live启动本地服务。

<template><tableclass="infinite-split-table"cellpadding="0"cellspacing="0":class="{ 'top-border': deep == 0, 'left-border': deep == 0 }"><template><trv-for="line in for_data"style="width: 100%":style="{height:typeof line[0].height != 'undefined' ? line[0].height : 'auto',}"><tdv-for="item in line":style="{width: typeof item.width != 'undefined' ? item.width : 'auto',}"><div v-if="item.type != 'row' && item.type != 'column'" class="text"><span v-if="item.type == 'label'">{{ item.data }}</span></div><infinite-split-table v-else :tree_data="item" :deep="deep + 1"></infinite-split-table></td></tr></template></table>
</template>
<script>
module.exports = {name: "InfiniteSplitTable",props: ["tree_data", "deep"],data() {return {msg: "引用好了吗",};},computed: {for_data() {let type = this.tree_data.type;let data = this.tree_data.data;let result = [];if (type === "row") {result.push(data);} else if (type === "column") {for (let i = 0; i < data.length; i++) {result.push([data[i]]);}}return result;},},
};
</script>
<style scoped>
.infinite-split-table {width: 100%;height: 100%;box-sizing: border-box;
}
.left-border {border-left: 1px solid black;
}
.top-border {border-top: 1px solid black;
}
.text {padding: 5px;box-sizing: border-box;border-right: 1px solid black;border-bottom: 1px solid black;height: 100%;min-height: 30px;word-wrap: break-word;word-break: break-all;display: flex;align-items: center;justify-content: center;
}
</style>

html文件引用.vue 文件的方式相关推荐

单文件组件.vue 文件
vuejs 单文件组件.vue 文件 vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于. ...
vscode格式化文件时 vue文件报错
1报错原因:格式化后将引号改变,自动添加分毫 2解决办法:将设置中的保存文件时格式化文件选框取消勾选
python文件引用其他文件中的变量
问题: 然后再另一个文件中引用该变量报错:Cannot find reference 'User_Agent' in '__init__.py' less... (Ctrl+F1) 正确写法: fr ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
vue引用js文件的多种方式(推荐)
vue引用js文件的多种方式(推荐) Day_by_day93 这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli ...
vue中静态文件引用注意事项
(一)assets文件夹与static文件夹的区别区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了区别二:assets中的文件 ...
在vue文件引入echarts_vue文件中使用echarts.js的两种方式
最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echa ...

html文件引用.vue 文件的方式

html文件引用.vue 文件的方式相关推荐

最新文章

热门文章