如何创建自定义的HTML元素

html-css08

如何创建自定义的HTML元素,第1张

可以使用document.registerElement()函数用来创建自定义的HTML元素。

它将返回一个构造函数，其中有一个参数选项，用来声明自定义HTML元素的名称，另外有一个可选参数项，用来描述原型的对象，自定义功能的元素。

在下面的示例中，简单的创建了一个新的HTML元素<x-treehouse>，并且将它放入到页面中：

var XTreehouseElement = document.registerElement('x-treehouse')

document.body.appendChild(new XTreehouseElement())

下面的HTML就会插入<body>元素内：

<x-treehouse></x-treehouse>

自定义元素的名称必须使用连字符-，这样浏览器就可以区分标准元素和自定义元素。

第一步，创建静态页面vhtml.html，并引入vue.js文件

第二步，在元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令

第三步，绑定v-html指令数据，这里设置为字符串

第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含

标签

第五步，预览该静态页面，这时会看到页面显示为“v-html指令”