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

最新推荐文章于 2024-07-02 10:54:19 发布
最新推荐文章于 2024-07-02 10:54:19 发布
阅读量7.1k 收藏 24
点赞数 4
分类专栏： 学习 工作 js 文章标签： vue.js html es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dulei_start/article/details/121996491
版权
学习 同时被 3 个专栏收录
19 篇文章 1 订阅
订阅专栏
工作
17 篇文章 0 订阅
订阅专栏
js
7 篇文章 0 订阅
订阅专栏

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>
  <table
    class="infinite-split-table"
    cellpadding="0"
    cellspacing="0"
    :class="{ 'top-border': deep == 0, 'left-border': deep == 0 }"
  >
    <template>
      <tr
        v-for="line in for_data"
        style="width: 100%"
        :style="{
          height:
            typeof line[0].height != 'undefined' ? line[0].height : 'auto',
        }"
      >
        <td
          v-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>

dulei_start
关注
  • 4
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端html引入vue
weixin_43804370的博客
02-04 1632
前端html引入vue的组件化开发前言demo的结构demo.htmlchild.js总结 前言 目前，前端的框架化开发是流行趋势。在国内，vue无疑是三大框架中最流行的。然而一些老的项目并非是基于vue-cli等工具进行的框架化开发，而是使用原生js进行的，却想引入vue进行一些新功能开发，这就需要vue适配原生js开发的项目 demo的结构 —demo ——child.js //子组件，一个elementui-table ——demo.html //页面 ——elementui.js // elem
vuejs 单文件组件.vue 文件的使用
12-10
vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack...
html里引进vue
weixin_60041868的博客
11-05 88
【代码】html里引进vue。
vue3.0基本语法,在html中引入vue3.0
最新发布
qq_44149644的博客
07-02 221
vue3.0初级
在HTML页面中引入vue组件
一步一个脚印，踏实努力，向着目标前进
08-08 7230
组件化开发是一种软件开发的方法论，旨在通过将复杂的系统分解为独立的、可重用的组件来提高开发效率和代码的可维护性。组件化开发将系统按照功能、模块或界面的不同部分进行拆分，每个部分都对应一个独立的组件，组件之间可以通过接口或消息进行通信，从而实现系统的整体功能。组件化开发的优势包括提高代码复用性、降低开发成本、可并行开发、易于维护等。
html页面引入vue
热门推荐
CoffeeAndIce的博客
08-11 1万+
基础环境 ①所需的基本ui组件 基本后台模块 element、iview ，手机端可以mui 、 uniapp ②所需Vue版本 建议官方最新版本为准，稳定性可靠 ③兼容vue文件的http-vue-loader 可以无需脚手架情况下对vue以脚手架形式编写vue文件，同时便捷了引入方式 基于Mui样例 index.html <!DOCTYPE html> <html> <head> <meta char.
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 6627
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
html 引入 vue.js
笑望灬星辰
06-13 1万+
html 引入 vue.js 1 vue官网 下载 vue.js 目录结构 编码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/vue.js">&
详解.vue文件解析的实现
08-27
详解.vue文件解析的实现 本文主要介绍了.vue文件解析的实现，包括了.vue文件的结构、template标签的使用、style标签的作用域、script标签的export default语法等。下面是对这些知识点的详细解释： 1. Vue单文件...
word .docx文件格式转vue.html文件工具
03-25
本篇文章将深入探讨“word .docx文件格式转vue.html文件工具”的相关知识点，包括Word .docx文件格式、Vue.js、HTML以及软件/插件在文件转换中的应用。 首先，Word .docx是一种流行的文档格式，由微软公司开发，...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载的问题可能会导致应用样式或功能缺失。本文将深入探讨这个问题，并提供两种...
vue2.0开发入门笔记之.vue文件的生成和使用
08-29
- 可以直接导入和使用，无需额外的 HTML 文件引用。 - 通过构建工具，可以进行代码分割和懒加载，优化性能。 了解并熟练掌握 `.vue` 文件的生成和使用是 Vue 2.0 开发的基础，这将帮助开发者高效地构建复杂的前端...
Vue单页应用引用单独的样式文件的两种方式
08-27
Vue单页应用在开发中经常会遇到样式文件的引用问题，本文将从两个方面介绍Vue单页应用如何引用单独的样式文件，分别是使用main.js文件引入静态资源和在.vue文件中使用style标签引入样式文件。 使用main.js文件引入...
如何解决.vue文件url引用文件的问题
12-07
接下来，我们来看看不同类型的文件引用方式： 1. **模板（template）**：在HTML模板中，可以使用`@`或`~`来引用资源。例如： - `<img src="@/assets/images/jiaban.jpg">` - `~assets/images/cat.png">` 2. **...
详解vue文件中使用echarts.js的两种方式
10-17
在Vue项目中集成ECharts.js，通常有两种常见的方式：一种是通过组件的形式，另一种是直接在Vue文件中引入。这两种方法都有其优缺点，适用于不同的项目需求。 首先，我们来看第一种方式，即以组件的形式使用ECharts...
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
08-29
Webstorm 配置 Vue 文件高亮支持 Webstorm 是一款功能强大且流行的集成开发环境（IDE），它提供了许多实用的功能来提高开发效率。其中，配置 Vue 文件高亮支持是其中一个非常重要的功能。本文将详细介绍如何在 ...
HTML5引入VUE
qq_58024411的博客
08-07 2584
摘要：会介绍HTML5引入vue以及快速入门vue
app.vue怎么引用其他vue文件
06-09
在 app.vue 中引用其他 Vue 文件，需要使用 Vue.js 提供的组件化机制和模块化思想。一般来说，我们会将其他页面组件拆分成单独的 .vue 文件，并在 app.vue 中通过 import 语句引入。 例如，在 app.vue 中引入一个名为 HelloWorld 的组件，可以按照以下步骤操作： 1. 在项目根目录中，创建一个名为 HelloWorld.vue 的文件，编写该组件的代码。 2. 在 app.vue 中导入该组件： ```javascript <script> import HelloWorld from './components/HelloWorld.vue' export default { components: { HelloWorld } } </script> ``` 上述代码中，`import` 语句用于导入 HelloWorld 组件，路径为 `./components/HelloWorld.vue`。`export default` 语句用于将该组件注册到 app.vue 中，并指定组件名称为 `HelloWorld`。 3. 在 app.vue 中使用该组件： ```html <template> <div id="app"> <HelloWorld/> </div> </template> ``` 上述代码中，我们在 app.vue 的 template 中使用了 HelloWorld 组件，用 `<HelloWorld/>` 标签表示该组件。 这样，我们就可以在 app.vue 中引用其他的 Vue 组件了。需要注意的是，组件的路径应该根据实际情况进行调整，确保路径正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值