在html5页面中如何使用vue3

天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:

<html>
<script src="https://unpkg.com/vue@next"></script>

<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>

</div>

</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html页面中引用VUE3的演示页面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 简单语法注册或获取全局组件.注册还会自动使用给定的 id 设置组件的名称
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}

)
app.mount("#vue")
</script>
</html>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的脚本地址. 然后在body下的<script>中书写vue3的代码即可. 下图是运行的结果效果

节内容是"VBA信息获取与处理"教程中第八个专题"VBA与HTML文档"的第五节。，希望想掌握这方面知识的朋友能参考我的教程学习。

第五节 HTML文档的访问端口DOM (Document Object Model)

大家好，我们继续对HTML文档进行学习，在前几节中我们认识了网页文档上面的各种元素，那么我们又该怎么访问他们呢，是如何实现呢？其实，HTML文档，提供了访问其元素的端口，这就是HTML DOM，其定义了一套标准的针对 HTML 文档的对象访问或操作的机制。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

1 HTML DOM (Document Object Model) 对象集合

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 HTML 文档的根节点。

特别注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

集合描述

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。

VBA直接支持调用的对象有限，如下：

对象描述

Document 代表整个 HTML 文档，可被用来访问页面中的所有元素

Anchors 代表 <a> 元素集合

Body 代表 <body> 元素

Forms 代表 <form> 元素集合

Frames 代表 <frame> 元素或<iframe> 元素集合

Images 代表 <img> 元素集合

Links 代表 <link> 元素集合

Options 代表 <option> 元素集合（select元素里面可以直接使用）

Cells 代表 <td> 元素集合（table元素里面可以直接使用）

Rows 代表 <tr> 元素集合（table元素里面可以直接使用）

All 对象集合，提供对文档中所有 HTML 元素的访问。

上述VBA支持直接调用对象的元素，调用起来就非常方便了，可以用序号调用，例如forms(0)，也可以按名称/ID调用，例如forms("名称/ID")。其他没法直接调用对象的元素，可以间接从通用all对象集合中去调用该元素或该元素对应的dom对象。

2 HTML DOM 文档的节点及文档树

在HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML文档的每一部分都是节点，整个文档被定义为一个文档节点，每个标签是一个元素节点，包含在元素中的文本是文本节点，每一个元素的属性是一个属性节点。如下：

1）整个文档是一个文档节点

2）每个 HTML 元素是元素节点

3）HTML 元素内的文本是文本节点

4）每个 HTML 属性是属性节点

5）注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树，这时一个非常形象的比喻，根节点就是html，主干就是body等，枝干就是body内含的各种元素节点，叶子和花就是元素节点关联的元素的属性（属性节点）或内含文本（文本节点）。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

网页文档，可以说是由元素组合而成的，也可以说是由节点连接而成的树构造的。节点是文档树结构中特有的名词，元素是节点，但是节点不一定是元素，节点还有文档节点、文本节点、属性节点等；元素是元素节点的扩展，元素可以拥有属性还有文本。初学者不是很必要纠结元素和节点的区别，这个需要甚至数据结构、类和继承等知识。可大致理解为，同一个html dom对象，提供的两个不同接口。如下的程序，你会发现，他既有支持node（节点）的相关属性和方法，也提供了element（元素）的相关属性和方法。

Sub MYNZ()

Dim ie, dmt, bd

Set ie = CreateObject("InternetExplorer.Application") '创建一个IE对象

With ie

.Visible = True '显示它

.navigate "http://www.baidu.com" '加载某个页面

Do Until .ReadyState = 4 '等待页面加载完毕

DoEvents

Loop

Set dmt = .document '将IE浏览器加载的页面文档，赋予dmt变量

Set bd = dmt.body '将文档的body赋予bd变量

End With

End Sub

代码截图：

按F8键运行截图：

3 HTML DOM 文档的对象属性

属性是节点（HTML 元素）的值，您能够获取或设置。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。我们看看下面一些常见的属性：

1）innerHTML 属性对象内部的HTML代码，是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

2）OuterHtml：对象的HTML代码，包括对象本身的HTML标签

3）innerText：对象内部的文本

4）OuterText：对象的文本，包括对象本身的文本

5）nodeName 属性 nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

6）nodeValue 属性 nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

7）nodeType 属性 nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型 NodeType

元素 1

属性 2

文本 3

注释 8

文档 9

以上只是给出了属性值，大家在使用的时候要注意。

本节知识点回向：

什么是HTML DOM文档的属性，常用的属性有哪些。

本节参考文件：008工作表.xlsm

积木编程的思路内涵：

在我的系列书籍中一直在强调"搭积木"的编程思路，这也是学习利用VBA的主要方法，特别是职场人员，更是要采用这种方案。其主要的内涵：

1 代码不要自己全部的录入。你要做的是把积木放在合适的位置然后去修正代码，一定要拷贝，从你的积木库中去拷贝，然后修正代码，把时间利用到高效的思考上。

2 建立自己的"积木库"。平时在学习过程中，把自己认为有用的代码放在一起，多积累，在用到的时候，可以随时拿来。你的积木库资料越多，你做程序的思路就会越广。

VBA的应用界定

VBA是利用Office实现个人小型办公自动化的有效手段（工具）。这是我对VBA的应用界定。在取代OFFICE新的办公软件没有到来之前，谁能在数据处理方面做到极致，谁就是王者。其中登峰至极的技能非VBA莫属！

我记得20年前自己初学VBA时，那时的资料甚少，只能看源码自己琢磨,真的很难。20年过去了，为了不让学习VBA的朋友重复我之前的经历，我根据自己多年VBA实际利用经验，推出了六部VBA专门教程：

第一套：VBA代码解决方案 是VBA中各个知识点的讲解，教程共147讲，覆盖绝大多数的VBA知识点，初学必备；

第二套：VBA数据库解决方案 数据库是数据处理的专业利器，教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法和实例操作，适合中级人员的学习。

第三套：VBA数组与字典解决方案 数组和字典是VBA的精华，字典是VBA代码水平提高的有效手段，值得深入的学习，是初级及中级人员代码精进的手段。

第四套：VBA代码解决方案之视频 是专门面向初学者的视频讲解，可以快速入门，更快的掌握这门技能。这套教程是第一套教程的视频讲解，听元音更易接受。

第五套：VBA中类的解读和利用这是一部高级教程，讲解类的虚无与肉身的度化，类的利用虽然较少，但仔细的学习可以促进自己VBA理论的提高。这套教程的领会主要是读者的领悟了，领悟一种佛学的哲理。

第六套教程：《VBA信息获取与处理》，这是一部高级教程，涉及范围更广，实用性更强，面向中高级人员。教程共二十个专题，包括：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪切板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。

大家可以根据以上资料1→3→2→6→5或者是4→3→2→6→5的顺序逐渐深入的逐渐学习。教程提供讲解的同时提供了大量的积木，如需要可以WeChat: NZ9668

学习VBA是个过程，也需要经历一种枯燥的感觉

如太白诗云：众鸟高飞尽，孤云独去闲。相看两不厌，只有敬亭山。学习的过程也是修心的过程，修一个平静的心。在代码的世界中，心平静了，心情好了，身体自然而然就好。心静则正，内心里没有那么多邪知邪见，也就没有那么多妄想。利人就是利己。这些教程也是为帮助大家起航，助上我自己之力，我的上述教程是我多的经验的传递，

"水善利万物而不争"，绵绵密密，微则无声，巨则汹涌。学习亦如此，知道什么是自己所需要的，不要蜷缩在一小块自认为天堂的世界里，待到暮年时再去做自欺欺人的言论。要努力提高自己，用一颗充满生机的心灵，把握现在，这才是进取。越是有意义的事情，困难会越多。愿力决定始终，智慧决定成败。不管遇到什么，都是风景。看淡纷争，看轻得失。茶，满也好，少也好，不要计较；浓也好，淡也好，其中自有值得品的味道。去感悟真实的时间，静下心，多学习，积累福报。而不是天天混日子，也不是天天熬日子。在后疫情更加严峻的存量残杀世界中，为自己的生存进行知识的储备，特别是新知识的储备。学习时微而无声，利用时则巨则汹涌。

每一分收获都是成长的记录，怎无凭，正是这种执着，成就了朝霞的灿烂。最后将一阙词送给致力于VBA学习的朋友,让大家感受一下学习过程的枯燥与执着：

浮云掠过，暗语无声，

唯有清风，惊了梦中啼莺。

望星，疏移北斗，

奈将往事雁同行。

阡陌人，昏灯明暗，

忍顾长亭。

多少VBA人，

暗夜中，悄声寻梦，盼却天明。

怎无凭！

回向学习利用VBA的历历往事，不胜感慨，谨以这些文字给大家，分享我多年工作实际经验的成果，随喜这些有用的东西，给确实需要利用VBA的同路人。

分享成果，随喜正能量

码地址：https://gitee.com/itsoft7/itbi-vue

一、实现目标

登录页面的实现
主界面的布局
导航菜单的实现

二、了解vue的目录结构

浅谈一下vue的目录结构，对vue小白用，大神请绕过。项目建立后，脚手架自动根据模板生成了文件目录结构，具体文件结构可以在网上可以搜索到，在这里就不再赘述了，我只针对重要的几个进行说明。

index.html : 是项目的入口，是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。而index.html中的Title部分不会被取代，所以会一直保留。比如可以实现加载Loading...等
main.js：是项目的主程序，在这里很多功能要实现，实例化Vue、初始化及存储全局变量、项目用的组件引入、样式文件引入等。
app.vue:是项目的主组件，所有页面都是在App.vue下进行切换的。也是整个项目的关键，app.vue负责构建定义及页面组件归集。

三者之间的联系是什么？

从上图简单看出三者之间联系，同时也体现出来vue的单页面模式，何为单页面应用（SPA），通俗一点说就是指只有一个主页面的应用（核心：index.html,main.js,app.vue），浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在app.vue（<router-view/>）。开发的每个模块都是一个组件，然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新组件资源，就是通常所说的不是全面页面刷新。单页面优缺点并存

单页面的优点：

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：

不利于seo。
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
初次加载时耗时多。
页面复杂度提高很多。

三、界面实现

登录界面

主界面

导航菜单

四、实现的技术点

1.样式表使用了scss : 项目采用的lang="scss"，后报错TypeError: this.getResolve is not a function at由于当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json和package-lock.json文件，里面的 "sass-loader"的版本更换掉就行了，换成如下版本"sass-loader": "^7.3.1",

2.路由模式采用了“history”：这样去掉了url地址中#号，具体代码需要修改router文件夹的index .js。

采用这种模式时，发布部署的时候一定要需要nginx的配合，后面文章会专门讲。

3.图标使用svg格式：

第一步：下载 "svg-sprite-loader": "^6.0.7",

第二步：修改配置文件

第三步：参照源码

4.使用elementUI：这ui使用也比较简单，具体使用方法可以通过官网了解,同样先下载依赖，然后在main.js重要初始化加载。

/*ElementUI*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

其中element-ui/lib/theme-chalk/index.css 是默认样式表，可以在官网按照自己喜欢的风格生成样式表，下载下来后单独引用即可，在使用过程需要自定义修改样式的需要单独自己创建一个样式文件，在默认样式表下单独自定义样式表，自定义的样式这样就可以覆盖默认的了，不建议直接默认的样式表上去修改。

4.Layout：layout是布局容器,可以根据应用场景定义自己的布局，其结构是:

布局说明

定义好后layout后如何和视图页面进行关联？在路由文件进行配置

五、总结

该文章不是一个演示文章，代码也不是为了写文章而写，我是想通过实际的项目给大家进行分享，代码已经完全公开，会不断的持续更新。

目前正在研究在vue使用mxgraph画流程图，正在研究中......

在线咨询

上一篇：历史上第一个网页长这样
下一篇：JavaScript库hxsfx.ajax之解决动态加载HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商